@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=optional");
*{box-sizing:border-box}button,input,select,textarea{font-family:inherit}html{scroll-behavior:auto;overflow-y:scroll}body{margin:0;font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif;color:#071b43;background:#fff;font-size:14px}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.topbar{height:38px;color:#fff;background:linear-gradient(100deg,#0876f8,#0b94f4 65%,#23c4dc);font-size:12px}.topbar-in{height:100%;display:flex;align-items:center;justify-content:space-between}.perks,.social{display:flex;align-items:center}.perks span{padding:0 18px;border-right:1px solid #ffffff42}.perks span:first-child{padding-left:0}.social{gap:9px}.social i,.foot-social i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#0b58bb;color:#fff;font-style:normal;font-weight:800}.social a{margin-left:8px;padding:7px 14px;border-radius:9px;background:linear-gradient(90deg,#6a33ef,#4e42e9);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 5px 15px #4e42e94a}header{height:72px;background:#fff;border-bottom:1px solid #e7effb;position:sticky;top:0;z-index:20;box-shadow:0 5px 22px #3a70ad0b}.nav{height:100%;display:flex;align-items:center;gap:34px}.logo{display:flex;align-items:center;text-decoration:none;color:#071b43;min-width:225px}.logo>b{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#345bff,#00a8f6);color:#fff;font-size:21px;box-shadow:0 9px 22px #168cf052}.logo>span{display:flex;flex-direction:column;margin-left:10px}.logo strong{font-size:22px;letter-spacing:-1px}.logo strong span{color:#1478f3}.logo small{font-size:8px;letter-spacing:2px;color:#8292ad;font-weight:800;margin-top:1px}nav{display:flex;align-items:center;gap:25px;white-space:nowrap}nav a{color:#071b43;text-decoration:none;font-weight:700;font-size:13px;line-height:72px;position:relative}nav a.on{color:#0878ff}nav a.on:after{content:"";height:3px;border-radius:4px;background:#0878ff;position:absolute;left:0;right:0;bottom:0}.actions{margin-left:auto;display:flex;align-items:center;gap:10px}.search{height:42px;width:330px;border:1px solid #d9e5f6;border-radius:11px;display:flex;align-items:center;overflow:hidden;background:#fbfdff}.search>span{padding-left:13px;color:#7790b1}.search input{border:0;outline:0;flex:1;background:transparent;padding:0 10px;font-size:12px}.search button{width:46px;height:100%;border:0;background:#0879f6;color:#fff;font-size:18px}.cart{font-size:21px;position:relative;padding:5px}.cart b{position:absolute;right:-2px;top:-5px;background:#ff3449;color:#fff;font-size:9px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center}.login,.signup{height:42px;padding:0 19px;display:flex;align-items:center;border-radius:10px;text-decoration:none;font-weight:800;font-size:12px}.login{color:#071b43;border:1px solid #d5e0ef}.signup{color:#fff;background:linear-gradient(120deg,#0b93f7,#3353f2);box-shadow:0 8px 20px #1a75f037}.menu{display:none}.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#fff 0%,#f7fbff 38%,#e8f5ff 65%,#cce8ff 100%)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 22%,#fff9 0 3%,transparent 20%),linear-gradient(120deg,transparent 35%,#fff8 36%,transparent 48%);pointer-events:none}.hero-grid{height:485px;display:grid;grid-template-columns:45% 55%;position:relative}.hero-copy{padding-top:54px;position:relative;z-index:2}.badge{display:inline-flex;padding:8px 13px;border:1px solid #b9dcff;border-radius:999px;background:#f5fbff;color:#0473e8;font-weight:800;font-size:11px}.hero h1{font-size:44px;line-height:1.05;letter-spacing:-2.3px;margin:22px 0 14px;color:#07173b}.hero h1 em{font-style:normal;color:#0878f6}.hero-copy>p{font-size:15px;line-height:1.6;color:#60718d;margin:0 0 20px}.mini-perks{display:flex;gap:20px;margin-bottom:22px}.mini-perks span{display:flex;align-items:center;gap:8px}.mini-perks i{font-style:normal;font-size:20px}.mini-perks b{font-size:11px}.mini-perks small{display:block;font-size:9px;color:#7c8ca5;font-weight:500;margin-top:2px}.hero-btns{display:flex;gap:14px}.primary,.secondary{height:48px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;text-decoration:none;font-weight:800}.primary{color:#fff;background:linear-gradient(115deg,#0879f7,#0ba5ef);box-shadow:0 12px 28px #0b88f241}.secondary{color:#071b43;background:#fff;border:1px solid #d6e3f4}.rating-row{display:flex;align-items:center;gap:12px;margin-top:22px}.avatars{display:flex}.avatars i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-left:-5px;border:2px solid #fff;background:#365f8e;color:#fff;font-size:9px;font-style:normal;font-weight:800}.avatars i:last-child{width:38px;background:#0879f7}.rating-row>div:last-child{display:flex;flex-direction:column}.rating-row span{font-size:11px;color:#657793}.rating-row b{font-size:11px;color:#ffad00;margin-top:2px}.rating-row strong{color:#071b43}.rating-row small{color:#778aa5;font-weight:500}.signature{margin:22px 0 0 50px;color:#1684f6;font-family:cursive;font-size:24px;line-height:.8;transform:rotate(-5deg)}.signature span{margin-left:40px}.hero-art{position:absolute;right:-90px;top:0;width:68%;height:100%;z-index:1;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}.hero-art img{height:100%;width:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply;filter:saturate(1.05) contrast(1.02);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 100%)}.cat-zone{position:relative;margin-top:-2px}.categories{height:72px;background:#fff;border:1px solid #dce9f7;border-radius:13px;display:grid;grid-template-columns:1.1fr repeat(8,1fr);box-shadow:0 16px 38px #457db51d;transform:translateY(-12px);overflow:hidden;position:relative;z-index:5}.cat{display:flex;align-items:center;gap:9px;padding:10px 12px;text-decoration:none;color:#071b43;border-right:1px solid #e8eff8}.cat:last-child{border:0}.cat i{width:31px;height:31px;border-radius:9px;background:#eff7ff;color:#0879f7;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px}.cat span{min-width:0}.cat b{display:block;font-size:11px}.cat small{display:block;font-size:8px;color:#8090a8;margin-top:3px;white-space:nowrap}.cat.active{background:linear-gradient(145deg,#0b8ef7,#126af4);color:#fff}.cat.active i{background:#ffffff24;color:#fff}.cat.active small{color:#d8edff}.section{padding:54px 0}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}.section-head span{color:#0878f6;font-size:10px;font-weight:900;letter-spacing:.8px}.section-head h2{font-size:28px;margin:7px 0 3px;letter-spacing:-1px}.section-head p{margin:0;color:#74849c;font-size:12px}.section-head>a{color:#0878f6;font-weight:800;font-size:12px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product{border:1px solid #dbe7f4;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 12px 30px #345f8b12;transition:.25s}.product:hover{transform:translateY(-5px);box-shadow:0 20px 45px #226fc522}.thumb{height:150px;position:relative;overflow:hidden;background:#edf6ff}.thumb img{width:100%;height:100%;object-fit:cover}.thumb .flag{position:absolute;top:10px;left:10px;padding:5px 9px;border-radius:8px;background:#0879f7;color:#fff;font-size:9px}.product:nth-child(2) .flag{background:#ff3957}.product:nth-child(3) .flag{background:#10ae75}.product:nth-child(4) .flag{background:#ff3d58}.thumb button{position:absolute;right:9px;top:9px;width:27px;height:27px;border-radius:50%;border:0;background:#ffffffdd;color:#56708e}.product-info{padding:13px}.product h3{font-size:14px;line-height:1.35;margin:0 0 9px;min-height:38px}.price{display:flex;align-items:center;gap:9px}.price strong{font-size:16px;color:#0a2d6d}.product:nth-child(4) .price strong{color:#f3293f}.price del{font-size:11px;color:#8796ac}.meta{display:flex;justify-content:space-between;margin:10px 0;color:#657793;font-size:10px}.meta span:first-child{color:#ffab00}.meta small{color:#74849b}.detail{height:35px;border-radius:7px;background:linear-gradient(100deg,#0879f7,#0b9ef3);color:#fff;text-decoration:none;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center}.stats{background:linear-gradient(90deg,#f7fbff,#eef7ff,#f8fbff);border-top:1px solid #e0ebf7;border-bottom:1px solid #e0ebf7}.stats-grid{height:92px;display:grid;grid-template-columns:repeat(4,1fr)}.stats-grid>div{display:flex;align-items:center;justify-content:center;gap:13px;border-right:1px solid #dce8f5}.stats-grid>div:last-child{border:0}.stats i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eaf4ff;color:#0878f6;font-style:normal;font-size:22px}.stats b{font-size:18px}.stats small{display:block;font-size:10px;color:#6e7f98;font-weight:500;margin-top:2px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.review-grid article{border:1px solid #dce7f4;border-radius:12px;padding:18px;background:#fff;box-shadow:0 10px 28px #2d62930c}.review-grid header{height:auto;position:static;box-shadow:none;border:0;display:flex;align-items:center;gap:10px}.review-grid header i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0d80f5,#5c62ee);color:#fff;font-style:normal}.review-grid header b{font-size:12px}.review-grid header small{display:block;color:#7b8aa0;font-weight:500;margin-top:2px}.review-grid article>div{color:#ffad00;margin:8px 0}.review-grid p{color:#586b86;font-size:12px;line-height:1.6;margin:0}.cta{margin-top:10px;margin-bottom:45px;min-height:98px;border-radius:14px;background:linear-gradient(100deg,#efeaff,#e9f5ff 48%,#d7ecff);display:flex;align-items:center;padding:20px 28px;gap:18px}.rocket{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:26px;box-shadow:0 8px 24px #547ec629}.cta h2{margin:0;font-size:21px}.cta p{margin:4px 0 0;color:#64758f;font-size:11px}.cta>div:last-child{margin-left:auto;display:flex;gap:10px}.cta .primary,.cta .secondary{height:42px;font-size:11px}footer{border-top:1px solid #e2eaf4;padding-top:34px;background:#fbfdff}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.35fr;gap:35px}.footer-grid>div{display:flex;flex-direction:column;gap:9px}.footer-grid .logo{min-width:0}.footer-grid .logo>b{width:38px;height:38px}.footer-grid .logo strong{font-size:18px}.footer-grid p,.footer-grid a{font-size:10px;color:#71829b;text-decoration:none;margin:0}.footer-grid>div>b{font-size:11px;margin-bottom:5px}.about p{line-height:1.6;margin:10px 0}.foot-social{display:flex;gap:7px}.newsletter{height:38px;border:1px solid #d6e3f4;border-radius:8px;display:flex;overflow:hidden;margin-top:5px;background:#fff}.newsletter input{border:0;outline:0;padding:0 10px;min-width:0;flex:1;font-size:10px}.newsletter button{width:40px;border:0;background:#0879f7;color:#fff;font-size:17px}.copyright{border-top:1px solid #e4ecf5;margin-top:30px;height:55px;display:flex;align-items:center;justify-content:space-between;color:#7d8ca1;font-size:9px}.mobile-nav{display:none}
@media(max-width:1050px){.perks span:nth-child(3),.perks span:nth-child(4),.social span{display:none}.nav nav{display:none}.actions .search{width:260px}.hero-grid{grid-template-columns:48% 52%}.hero h1{font-size:38px}.hero-art{right:-120px;width:70%}.mini-perks{gap:10px;flex-wrap:wrap}.categories{overflow-x:auto;grid-template-columns:repeat(9,150px)}.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){body{padding-bottom:64px}.wrap{width:min(100% - 24px,560px)}.topbar{height:30px}.topbar-in{justify-content:center}.perks span{display:none}.perks span:first-child{display:block;border:0;padding:0}.social{display:none}header{height:62px}.nav{gap:10px}.logo{min-width:0}.logo>b{width:39px;height:39px}.logo strong{font-size:18px}.logo small{font-size:7px}.actions .search,.actions .login,.actions .signup{display:none}.actions{margin-left:auto}.menu{display:block;border:0;background:#eef6ff;color:#0a63d3;border-radius:9px;width:38px;height:38px;font-size:20px}.hero-grid{height:auto;display:flex;flex-direction:column;padding-top:0}.hero-copy{padding:28px 0 0}.badge{font-size:9px}.hero h1{font-size:34px;letter-spacing:-1.6px;margin:15px 0 10px}.hero-copy>p{font-size:13px}.desktop{display:none}.mini-perks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hero-btns a{flex:1;padding:0 10px;font-size:12px}.rating-row{margin-top:16px}.signature{display:none}.hero-art{position:relative;right:auto;top:auto;width:calc(100% + 24px);height:260px;margin-left:-12px;margin-top:8px}.hero-art img{height:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 92%,transparent 100%);object-position:65% center}.cat-zone{margin-top:0}.categories{transform:none;border-radius:0;width:100%;padding-left:12px;height:82px;box-shadow:none;border-left:0;border-right:0}.cat{min-width:116px;flex-direction:column;justify-content:center;text-align:center;gap:3px;padding:7px}.cat i{width:30px;height:30px}.cat span small{display:none}.section{padding:34px 0}.section-head{align-items:flex-start}.section-head h2{font-size:23px}.section-head>a{font-size:10px;margin-top:24px}.product-grid{grid-template-columns:1fr;gap:14px}.thumb{height:180px}.product h3{min-height:0}.stats-grid{height:auto;grid-template-columns:1fr 1fr;padding:14px 0}.stats-grid>div{height:66px;border-bottom:1px solid #dce8f5}.review-grid{grid-template-columns:1fr}.cta{margin:10px 12px 28px;flex-wrap:wrap;padding:18px}.cta>div:last-child{margin-left:0;width:100%}.cta>div:last-child a{flex:1}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-grid .about,.footer-grid>div:last-child{grid-column:1/-1}.copyright{height:auto;padding:18px 0;gap:10px;flex-direction:column;align-items:flex-start}.mobile-nav{position:fixed;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid #dce7f4;display:grid;grid-template-columns:repeat(5,1fr);z-index:50;box-shadow:0 -8px 25px #345f8b17}.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3b5a82;font-size:18px}.mobile-nav small{font-size:8px;margin-top:2px}}

/* v17 — hero artwork edge-to-edge blend */
@media (min-width:1051px){
  .hero{isolation:isolate;background:linear-gradient(90deg,#fff 0%,#fbfdff 34%,#f2f9ff 49%,#dceeff 72%,#cbe7ff 100%)}
  .hero:after{content:"";position:absolute;right:0;top:0;width:58vw;height:100%;background:radial-gradient(circle at 62% 48%,rgba(255,255,255,.42),transparent 50%);pointer-events:none;z-index:0}
  .hero-grid{height:505px}
  .hero-copy{z-index:3}
  .hero-art{position:absolute;top:0;bottom:0;right:calc((1180px - 100vw)/2);width:calc(55% + (100vw - 1180px)/2 + 90px);height:100%;overflow:visible;z-index:1;display:block}
  .hero-art:before{content:"";position:absolute;inset:7% 2% 4% 12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(56,158,255,.26),rgba(87,177,255,.08) 48%,transparent 72%);filter:blur(22px);z-index:-1}
  .hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 49%;mix-blend-mode:normal;filter:saturate(1.08) contrast(1.015) brightness(1.025);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 5%,#000 18%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 5%,#000 18%,#000 100%)}
}
@media (min-width:1051px) and (max-width:1219px){
  .hero-art{right:-20px;width:62%}
}
@media(max-width:1050px) and (min-width:721px){
  .hero-art{right:-45px;width:62%;height:100%}
  .hero-art img{object-position:53% center;mix-blend-mode:normal;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%)}
}
@media(max-width:720px){
  .hero-art img{object-fit:cover;object-position:58% 55%;mix-blend-mode:normal;filter:saturate(1.06) contrast(1.01);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}
}

/* v18 — geometry/alignment pass: equal left/right edges */
@media (min-width: 1101px){
  :root{--page-w:1180px;--edge-radius:16px}
  .wrap{width:min(var(--page-w),calc(100% - 48px))}
  .hero{background:#fff;overflow:visible;padding:0 0 0}
  .hero:before,.hero:after{display:none}
  .hero-grid{height:500px;border-radius:0;overflow:hidden;background:linear-gradient(90deg,#fff 0%,#fbfdff 38%,#eef8ff 58%,#d8edff 100%)}
  .hero-copy{padding:48px 0 0 0;width:46%;z-index:4}
  .hero-art{top:0;right:0;bottom:auto;width:57%;height:100%;overflow:hidden;z-index:1;display:block}
  .hero-art:before{inset:5% 2% 4% 8%}
  .hero-art img{width:100%;height:100%;object-fit:cover;object-position:55% center;max-width:none;mix-blend-mode:normal;filter:saturate(1.06) contrast(1.01) brightness(1.02);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 10%,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 10%,#000 22%,#000 100%)}
  .cat-zone{margin-top:0}
  .categories{transform:translateY(-14px);border-radius:14px;width:100%;margin:0 auto}
  .products.section,.reviews.section{padding-left:0;padding-right:0}
  .product-grid,.review-grid,.section-head{width:100%}
  .cta{width:min(var(--page-w),calc(100% - 48px));margin-left:auto;margin-right:auto}
}
@media (min-width: 1400px){
  .wrap{width:1240px}
  :root{--page-w:1240px}
  .hero-copy{width:45%}
  .hero-art{width:59%}
}

/* v19 — refined header commerce controls */
.actions{gap:12px;min-width:0}.actions .search{transition:border-color .22s ease,box-shadow .22s ease,background .22s ease}.actions .search:focus-within{border-color:#7ebaff;background:#fff;box-shadow:0 0 0 4px #1688ff12,0 10px 28px #176ac817}.actions .search button{cursor:pointer;background:linear-gradient(135deg,#0a8cf7 0%,#075ee9 100%);transition:.22s ease}.actions .search button:hover{filter:brightness(1.06)}
.cart{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid #dce7f5;background:linear-gradient(180deg,#fff,#f7fbff);box-shadow:0 6px 18px #285f9d12;cursor:pointer;transition:.22s ease}.cart:hover{transform:translateY(-2px);border-color:#a8d0ff;box-shadow:0 10px 24px #1777d923}.cart-icon{width:22px;height:22px;display:block}.cart svg,.auth-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cart b{right:-5px;top:-7px;width:19px;height:19px;border:2px solid #fff;font-size:9px;box-shadow:0 3px 8px #ff34494d}
.login,.signup{height:44px;min-width:116px;padding:0 18px;gap:8px;justify-content:center;white-space:nowrap;border-radius:12px;font-size:12px;letter-spacing:-.1px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease;position:relative;overflow:hidden}.auth-icon{width:17px;height:17px;display:block;flex:0 0 auto}.login{color:#10264d;border:1px solid #cddcf0;background:linear-gradient(180deg,#fff 0%,#f9fbff 100%);box-shadow:0 6px 18px #214f8910}.login:hover{transform:translateY(-2px);border-color:#88baff;color:#086ee8;box-shadow:0 10px 26px #176fc31f}.signup{min-width:108px;color:#fff;border:1px solid #2578ff;background:linear-gradient(125deg,#05a8f5 0%,#087cf5 42%,#4a42f3 100%);box-shadow:0 10px 24px #146ff33a}.signup:before{content:"";position:absolute;top:-70%;left:-45%;width:34px;height:240%;background:linear-gradient(90deg,transparent,#ffffff70,transparent);transform:rotate(25deg);transition:left .55s ease}.signup:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 14px 32px #245cf14a}.signup:hover:before{left:125%}.signup>*{position:relative;z-index:1}
@media (min-width:1051px) and (max-width:1280px){.nav{gap:20px}.logo{min-width:195px}.logo strong{font-size:20px}nav{gap:17px}.actions{gap:8px}.actions .search{width:265px}.login,.signup{min-width:auto;padding:0 14px}.auth-icon{width:15px;height:15px}}

/* v20 colorful premium category icons */
.categories{overflow:visible}
.cat{transition:background .22s ease,transform .22s ease,box-shadow .22s ease}
.cat:not(.active):hover{background:#fbfdff;transform:translateY(-3px);box-shadow:0 12px 28px rgba(31,103,196,.10);z-index:2}
.cat .cat-icon{width:42px;height:42px;min-width:42px;border-radius:13px;color:#fff!important;font-size:14px;font-weight:900;box-shadow:0 8px 18px rgba(29,78,216,.20),inset 0 1px 0 rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.55);position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.12);transition:transform .22s ease,box-shadow .22s ease}
.cat .cat-icon:after{content:"";position:absolute;left:-35%;top:-55%;width:90%;height:130%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.52),transparent);transform:rotate(20deg);opacity:.65}
.cat:hover .cat-icon{transform:translateY(-2px) scale(1.06);box-shadow:0 11px 23px rgba(29,78,216,.28),inset 0 1px 0 rgba(255,255,255,.65)}
.cat .cat-all{background:linear-gradient(145deg,#2ad4ff,#1168ff 58%,#4a46ff)}
.cat .cat-web{background:linear-gradient(145deg,#7dd3fc,#2563eb 70%,#1d4ed8);font-size:21px}
.cat .cat-php{background:linear-gradient(145deg,#c084fc,#7c3aed 58%,#5b21b6);font-style:italic;font-size:13px}
.cat .cat-laravel{background:linear-gradient(145deg,#fb7185,#f43f5e 58%,#e11d48);font-size:22px}
.cat .cat-wp{background:linear-gradient(145deg,#60a5fa,#1477ef 60%,#0756d8);font-family:Georgia,serif;font-size:22px}
.cat .cat-html{background:linear-gradient(145deg,#fbbf24,#fb923c 58%,#f97316);font-size:13px}
.cat .cat-bot{background:linear-gradient(145deg,#6ee7b7,#20d69b 58%,#10b981);font-size:21px}
.cat .cat-mobile{background:linear-gradient(145deg,#f472b6,#ec4899 58%,#db2777);font-size:22px}
.cat .cat-other{background:linear-gradient(145deg,#d8b4fe,#a78bfa 58%,#8b5cf6);font-size:16px;letter-spacing:1px}
.cat.active{background:linear-gradient(135deg,#14b8ff 0%,#0878f6 48%,#3b45f4 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.cat.active .cat-icon{background:rgba(255,255,255,.96);color:#1675f4!important;text-shadow:none;box-shadow:0 8px 18px rgba(3,64,170,.20)}
.cat b{font-size:11.5px}.cat small{font-size:8px}
@media(max-width:720px){.cat .cat-icon{width:40px;height:40px;min-width:40px;border-radius:12px}.categories{overflow-x:auto;overflow-y:visible}.cat:not(.active):hover{transform:none}}

/* v21 — desktop scale-up pass */
@media (min-width:1101px){
  :root{--page-w:1380px}
  .wrap{width:min(var(--page-w),calc(100% - 56px))}
  .topbar{height:40px;font-size:12.5px}
  header{height:78px}
  .nav{gap:28px}
  .logo{min-width:230px}
  .logo>b{width:48px;height:48px;border-radius:14px;font-size:22px}
  .logo strong{font-size:23px}
  nav{gap:24px}
  nav a{font-size:13.5px;line-height:78px}
  .search{width:350px;height:46px}
  .cart,.login,.signup{height:46px}
  .hero-grid{height:550px;grid-template-columns:46% 54%}
  .hero-copy{width:100%;padding-top:52px;padding-right:22px}
  .badge{font-size:11.5px;padding:9px 15px}
  .hero h1{font-size:50px;line-height:1.04;letter-spacing:-2.5px;margin:23px 0 16px;white-space:normal}
  .hero-copy>p{font-size:16px;line-height:1.65;margin-bottom:22px}
  .mini-perks{gap:22px;margin-bottom:24px}
  .mini-perks b{font-size:11.5px}.mini-perks small{font-size:9.5px}
  .primary,.secondary{height:50px;padding:0 26px}
  .rating-row{margin-top:23px}.signature{font-size:27px}
  .hero-art{width:56%;height:100%;right:0}
  .hero-art img{object-position:54% center}
  .categories{height:84px;grid-template-columns:1.12fr repeat(8,1fr);border-radius:16px;transform:translateY(-15px)}
  .cat{gap:11px;padding:11px 14px}.cat .cat-icon{width:46px;height:46px;min-width:46px;border-radius:14px}.cat b{font-size:12px}.cat small{font-size:8.5px}
  .section{padding:62px 0}.section-head h2{font-size:31px}.section-head p{font-size:13px}.section-head>a{font-size:13px}
  .product-grid{gap:22px}.product{border-radius:15px}.thumb{height:178px}.product-info{padding:16px}.product h3{font-size:15px}.price strong{font-size:18px}.detail{height:40px;font-size:12px}
  .stats-grid{height:104px}.stats i{width:48px;height:48px}.stats b{font-size:20px}
  .review-grid{gap:22px}.review-grid article{padding:21px;border-radius:15px}
  .cta{width:min(var(--page-w),calc(100% - 56px));min-height:112px;border-radius:18px}
}
@media (min-width:1101px) and (max-width:1450px){
  :root{--page-w:1280px}
  .wrap{width:min(var(--page-w),calc(100% - 44px))}
  .hero h1{font-size:46px}
  .hero-grid{height:525px}
  .search{width:300px}
  nav{gap:19px}.nav{gap:22px}.logo{min-width:210px}
  .categories{height:80px}.cat{padding:9px 10px}.cat .cat-icon{width:42px;height:42px;min-width:42px}
}

/* v22 — true full-screen desktop layout */
@media (min-width:1101px){
  :root{--page-w:none}
  .wrap{width:calc(100% - 64px);max-width:none;margin-left:32px;margin-right:32px}
  .topbar .wrap,.nav.wrap{width:calc(100% - 72px);margin-left:36px;margin-right:36px}
  .nav{gap:30px}
  .logo{min-width:225px}
  nav{gap:25px}
  .actions{margin-left:auto}
  .actions .search{width:clamp(300px,22vw,430px)}
  .hero-grid{width:calc(100% - 64px);max-width:none;margin-left:32px;margin-right:32px;height:590px;grid-template-columns:42% 58%}
  .hero-copy{width:100%;max-width:700px;padding-top:60px;padding-right:34px}
  .hero h1{font-size:clamp(48px,3.15vw,62px);line-height:1.02;letter-spacing:-2.7px}
  .hero-copy>p{max-width:650px;font-size:16.5px}
  .hero-art{right:0;width:61%;height:100%}
  .hero-art img{object-position:54% center}
  .cat-zone .wrap{width:calc(100% - 64px);max-width:none;margin-left:32px;margin-right:32px}
  .categories{height:88px;grid-template-columns:1.08fr repeat(8,1fr)}
  .cat{padding:12px 16px;gap:12px}
  .cat .cat-icon{width:48px;height:48px;min-width:48px}
  .cat b{font-size:12.5px}.cat small{font-size:8.8px}
  .section>.wrap,.stats>.wrap,footer>.wrap{width:calc(100% - 64px);max-width:none;margin-left:32px;margin-right:32px}
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .thumb{height:clamp(180px,13vw,235px)}
  .section-head h2{font-size:33px}
  .cta{width:calc(100% - 64px);max-width:none;margin-left:32px;margin-right:32px}
}
@media (min-width:1600px){
  .wrap,.hero-grid,.cat-zone .wrap,.section>.wrap,.stats>.wrap,footer>.wrap,.cta{width:calc(100% - 96px);margin-left:48px;margin-right:48px}
  .topbar .wrap,.nav.wrap{width:calc(100% - 96px);margin-left:48px;margin-right:48px}
  .hero-grid{height:620px;grid-template-columns:41% 59%}
  .hero-copy{padding-top:68px;max-width:760px}
  .hero-art{width:62%}
  .categories{height:92px}
  .product-grid{gap:28px}
}

/* v23 — true edge-to-edge desktop canvas; remove right-side dead strip */
html,body{width:100%;max-width:100%;overflow-x:hidden}
@media (min-width:1101px){
  :root{--edge:32px}
  .wrap,
  .topbar .wrap,
  .nav.wrap,
  .hero-grid,
  .cat-zone .wrap,
  .section>.wrap,
  .stats>.wrap,
  footer>.wrap{
    width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:var(--edge);padding-right:var(--edge);box-sizing:border-box
  }
  .hero{width:100%;max-width:none;margin:0;overflow:hidden}
  .hero-grid{height:590px;grid-template-columns:42% 58%;position:relative}
  .hero-copy{padding-left:0;position:relative;z-index:3}
  .hero-art{position:absolute;top:0;right:0;bottom:0;width:61%;height:100%;overflow:hidden;z-index:1}
  .hero-art img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:54% center}
  .cat-zone{width:100%;max-width:none}
  .cat-zone .wrap{padding-right:0}
  .categories{width:100%;max-width:none;margin:0;border-radius:16px 0 0 16px;transform:translateY(-15px)}
  .cta{width:calc(100% - (var(--edge) * 2));max-width:none;margin-left:var(--edge);margin-right:var(--edge)}
}
@media (min-width:1600px){
  :root{--edge:48px}
  .hero-grid{height:620px;grid-template-columns:41% 59%}
  .hero-art{width:62%}
}

/* v24 — balanced side breathing room for featured products */
@media (min-width:1101px){
  .products.wrap{
    --products-edge:clamp(52px,4vw,76px);
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:var(--products-edge);
    padding-right:var(--products-edge);
    box-sizing:border-box;
  }
  .products .section-head{margin-bottom:24px}
  .products .product-grid{gap:clamp(22px,1.6vw,30px)}
  .products .product{border-radius:16px}
  .products .thumb{border-radius:15px 15px 0 0}
}
@media (min-width:1600px){
  .products.wrap{--products-edge:72px}
}

/* v25 — split login/register modal on index */
.auth-lock{overflow:hidden}.auth-modal{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:.25s ease}.auth-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}.auth-backdrop{position:absolute;inset:0;border:0;background:rgba(5,20,48,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:default}.auth-dialog{position:relative;width:min(1040px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:auto;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.75);border-radius:26px;box-shadow:0 34px 100px rgba(2,32,79,.32);transform:translateY(18px) scale(.985);transition:.28s cubic-bezier(.2,.8,.2,1)}.auth-modal.is-open .auth-dialog{transform:none}.auth-close{position:absolute;right:18px;top:17px;z-index:3;width:38px;height:38px;border-radius:12px;border:1px solid #dbe8f7;background:#fff;color:#38506f;font-size:25px;line-height:1;cursor:pointer;box-shadow:0 8px 24px #1d579018}.auth-close:hover{color:#0878f6;border-color:#9cc9ff;transform:rotate(4deg)}.auth-brandbar{min-height:82px;padding:17px 70px 17px 26px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #e7eef8;background:linear-gradient(100deg,#fff 0%,#f5faff 58%,#eef4ff 100%)}.auth-brandbar .logo{min-width:225px}.auth-brandbar>span{color:#667b99;font-size:12px}.auth-split{display:grid;grid-template-columns:1fr 1.08fr;min-height:540px}.auth-pane{padding:34px 42px 38px}.auth-login-pane{background:linear-gradient(145deg,#fbfdff 0%,#f3f9ff 100%);border-right:1px solid #e4edf8}.auth-register-pane{background:#fff}.auth-kicker{font-size:10px;letter-spacing:1.7px;font-weight:900;color:#0a7df5;margin-bottom:8px}.auth-pane h2{margin:0;color:#071b43;font-size:30px;letter-spacing:-1px}.auth-pane>p{margin:8px 0 22px;color:#72839d;font-size:12px;line-height:1.55}.auth-form{display:flex;flex-direction:column;gap:15px}.auth-form label>span:first-child{display:block;margin:0 0 7px;color:#203858;font-size:12px;font-weight:700}.auth-field{height:48px;display:flex;align-items:center;border:1px solid #d7e4f4;border-radius:12px;background:#fff;box-shadow:0 5px 16px #1f61920b;transition:.2s}.auth-field:focus-within{border-color:#63a9ff;box-shadow:0 0 0 4px #1684f613,0 8px 22px #126dc317}.auth-field i{width:34px;height:34px;margin-left:6px;margin-right:8px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:16px;flex:none;border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 7px 16px rgba(39,93,170,.13)}.auth-field i svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}.auth-field i.is-email{color:#1479f5;background:linear-gradient(145deg,#eef7ff,#dceeff)}.auth-field i.is-user{color:#0aa3bc;background:linear-gradient(145deg,#e9fcff,#d9f6fb)}.auth-field i.is-lock{color:#7655f5;background:linear-gradient(145deg,#f3efff,#e9e1ff)}.auth-field input{height:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;padding:0 13px 0 0;color:#10284e;font-family:inherit;font-size:13px;font-weight:500}.auth-field input::placeholder{color:#9aabc0}.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.auth-row>a{font-size:11px;color:#0878f6;text-decoration:none;font-weight:700}.auth-links-row{margin-top:-2px;flex-wrap:wrap}.auth-forgot-link{color:#6f58f3!important}.auth-forgot-link:hover,.auth-row>a:hover{text-decoration:underline}.auth-check{display:flex!important;align-items:flex-start;gap:8px;cursor:pointer}.auth-check input{margin:2px 0 0;accent-color:#0878f6}.auth-check>span{margin:0!important;color:#667a96!important;font-size:10px!important;font-weight:600!important;line-height:1.45}.auth-submit{height:49px;border:0;border-radius:12px;color:#fff;font-weight:900;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s;box-shadow:0 12px 26px #1477e82b}.auth-submit:hover{transform:translateY(-2px);box-shadow:0 16px 32px #1477e83c}.login-submit{background:linear-gradient(115deg,#0879f7,#08a5ef)}.register-submit{background:linear-gradient(115deg,#0aa8f4,#1475f4 55%,#5544ee)}.auth-submit b{font-size:17px}.auth-trust{display:flex;gap:16px;margin-top:18px;padding-top:17px;border-top:1px solid #e2ecf7;color:#68809d;font-size:9px;font-weight:700}.auth-password-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.auth-alert{padding:10px 12px;border-radius:10px;font-size:10px;font-weight:700;margin:0 0 13px}.auth-alert.error{color:#b42336;background:#fff0f2;border:1px solid #ffd2d9}.auth-alert.success{color:#087449;background:#ecfff7;border:1px solid #bcebd8}.terms{margin-top:1px}
@media(max-width:760px){.auth-modal{padding:10px}.auth-dialog{width:100%;max-height:calc(100vh - 20px);border-radius:20px}.auth-brandbar{padding:14px 55px 14px 18px;min-height:68px}.auth-brandbar .logo{min-width:0}.auth-brandbar>span{display:none}.auth-close{right:12px;top:12px;width:36px;height:36px}.auth-split{grid-template-columns:1fr}.auth-pane{padding:25px 20px 28px}.auth-login-pane{border-right:0;border-bottom:1px solid #e4edf8}.auth-pane h2{font-size:26px}.auth-password-grid{grid-template-columns:1fr}.auth-field{height:47px}.auth-links-row{align-items:flex-start;gap:8px 14px}}

/* v26 — single auth form with Login / Register tabs */
.auth-dialog{width:min(560px,calc(100vw - 48px))}
.auth-brandbar{padding:17px 64px 17px 24px;gap:16px}.auth-brandbar .logo{min-width:205px}.auth-brandbar>span{font-size:11px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:22px 34px 0;padding:5px;background:#f0f6fd;border:1px solid #dfebf8;border-radius:14px}
.auth-tab{height:44px;border:0;border-radius:10px;background:transparent;color:#6c7f99;font-weight:900;font-size:12px;cursor:pointer;transition:.2s}
.auth-tab.active{background:#fff;color:#0878f6;box-shadow:0 7px 20px rgba(26,91,158,.13)}
.auth-panels{position:relative}.auth-pane{display:none;padding:25px 40px 36px}.auth-pane.active{display:block;animation:authTabIn .22s ease}.auth-login-pane{background:#fff;border-right:0}.auth-register-pane{background:#fff}
@keyframes authTabIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:760px){.auth-dialog{width:100%}.auth-tabs{margin:16px 18px 0}.auth-pane{padding:22px 20px 28px}.auth-brandbar{padding:14px 55px 14px 18px}}

/* v28 — authenticated header state */
.user-menu{position:relative}.user-trigger{height:44px;display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border:1px solid #d8e7f7;border-radius:12px;background:#fff;color:#173252;cursor:pointer;box-shadow:0 6px 18px rgba(26,91,158,.08)}.user-avatar{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#0879f7,#6550ef);color:#fff;font-size:13px;font-weight:900}.user-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:125px}.user-copy b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.user-copy small{font-size:8px;color:#7990aa}.user-chevron{font-size:12px;color:#7187a1}.user-dropdown{position:absolute;right:0;top:calc(100% + 9px);width:220px;padding:8px;background:#fff;border:1px solid #dce8f5;border-radius:13px;box-shadow:0 18px 45px rgba(14,50,94,.17);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s;z-index:100}.user-menu:hover .user-dropdown,.user-menu:focus-within .user-dropdown{opacity:1;visibility:visible;transform:none}.user-dropdown-head{padding:9px 10px 11px;border-bottom:1px solid #edf2f8;display:flex;flex-direction:column}.user-dropdown-head b{font-size:11px;color:#132f52}.user-dropdown-head small{font-size:9px;color:#7c90a9;margin-top:3px;overflow:hidden;text-overflow:ellipsis}.user-logout{display:block;margin-top:6px;padding:10px;border-radius:9px;color:#d33b50!important;font-size:10px;font-weight:800;text-decoration:none}.user-logout:hover{background:#fff1f3}
@media(max-width:1100px){.user-copy{display:none}.user-trigger{padding-right:6px}.user-chevron{display:none}}

/* v29 — login success confirmation */
.login-success-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;opacity:1;visibility:visible;transition:.32s ease}.login-success-backdrop{position:absolute;inset:0;background:rgba(5,20,48,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.login-success-card{position:relative;width:min(390px,calc(100vw - 32px));padding:32px 28px 24px;text-align:center;background:#fff;border:1px solid rgba(255,255,255,.85);border-radius:22px;box-shadow:0 28px 80px rgba(2,32,79,.28);animation:loginSuccessIn .35s cubic-bezier(.2,.8,.2,1)}.login-success-icon{width:68px;height:68px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#18c987,#08a86e);color:#fff;font-size:34px;font-weight:900;box-shadow:0 12px 30px rgba(12,181,118,.28)}.login-success-card h3{margin:0;color:#071b43;font-size:23px;letter-spacing:-.5px}.login-success-card p{margin:9px 0 20px;color:#6f829c;font-size:12px;line-height:1.6}.login-success-card p b{color:#0878f6}.login-success-progress{height:4px;overflow:hidden;border-radius:99px;background:#e9f1fa}.login-success-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#08a86e,#0b8cf4);transform-origin:left;animation:loginSuccessProgress 1.8s linear forwards}.login-success-modal.is-leaving{opacity:0;visibility:hidden}.login-success-modal.is-leaving .login-success-card{transform:translateY(-8px) scale(.98);transition:.32s ease}@keyframes loginSuccessIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}@keyframes loginSuccessProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* v31 — complete product detail page */
.product-detail-page{background:linear-gradient(180deg,#f7fbff 0,#fff 420px);min-height:70vh;padding-bottom:64px}.product-breadcrumb{display:flex;align-items:center;gap:10px;padding-top:24px;padding-bottom:18px;color:#7a8ca6;font-size:12px}.product-breadcrumb a{color:#66809f;text-decoration:none}.product-breadcrumb b{color:#17345e}.product-detail-card{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:42px;padding-top:32px!important;padding-bottom:32px!important;background:#fff;border:1px solid #dce8f5;border-radius:22px;box-shadow:0 22px 60px rgba(30,83,145,.10)}.product-gallery{padding-left:32px}.product-main-image{height:430px;border-radius:18px;overflow:hidden;position:relative;background:#eaf4ff;border:1px solid #dce9f7}.product-main-image img{width:100%;height:100%;object-fit:cover;display:block}.product-image-badge{position:absolute;left:18px;top:18px;padding:8px 12px;border-radius:9px;background:rgba(6,116,238,.94);color:#fff;font-size:10px;font-weight:900;box-shadow:0 8px 20px rgba(6,116,238,.28)}.product-trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.product-trust-row span{padding:12px;border:1px solid #e1eaf5;border-radius:11px;text-align:center;font-size:11px;font-weight:800;color:#49637f;background:#fbfdff}.product-summary{padding:12px 32px 8px 0}.product-category{display:inline-flex;padding:7px 11px;border-radius:999px;background:#eaf5ff;color:#0878f6;font-size:10px;font-weight:900;text-transform:uppercase}.product-summary h1{font-size:34px;line-height:1.18;letter-spacing:-1.3px;margin:15px 0 12px;color:#071b43}.product-rating{display:flex;align-items:center;gap:10px;color:#70839e;font-size:11px}.product-rating b{color:#f5a800}.product-rating strong{color:#17345e}.product-rating i{width:1px;height:15px;background:#d8e2ef}.product-lead{font-size:14px;line-height:1.7;color:#647792;margin:20px 0}.product-price-box{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:15px;background:linear-gradient(120deg,#f1f8ff,#f8fbff);border:1px solid #d9eaff}.product-price-box>div{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}.product-price-box small{width:100%;color:#7388a3;font-size:10px;font-weight:700}.product-price-box strong{font-size:29px;color:#0878f6;letter-spacing:-1px}.product-price-box del{color:#91a0b4;font-size:13px}.product-price-box>span{font-size:10px;color:#51708f;font-weight:700}.product-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.product-benefits>div{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid #e1ebf6;border-radius:11px;background:linear-gradient(145deg,#fff,#fbfdff);transition:.22s ease}.product-benefits>div:hover{transform:translateY(-2px);border-color:#cddfff;box-shadow:0 10px 24px rgba(70,104,255,.10)}.product-benefits .benefit-icon{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;color:#fff;isolation:isolate;box-shadow:0 5px 15px rgba(73,71,255,.24);animation:benefitGlow 2.6s ease-in-out infinite}.product-benefits .benefit-icon::before{content:"";position:absolute;inset:-3px;border-radius:12px;background:inherit;filter:blur(8px);opacity:.42;z-index:-1}.product-benefits .benefit-icon svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 3px rgba(255,255,255,.28))}.product-benefits .benefit-icon-source{background:linear-gradient(135deg,#1677ff,#6f4dff 55%,#c13cff)}.product-benefits .benefit-icon-deploy{background:linear-gradient(135deg,#00c8ff,#00d89b 55%,#79e43a);animation-delay:.35s}.product-benefits .benefit-icon-update{background:linear-gradient(135deg,#ff5aa5,#aa46ff 52%,#5865ff);animation-delay:.7s}.product-benefits b,.product-benefits small{display:block}.product-benefits b{font-size:10px;color:#17345e}.product-benefits small{font-size:8px;color:#8494a9;margin-top:2px}@keyframes benefitGlow{0%,100%{filter:saturate(1);transform:translateY(0) scale(1)}50%{filter:saturate(1.22) brightness(1.08);transform:translateY(-1px) scale(1.04)}}.product-buy-btn{height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;text-decoration:none;font-size:14px;font-weight:900;background:linear-gradient(115deg,#0788f8,#0766ed 60%,#4148ed);box-shadow:0 13px 28px rgba(20,104,238,.28);transition:.2s}.product-buy-btn:hover{transform:translateY(-2px);box-shadow:0 17px 34px rgba(20,104,238,.34)}.product-buy-btn span{font-size:18px}.product-safe{text-align:center;color:#8292a7;font-size:10px;margin:11px 0 0}.product-info-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;margin-top:24px}.product-description-card,.product-side-card{background:#fff;border:1px solid #dce8f5;border-radius:18px;box-shadow:0 14px 40px rgba(30,83,145,.07)}.product-description-card{padding:30px}.product-section-title span{color:#0878f6;font-size:9px;font-weight:900;letter-spacing:.9px}.product-section-title h2{font-size:24px;margin:6px 0 20px}.product-description-text{font-size:13px;line-height:1.85;color:#536a86;white-space:normal}.product-side-card{padding:23px}.product-side-card h3{margin:0 0 13px;font-size:17px}.product-side-card>div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #edf2f8;font-size:11px}.product-side-card span{color:#7b8ca3}.product-side-card b{color:#19385f;text-align:right}.product-side-card .available{color:#0aa26d}.product-side-card>a{display:block;margin-top:17px;text-align:center;padding:11px;border-radius:10px;background:#f0f7ff;color:#0878f6;text-decoration:none;font-size:11px;font-weight:800}
@media(min-width:1101px){.product-detail-card,.product-info-layout,.product-breadcrumb{width:calc(100% - 96px);max-width:none;margin-left:48px;margin-right:48px}.product-detail-card{padding-left:0!important;padding-right:0!important}}
@media(max-width:900px){.product-detail-card{grid-template-columns:1fr;gap:18px}.product-gallery{padding:20px 20px 0}.product-summary{padding:0 20px 22px}.product-info-layout{grid-template-columns:1fr}.product-main-image{height:360px}}
@media(max-width:720px){.product-detail-page{padding-bottom:30px}.product-breadcrumb{padding-top:15px}.product-detail-card{border-radius:15px}.product-gallery{padding:14px 14px 0}.product-main-image{height:230px;border-radius:12px}.product-summary{padding:0 14px 18px}.product-summary h1{font-size:25px}.product-price-box{align-items:flex-start;flex-direction:column;gap:8px}.product-benefits{grid-template-columns:1fr}.product-trust-row{grid-template-columns:1fr 1fr 1fr}.product-trust-row span{padding:9px 5px;font-size:9px}.product-info-layout{width:min(100% - 24px,560px);margin-left:auto;margin-right:auto}.product-description-card,.product-side-card{padding:20px}.topbar{display:none}}
/* v32 — wallet, balance and checkout */
.user-wallet-link{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:10px;border-radius:9px;color:#0878f6!important;background:#f3f8ff;font-size:10px;font-weight:800;text-decoration:none}.user-wallet-link b{color:#0b5fd0}.wallet-page,.checkout-page{background:#f5f8fc}.wallet-wrap{width:min(1180px,calc(100% - 32px));margin:34px auto 70px}.wallet-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}.wallet-hero>div:first-child>span,.checkout-kicker{font-size:10px;font-weight:900;letter-spacing:1.4px;color:#0878f6}.wallet-hero h1{margin:5px 0;font-size:34px;color:#0b2147}.wallet-hero p{margin:0;color:#74869f}.balance-card{min-width:310px;padding:22px 24px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#087ff7,#3854ed);box-shadow:0 18px 40px #176fe638}.balance-card small,.balance-card span{display:block;opacity:.82;font-size:10px;font-weight:700}.balance-card strong{display:block;font-size:31px;margin:5px 0 9px}.wallet-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.wallet-panel{background:#fff;border:1px solid #e0e9f4;border-radius:18px;padding:24px;margin-bottom:20px;box-shadow:0 10px 32px #1f51870a}.wallet-panel h2{margin:0 0 7px;font-size:18px;color:#102b53}.wallet-panel>p{margin:0 0 20px;color:#7789a0;font-size:12px}.wallet-form{display:grid;gap:14px}.wallet-form label{font-size:11px;font-weight:800;color:#294464}.wallet-form input,.wallet-form textarea{display:block;width:100%;margin-top:7px;border:1px solid #d8e4f2;border-radius:11px;padding:12px 13px;outline:none;font:inherit}.wallet-form textarea{min-height:80px;resize:vertical}.wallet-form button{height:48px;border:0;border-radius:11px;color:#fff;background:linear-gradient(115deg,#087cf7,#3157ee);font-weight:900;cursor:pointer}.bank-placeholder{padding:20px;border:1px dashed #b9d3f2;border-radius:14px;background:#f6faff;color:#355476}.bank-placeholder b{color:#173c6b}.bank-placeholder p{font-size:12px;line-height:1.7}.bank-placeholder small{font-size:10px}.wallet-note{margin-top:14px;padding:12px;border-radius:10px;background:#fff8e7;color:#876116;font-size:10px;font-weight:700}.wallet-alert{padding:13px 15px;border-radius:11px;margin:0 0 18px;font-size:12px;font-weight:700}.wallet-alert.success{background:#eafaf2;color:#08764a;border:1px solid #c5eed9}.wallet-alert.error{background:#fff0f2;color:#bd3347;border:1px solid #ffd1d8}.wallet-table{overflow:auto}.wallet-table table{width:100%;border-collapse:collapse;min-width:700px}.wallet-table th,.wallet-table td{text-align:left;padding:12px 10px;border-bottom:1px solid #edf2f7;font-size:11px}.wallet-table th{color:#7d8da3;font-size:9px;letter-spacing:.5px}.wallet-status{display:inline-flex;padding:5px 8px;border-radius:99px;font-weight:800}.wallet-status.pending{background:#fff5dc;color:#946800}.wallet-status.approved{background:#eafaf2;color:#08764a}.wallet-status.rejected{background:#fff0f2;color:#bd3347}.money-plus{color:#07844f;font-weight:800}.money-minus{color:#d33b50;font-weight:800}.checkout-shell{width:min(760px,calc(100% - 28px));margin:40px auto}.checkout-shell>.logo{display:flex;width:max-content;margin:0 auto 24px}.checkout-card{background:#fff;border:1px solid #dce8f5;border-radius:22px;padding:34px;box-shadow:0 22px 60px #163f7115}.checkout-card h1{font-size:27px;color:#102b53;margin:7px 0}.checkout-card p{color:#74869f}.checkout-price{display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid #edf2f7;color:#60738c}.checkout-price b{color:#0878f6;font-size:18px}.checkout-price.balance b{color:#0b8b59}.checkout-actions{display:flex;justify-content:space-between;gap:12px;margin-top:17px}.checkout-actions a{color:#0878f6;text-decoration:none;font-size:11px;font-weight:800}@media(max-width:760px){.wallet-hero{align-items:stretch;flex-direction:column}.balance-card{min-width:0}.wallet-grid{grid-template-columns:1fr}.wallet-wrap{margin-top:20px}.wallet-panel{padding:18px}.checkout-card{padding:22px}.checkout-actions{flex-direction:column}}
\n/* v34 — working mobile hamburger drawer */
.menu{display:none;cursor:pointer;position:relative;z-index:72}
.mobile-drawer{display:none}
@media(max-width:720px){
  body.mobile-menu-lock{overflow:hidden;touch-action:none}
  header{z-index:70}.menu{display:block!important;pointer-events:auto!important;touch-action:manipulation}
  .mobile-drawer{display:block;position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none}
  .mobile-drawer.is-open{visibility:visible;pointer-events:auto}
  .mobile-drawer-backdrop{position:absolute;inset:0;border:0;background:rgba(4,19,43,.48);opacity:0;transition:opacity .22s ease;width:100%;height:100%}
  .mobile-drawer.is-open .mobile-drawer-backdrop{opacity:1}
  .mobile-drawer-panel{position:absolute;top:0;right:0;width:min(86vw,340px);height:100%;background:#fff;box-shadow:-18px 0 50px rgba(7,35,75,.2);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-drawer.is-open .mobile-drawer-panel{transform:translateX(0)}
  .mobile-drawer-head{height:70px;padding:10px 14px;border-bottom:1px solid #e7eff8;display:flex;align-items:center;justify-content:space-between;flex:none}
  .mobile-drawer-head .logo{min-width:0}.mobile-drawer-head .logo>b{width:38px;height:38px}.mobile-drawer-head .logo strong{font-size:17px}.mobile-drawer-head>button{width:38px;height:38px;border:0;border-radius:10px;background:#eef6ff;color:#176fd8;font-size:27px;line-height:1;cursor:pointer}
  .mobile-drawer-links{display:flex!important;flex-direction:column;align-items:stretch;gap:5px;padding:14px;white-space:normal}
  .mobile-drawer-links a{line-height:normal!important;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%);color:#17375f;font-size:14px;font-weight:800;display:flex;gap:12px;align-items:center;border:1px solid #e4edf9;box-shadow:0 10px 24px rgba(32,74,135,.06)}
  .mobile-drawer-links a span:last-child{flex:1;min-width:0}
  .mobile-drawer-links a:after{display:none!important}.mobile-drawer-links a:hover{background:#edf6ff;color:#0878f6;border-color:#d8e8ff;transform:translateY(-1px)}
  .mobile-drawer-links .drawer-link-icon{width:34px;height:34px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 20px rgba(60,98,168,.18)}
  .mobile-drawer-links .drawer-link-icon svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .mobile-drawer-links .drawer-link-home{color:#2476ff;background:linear-gradient(135deg,#eef5ff,#dfeeff)}
  .mobile-drawer-links .drawer-link-source{color:#8055ff;background:linear-gradient(135deg,#f2ecff,#e8e0ff)}
  .mobile-drawer-links .drawer-link-guide{color:#ff9f2f;background:linear-gradient(135deg,#fff5df,#ffebc3)}
  .mobile-drawer-links .drawer-link-contact{color:#11a7a0;background:linear-gradient(135deg,#e7fffc,#cff8f2)}
  .mobile-drawer-account{margin-top:auto;padding:14px;border-top:1px solid #e7eff8;display:grid;gap:8px}
  .mobile-drawer-account a{min-height:44px;padding:11px 13px;border-radius:10px;background:#f3f8ff;color:#165da9;text-decoration:none;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:space-between}
  .mobile-drawer-account .drawer-signup{background:linear-gradient(100deg,#0879f7,#6550ef);color:#fff}
}

/* v39 mobile category polish: equal cards + cleaner icons */
@media (max-width:720px){
  .cat-zone{background:#fff;border-top:1px solid #e6eef8;border-bottom:1px solid #e6eef8}
  .cat-zone .wrap{width:100%;margin:0;padding:0 10px}
  .categories{display:grid;grid-auto-flow:column;grid-auto-columns:92px;grid-template-columns:none!important;gap:8px;height:auto!important;padding:9px 0!important;overflow-x:auto!important;overflow-y:hidden!important;border:0!important;border-radius:0!important;transform:none!important;box-shadow:none!important;scroll-snap-type:x proximity;scrollbar-width:none}
  .categories::-webkit-scrollbar{display:none}
  .cat{width:92px!important;min-width:92px!important;height:74px!important;padding:7px 5px!important;border:1px solid #e2ebf6!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;background:#fff;color:#16355f;scroll-snap-align:start;box-shadow:0 3px 10px rgba(32,83,140,.06)}
  .cat:last-child{border:1px solid #e2ebf6!important}
  .cat .cat-icon{width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important;font-size:12px!important;box-shadow:0 5px 12px rgba(29,78,216,.16)!important}
  .cat .cat-web,.cat .cat-laravel,.cat .cat-wp,.cat .cat-bot,.cat .cat-mobile{font-size:17px!important}
  .cat b{font-size:10px!important;line-height:1.1;white-space:nowrap}
  .cat small{display:none!important}
  .cat.active{background:linear-gradient(145deg,#138df7,#2857f1)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 15px rgba(30,101,238,.22)!important}
  .cat.active .cat-icon{background:#fff!important;color:#1675f4!important}
}


/* v40 — real contact section */
.contact-section{padding:72px 0;background:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);border-top:1px solid #e2edf8}.contact-heading{text-align:center;max-width:680px;margin:0 auto 30px}.contact-heading>span{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#0878f6}.contact-heading h2{margin:7px 0 8px;color:#0b2147;font-size:32px;letter-spacing:-.7px}.contact-heading p{margin:0;color:#71849e;font-size:13px}.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.contact-card{min-width:0;padding:20px 18px;border:1px solid #dce8f5;border-radius:17px;background:#fff;display:flex;align-items:center;gap:13px;text-decoration:none;box-shadow:0 10px 28px rgba(27,72,122,.07);transition:.2s}.contact-card:hover{transform:translateY(-3px);border-color:#9dcbff;box-shadow:0 16px 34px rgba(27,91,160,.13)}.contact-card>i{width:46px;height:46px;min-width:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#edf7ff,#e9efff);color:#0878f6;font-size:18px;font-style:normal;font-weight:900}.contact-card>div{min-width:0;display:flex;flex-direction:column}.contact-card small{font-size:9px;color:#8294aa;font-weight:800}.contact-card b{margin:3px 0 5px;color:#15365e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-card span{font-size:9px;color:#0878f6;font-weight:800}.contact-disabled{opacity:.72}.contact-disabled:hover{transform:none;border-color:#dce8f5;box-shadow:0 10px 28px rgba(27,72,122,.07)}
@media(max-width:900px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.contact-section{padding:42px 0}.contact-wrap{width:calc(100% - 24px)}.contact-heading{margin-bottom:20px}.contact-heading h2{font-size:25px}.contact-heading p{font-size:11px;line-height:1.6}.contact-grid{grid-template-columns:1fr;gap:9px}.contact-card{padding:14px;border-radius:14px}.contact-card>i{width:42px;height:42px;min-width:42px}.contact-card b{font-size:11px}}

/* v41 — larger, easier-to-read desktop account/profile menu */
@media (min-width:721px){
  .user-trigger{height:50px;gap:11px;padding:6px 13px 6px 7px;border-radius:14px}
  .user-avatar{width:38px;height:38px;border-radius:11px;font-size:15px}
  .user-copy{max-width:155px}
  .user-copy b{font-size:12px}
  .user-copy small{font-size:9px;margin-top:2px}
  .user-chevron{font-size:14px}
  .user-dropdown{width:280px;padding:12px;border-radius:16px;top:calc(100% + 10px)}
  .user-dropdown-head{padding:12px 13px 14px}
  .user-dropdown-head b{font-size:13px}
  .user-dropdown-head small{font-size:10px;margin-top:4px}
  .user-wallet-link{margin-top:8px;padding:13px 12px;border-radius:11px;font-size:11px;min-height:46px}
  .user-logout{margin-top:7px;padding:13px 12px;border-radius:11px;font-size:11px;min-height:43px;display:flex;align-items:center}
}

/* v42: profile dropdown chevron */
.user-chevron{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;transition:transform .2s ease;color:#7187a1}.user-chevron svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.user-menu.open .user-chevron{transform:rotate(180deg)}

/* v43 clickable social icons */
.social .social-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#0b58bb;color:#fff;text-decoration:none;margin:0;padding:0;transition:transform .18s ease,background .18s ease}.social .social-icon:hover{transform:translateY(-2px);background:#084c9f}.social .social-icon svg{width:13px;height:13px;fill:currentColor;display:block}.social .promo-link{margin-left:8px;padding:7px 14px;border-radius:9px;background:linear-gradient(90deg,#6a33ef,#4e42e9);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 5px 15px #4e42e94a}

/* v44 - product image slider */
.product-slider{height:430px;border-radius:18px;overflow:hidden;position:relative;background:#eaf4ff;border:1px solid #dce9f7;touch-action:pan-y;user-select:none}
.product-slider-track{position:absolute;inset:0}
.product-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .38s ease;pointer-events:none}
.product-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.product-slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.product-slider-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 22px rgba(17,55,95,.18);color:#0a5fc7;font-size:31px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:.88;transition:.2s}
.product-slider-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.06)}
.product-slider-arrow.prev{left:14px}.product-slider-arrow.next{right:14px}
.product-slider-dots{position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:7px;padding:6px 9px;border-radius:999px;background:rgba(8,31,62,.25);backdrop-filter:blur(5px)}
.product-slider-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.62);cursor:pointer;transition:.2s}
.product-slider-dots button.is-active{width:22px;border-radius:999px;background:#fff}
@media(max-width:900px){.product-slider{height:360px}}
@media(max-width:720px){.product-slider{height:230px;border-radius:12px}.product-slider-arrow{width:34px;height:34px;font-size:25px}.product-slider-arrow.prev{left:8px}.product-slider-arrow.next{right:8px}.product-slider-dots{bottom:9px}}

/* v45 product demo action */
.product-action-row{display:flex;gap:10px;align-items:stretch}.product-action-row .product-buy-btn{flex:1}.product-demo-btn{min-width:145px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;padding:0 20px;border:1px solid #bcd9fb;background:#f2f8ff;color:#0878f6;text-decoration:none;font-size:13px;font-weight:900;transition:.2s}.product-demo-btn:hover{transform:translateY(-2px);background:#e8f4ff;box-shadow:0 10px 24px rgba(20,104,238,.12)}@media(max-width:520px){.product-action-row{flex-direction:column}.product-demo-btn{width:100%;min-width:0}}


/* V3 — compact hero after removing signature */
.signature{display:none!important}
@media (min-width:1101px){
  .hero-grid{height:520px}
  .hero-copy{padding-top:48px}
}
@media (min-width:1600px){
  .hero-grid{height:550px}
  .hero-copy{padding-top:52px}
}


/* v46 - full screen product image lightbox */
img[data-image-lightbox]{cursor:zoom-in}
.image-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(2,10,23,.94);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;touch-action:none}
.image-lightbox.is-open{opacity:1;visibility:visible}
.image-lightbox-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.image-lightbox-image{display:block;max-width:min(96vw,1800px);max-height:92vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.55);transform:scale(.97);transition:transform .22s ease;user-select:none;-webkit-user-drag:none}
.image-lightbox.is-open .image-lightbox-image{transform:scale(1)}
.image-lightbox-close,.image-lightbox-nav{position:absolute;z-index:2;border:0;color:#fff;background:rgba(255,255,255,.13);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);cursor:pointer;display:grid;place-items:center;transition:background .18s ease,transform .18s ease}
.image-lightbox-close{right:12px;top:12px;width:46px;height:46px;border-radius:50%;font-size:30px;line-height:1}
.image-lightbox-close:hover,.image-lightbox-nav:hover{background:rgba(255,255,255,.24)}
.image-lightbox-nav{top:50%;transform:translateY(-50%);width:50px;height:58px;border-radius:14px;font-size:38px;line-height:1}
.image-lightbox-nav:hover{transform:translateY(-50%) scale(1.04)}
.image-lightbox-prev{left:10px}.image-lightbox-next{right:10px}
.image-lightbox-nav[hidden]{display:none}
.image-lightbox-counter{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:800;letter-spacing:.2px}
body.image-lightbox-lock{overflow:hidden}
@media(max-width:720px){.image-lightbox{padding:10px}.image-lightbox-image{max-width:98vw;max-height:86vh;border-radius:7px}.image-lightbox-close{right:8px;top:8px;width:42px;height:42px;font-size:27px}.image-lightbox-nav{width:42px;height:52px;font-size:32px}.image-lightbox-prev{left:4px}.image-lightbox-next{right:4px}.image-lightbox-counter{bottom:6px}}

/* =========================================================
   S2NDCODE.VN v50 — Premium marketplace refresh
   ========================================================= */
:root{
  --s2-bg:#f6f8fc;--s2-surface:#fff;--s2-ink:#0b1324;--s2-muted:#64748b;
  --s2-line:#e5eaf2;--s2-primary:#6d5dfc;--s2-primary2:#1597f6;--s2-navy:#07111f;
  --s2-success:#0b9d6d;--s2-danger:#dc4058;--s2-shadow:0 18px 55px rgba(16,34,63,.10);
}
html{scroll-padding-top:92px}body{font-size:15px;color:var(--s2-ink);background:#fff}.wrap{width:min(1240px,calc(100% - 40px))}
.topbar{height:38px;background:#07111f;border-bottom:1px solid rgba(255,255,255,.08)}.topbar-in{font-size:11px}.topbar .perks{gap:0}.topbar .perks span{padding:0 20px;color:#c9d4e6;border-color:rgba(255,255,255,.1)}.topbar .social{color:#aebbd0;font-weight:800;letter-spacing:.3px}
header{height:78px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.88);box-shadow:0 7px 24px rgba(16,36,70,.05)}
.nav{gap:28px}.logo{min-width:214px}.logo>b{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#765fff,#149ef6);box-shadow:0 12px 30px rgba(93,89,244,.28)}.logo strong{font-size:21px;letter-spacing:-.9px}.logo strong span{color:#685df7}.logo small{font-size:8px;letter-spacing:1.8px;color:#8a98aa}.nav>nav{gap:22px}.nav>nav a{font-size:13px;font-weight:800;line-height:78px;color:#25334a}.nav>nav a.on{color:#6458ed}.nav>nav a.on:after{background:linear-gradient(90deg,#765fff,#159af6)}
.actions{gap:10px}.search{width:300px;height:44px;border-radius:14px;border-color:#dbe3ef;background:#f8fafc;transition:.2s}.search:focus-within{background:#fff;border-color:#9589ff;box-shadow:0 0 0 4px rgba(109,93,252,.10)}.search input{font-size:12px}.search button{width:44px;background:linear-gradient(145deg,#725fff,#168ff0)}.login,.signup{height:44px;border-radius:13px;font-size:11px;letter-spacing:.2px}.login{border-color:#d7dfeb}.signup{background:linear-gradient(115deg,#705df8,#198ff2);box-shadow:0 10px 25px rgba(97,91,243,.24)}
.site-announcement{background:#fff7e5;border-bottom:1px solid #f3dfad}.site-announcement .wrap{min-height:42px;display:flex;align-items:center;gap:9px;color:#7a5812;font-size:12px}.site-announcement p{margin:0;line-height:1.5}.site-announcement b{white-space:nowrap}
.hero{background:radial-gradient(circle at 85% 10%,rgba(103,94,246,.18),transparent 28%),radial-gradient(circle at 30% 0%,rgba(19,154,246,.13),transparent 24%),linear-gradient(180deg,#f9fbff 0%,#f4f7fb 100%);border-bottom:1px solid #e8edf5}.hero:before{background:linear-gradient(90deg,rgba(255,255,255,.78),transparent 55%)}
.hero-grid{height:560px;grid-template-columns:48% 52%;align-items:center}.hero-copy{padding-top:0}.badge{padding:9px 14px;background:#fff;border-color:#dfe6f2;color:#6357ed;font-size:10px;letter-spacing:.7px;box-shadow:0 8px 24px rgba(19,43,78,.06)}.hero h1{font-size:52px;line-height:1.02;letter-spacing:-2.7px;max-width:650px;margin:20px 0 18px;color:#0a1426}.hero h1 em{background:linear-gradient(90deg,#6656f3,#118fe9);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{font-size:16px;line-height:1.75;max-width:650px;color:#5f6f85;margin-bottom:24px}.mini-perks{gap:11px;display:grid;grid-template-columns:repeat(3,1fr);max-width:625px}.mini-perks span{padding:12px 13px;border:1px solid #e1e8f2;border-radius:14px;background:rgba(255,255,255,.8);box-shadow:0 7px 22px rgba(20,42,70,.04)}.mini-perks i{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#ece9ff;color:#6458ed;font-size:9px;font-weight:900}.mini-perks b{font-size:11px;color:#1d2d45}.mini-perks small{font-size:9px;color:#7a8aa0}.hero-btns{margin-top:22px}.primary,.secondary{height:52px;border-radius:14px;font-size:12px;letter-spacing:.25px}.primary{background:linear-gradient(115deg,#705cf8,#168ff2);box-shadow:0 14px 34px rgba(92,88,244,.28)}.primary span{margin-left:9px;font-size:17px}.secondary{border-color:#dce4ef;background:rgba(255,255,255,.85)}.hero-trust{display:flex;gap:17px;flex-wrap:wrap;margin-top:18px;color:#62748c;font-size:10px;font-weight:700}.hero-trust span{display:flex;align-items:center;gap:5px}
.hero-art{position:relative;right:auto;top:auto;width:100%;height:auto;overflow:visible;justify-content:flex-end;padding-left:34px}.hero-art-frame{width:100%;max-width:650px;border-radius:26px;padding:12px;background:linear-gradient(145deg,#0a1423,#111e31);box-shadow:0 35px 80px rgba(12,31,62,.23);border:1px solid rgba(255,255,255,.1);transform:perspective(1100px) rotateY(-4deg) rotateX(1deg)}.hero-art-label{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#b7c6dc;font-size:10px}.hero-art-label span{color:#70dfb6;font-weight:900;letter-spacing:.7px}.hero-art-label b{font-weight:700}.hero-art img{position:static;width:100%;height:auto;object-fit:cover;object-position:center;mix-blend-mode:normal;filter:none;-webkit-mask-image:none;mask-image:none;border-radius:17px;display:block;aspect-ratio:1.7/1}
.cat-zone{margin-top:-20px;background:transparent}.categories{height:auto;min-height:84px;border-radius:20px;padding:9px;display:flex;gap:7px;transform:none;overflow-x:auto;background:rgba(255,255,255,.96);box-shadow:0 20px 55px rgba(20,45,80,.10);border:1px solid #e4e9f1}.cat{min-width:126px;flex:1;border:0!important;border-radius:14px!important;padding:10px 12px!important;background:transparent;cursor:pointer;font-family:inherit;transition:.2s;justify-content:flex-start}.cat:hover{background:#f4f6fb}.cat i,.cat .cat-icon{width:36px;height:36px;min-width:36px;border-radius:11px;background:#eef1ff;color:#6659ef;font-size:11px}.cat b{font-size:11px}.cat small{font-size:8.5px}.cat.active{background:linear-gradient(135deg,#6e5df7,#2588ed)!important;box-shadow:0 10px 26px rgba(83,82,238,.22)}.cat.active .cat-icon{background:rgba(255,255,255,.17)!important;color:#fff!important}
.section{padding:72px 0}.section-head{margin-bottom:28px}.section-head span{color:#6759ef;font-size:10px;letter-spacing:1.2px}.section-head h2{font-size:34px;letter-spacing:-1.3px;margin:8px 0 7px;color:#0b1426}.section-head p{font-size:13px;line-height:1.65;color:#718096;max-width:700px}.section-head.center{text-align:center;justify-content:center}.section-head.center>div{max-width:760px}.result-count{padding:9px 13px;border-radius:12px;background:#f2f4fa;color:#6a778a;font-size:11px;font-weight:800}.result-count b{color:#6255ea;font-size:16px;margin-right:3px}
.product-grid{grid-template-columns:repeat(4,1fr);gap:20px}.product{border-radius:18px;border-color:#e1e7f0;box-shadow:0 12px 38px rgba(22,45,78,.07);display:flex;flex-direction:column;min-width:0}.product:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(26,55,94,.13);border-color:#d5d5fa}.product[hidden]{display:none}.thumb{height:auto;aspect-ratio:1.82/1;display:block;background:#edf2f8;overflow:hidden}.thumb img{transition:transform .35s ease}.product:hover .thumb img{transform:scale(1.035)}.thumb .flag{top:12px;left:12px;padding:6px 9px;border-radius:9px;background:rgba(11,20,38,.82);backdrop-filter:blur(8px);font-size:9px}.product-info{padding:17px;display:flex;flex-direction:column;flex:1}.product-cat-label{font-size:9px;font-weight:900;color:#6759ef;letter-spacing:.6px;text-transform:uppercase}.product h3{font-size:16px;line-height:1.4;min-height:45px;margin:7px 0 7px}.product h3 a{text-decoration:none;color:#101a2c}.product-short{font-size:11px;line-height:1.55;color:#75859b;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}.price{margin-top:auto}.price strong{font-size:19px;color:#182b51}.price del{font-size:11px}.meta{margin:11px 0 13px;font-size:10px}.detail{height:40px;border-radius:11px;background:#0b1426;font-size:11px;gap:6px;transition:.2s}.detail:hover{background:linear-gradient(110deg,#6d5df7,#168ff0)}.empty-products{padding:32px;text-align:center;border:1px dashed #ccd5e3;border-radius:18px;color:#74839a;background:#f8fafc}
.feature-zone{background:#08111f;color:#fff;position:relative;overflow:hidden}.feature-zone:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 25% 20%,rgba(104,86,244,.22),transparent 25%),radial-gradient(circle at 85% 80%,rgba(19,151,246,.17),transparent 25%);pointer-events:none}.feature-zone .section{position:relative}.feature-zone .section-head h2{color:#fff}.feature-zone .section-head p{color:#a7b5c9}.feature-zone .section-head span{color:#8f7dff}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-grid article{padding:26px 22px;border:1px solid rgba(255,255,255,.10);border-radius:20px;background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}.feature-grid i{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(121,97,255,.25),rgba(26,145,245,.18));font-style:normal;font-size:20px}.feature-grid h3{font-size:16px;margin:19px 0 8px}.feature-grid p{font-size:11px;line-height:1.7;color:#aebcd0;margin:0}
.guide-section{padding-top:82px}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.guide-grid article{position:relative;padding:25px;border:1px solid #e1e7f0;border-radius:19px;background:#fff;box-shadow:0 12px 35px rgba(25,47,77,.05)}.guide-grid article>b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#efedff;color:#6558ee;font-size:12px}.guide-grid h3{font-size:16px;margin:18px 0 8px}.guide-grid p{margin:0;color:#718197;font-size:11px;line-height:1.7}
.contact-section{padding:76px 0;background:#f6f8fc;border-top:1px solid #e7ebf2}.contact-heading h2{font-size:34px}.contact-heading p{font-size:13px}.contact-grid{gap:16px}.contact-card{border-radius:18px;padding:19px;border-color:#e1e7f0;box-shadow:0 12px 36px rgba(25,49,82,.06)}.contact-card>i{width:48px;height:48px;border-radius:14px;background:#efedff;color:#6658ef}.contact-card b{font-size:12px}.contact-card small,.contact-card span{font-size:9px}
footer{background:#070f1b;color:#cad4e4!important}.footer-grid{padding-top:54px;padding-bottom:42px}.footer-grid>div>b{color:#fff}.footer-grid a{color:#a9b7ca}.footer-grid .logo strong{color:#fff}.footer-grid .logo strong span{color:#8f7dff}.copyright{border-top-color:#1a2739;color:#8090a7}.about p{color:#9baabd;line-height:1.7}
.user-trigger{border-radius:14px;border-color:#dfe5ee;background:#fff}.user-avatar{background:linear-gradient(145deg,#725fff,#178ff1)}.user-dropdown{border-radius:17px;box-shadow:0 22px 55px rgba(14,30,55,.18);border-color:#e2e7ef}.user-wallet-link{background:#f5f4ff;color:#6255e9!important}.user-wallet-link b{color:#6255e9}
.product-detail-page{background:#f6f8fc}.product-detail-card,.product-description-card,.product-side-card{border-color:#e0e7f0;box-shadow:0 18px 55px rgba(18,42,76,.07)}.product-detail-card{border-radius:24px}.product-summary h1{font-size:35px;letter-spacing:-1.2px}.product-price-box{background:#f7f8fc;border-color:#e3e8f1}.product-price-box strong{color:#6458ed}.product-buy-btn{background:linear-gradient(115deg,#6f5cf8,#168ff1);box-shadow:0 13px 30px rgba(93,85,238,.24)}.product-buy-btn.owned{background:linear-gradient(115deg,#0b9c70,#0b7e9f)}.secondary-buy{margin-top:10px;background:#101a2c;box-shadow:none}.product-demo-btn{background:#f6f5ff;border-color:#dcd8ff;color:#6255e9}.product-image-badge{background:rgba(10,20,38,.80)}
.wallet-page,.checkout-page{background:#f4f7fb}.wallet-wrap{width:min(1240px,calc(100% - 36px));margin:38px auto 74px}.wallet-hero h1{font-size:36px;letter-spacing:-1px}.balance-card{border-radius:22px;background:linear-gradient(135deg,#6857f5,#168ff0);box-shadow:0 20px 46px rgba(83,80,236,.24)}.wallet-panel{border-radius:20px;border-color:#e1e7ef;box-shadow:0 14px 40px rgba(20,44,76,.06)}.wallet-form input,.wallet-form textarea,.wallet-form select{display:block;width:100%;margin-top:7px;border:1px solid #d8e1ed;border-radius:12px;padding:12px 13px;background:#fff;outline:none;font:inherit}.wallet-form input:focus,.wallet-form textarea:focus,.wallet-form select:focus{border-color:#8c7cff;box-shadow:0 0 0 4px rgba(109,93,252,.08)}.wallet-form button{background:linear-gradient(115deg,#6f5cf8,#188ff1);border-radius:12px}.checkout-card{border-radius:24px;border-color:#e0e6ef;box-shadow:0 24px 70px rgba(20,41,70,.10)}
.orders-back{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 18px;border-radius:13px;background:#101a2c;color:#fff;text-decoration:none;font-size:11px;font-weight:900}.orders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.owned-card{overflow:hidden;border:1px solid #e0e6ef;border-radius:20px;background:#fff;box-shadow:0 14px 42px rgba(19,45,79,.07)}.owned-card>img{width:100%;height:175px;object-fit:cover;display:block}.owned-body{padding:18px}.owned-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.owned-top>span{font-size:10px;font-weight:900;color:#6c5cf2}.owned-body h2{font-size:17px;line-height:1.4;margin:0 0 7px}.owned-body p{font-size:11px;line-height:1.6;color:#718197;min-height:35px}.owned-meta{display:flex;justify-content:space-between;align-items:center;margin:15px 0}.owned-meta span{font-size:18px;font-weight:900}.owned-meta small{color:#8491a3;font-size:9px}.orders-empty{text-align:center;padding:50px}.orders-empty .empty-icon{font-size:42px}.orders-empty h2{font-size:23px}.orders-empty p{font-size:12px;color:#738399;margin-bottom:20px}.orders-empty .product-buy-btn{max-width:260px;margin:auto}
.auth-dialog{border-radius:24px;border-color:#e0e5ef;box-shadow:0 35px 90px rgba(5,17,35,.35)}.auth-brandbar{background:#0a1423}.auth-submit{background:linear-gradient(115deg,#6d5cf7,#168ff2)}.auth-field:focus-within{border-color:#8f81ff;box-shadow:0 0 0 4px rgba(109,93,252,.08)}
.mobile-nav{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top-color:#e3e8f0;box-shadow:0 -12px 35px rgba(17,39,70,.08)}
@media(max-width:1100px){.search{display:none}.nav>nav{gap:15px}.hero-grid{grid-template-columns:52% 48%}.hero h1{font-size:44px}.product-grid{grid-template-columns:repeat(3,1fr)}.feature-grid,.guide-grid{grid-template-columns:repeat(2,1fr)}.orders-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.nav>nav{display:none}.menu{display:block!important;margin-left:auto;border:0;background:#f1f4f9;width:42px;height:42px;border-radius:12px;color:#24334a;font-size:20px}.hero-grid{height:auto;min-height:700px;grid-template-columns:1fr;padding-top:58px;padding-bottom:50px}.hero-copy{max-width:720px}.hero-art{padding:30px 0 0}.hero-art-frame{max-width:720px;transform:none}.product-grid{grid-template-columns:repeat(2,1fr)}.contact-grid{grid-template-columns:repeat(2,1fr)}.orders-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){body{font-size:14px;padding-bottom:64px}.wrap{width:calc(100% - 24px)}.topbar{display:none}header{height:66px}.nav{gap:10px}.logo{min-width:0}.logo>b{width:39px;height:39px;border-radius:12px;font-size:17px}.logo>span{margin-left:8px}.logo strong{font-size:16px;letter-spacing:-.5px}.logo small{font-size:6.5px;letter-spacing:1.15px}.actions>.login,.actions>.signup,.actions>.user-menu{display:none}.hero-grid{padding-top:42px;min-height:0}.hero h1{font-size:38px;letter-spacing:-1.7px;line-height:1.06;margin-top:17px}.hero-copy>p{font-size:14px;line-height:1.7}.badge{font-size:8.7px;padding:8px 11px}.mini-perks{grid-template-columns:1fr;gap:8px}.mini-perks span{padding:10px 12px}.hero-btns{flex-direction:column}.primary,.secondary{width:100%;height:48px}.hero-trust{gap:8px 14px}.hero-art{padding-top:26px}.hero-art-frame{padding:8px;border-radius:19px}.hero-art-label{height:39px;font-size:8px}.hero-art img{border-radius:13px}.cat-zone{margin-top:-1px;background:#fff;border-bottom:1px solid #e5eaf2}.categories{width:100%;padding:10px 12px;border:0;border-radius:0;box-shadow:none;background:#fff}.cat{width:96px!important;min-width:96px!important;height:75px!important;justify-content:center!important;padding:7px 6px!important}.cat .cat-icon{width:34px!important;height:34px!important}.cat b{font-size:10px!important}.section{padding:48px 0}.section-head{align-items:flex-start;gap:12px}.section-head h2{font-size:27px;letter-spacing:-.8px}.section-head p{font-size:11px}.result-count{display:none}.product-grid{grid-template-columns:1fr 1fr;gap:11px}.product{border-radius:14px}.product-info{padding:12px}.product h3{font-size:13px;min-height:38px;margin-top:5px}.product-short{display:none}.product-cat-label{font-size:8px}.price strong{font-size:15px}.price del{font-size:9px}.meta{font-size:8px;gap:5px}.detail{height:36px;font-size:9.5px}.feature-grid,.guide-grid{grid-template-columns:1fr;gap:10px}.feature-grid article,.guide-grid article{padding:20px}.feature-grid h3,.guide-grid h3{font-size:15px}.contact-section{padding:48px 0}.contact-heading h2{font-size:27px}.contact-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:28px;padding-top:42px}.footer-grid .about{grid-column:1/-1}.copyright{flex-direction:column;align-items:flex-start;gap:6px}.product-summary h1{font-size:27px}.orders-grid{grid-template-columns:1fr}.wallet-wrap{width:calc(100% - 24px);margin-top:22px}.wallet-hero h1{font-size:29px}.orders-back{width:100%}.owned-card>img{height:180px}.auth-dialog{border-radius:18px}.auth-brandbar{padding:18px}.mobile-drawer-panel{width:min(88vw,360px)}.mobile-drawer-head .logo strong{font-size:15px}.mobile-drawer-head .logo small{font-size:6px}}
@media(max-width:390px){.product-grid{grid-template-columns:1fr}.thumb{aspect-ratio:1.75/1}.product h3{min-height:0}.footer-grid{grid-template-columns:1fr}.footer-grid .about{grid-column:auto}}

/* =========================================================
   S2NDCODE.VN v51 — Precision desktop/mobile alignment pass
   Fixes legacy full-screen rules from older versions and keeps
   every public section on one centered visual grid.
   ========================================================= */
:root{
  --s2-container:1440px;
  --s2-gutter:32px;
  --s2-radius-xl:28px;
  --s2-radius-lg:20px;
}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* one shared page grid */
.wrap,
.topbar .wrap,
.nav.wrap,
.hero-grid,
.cat-zone .wrap,
.products.wrap,
.feature-zone .wrap,
.guide-section.wrap,
.contact-section .wrap,
footer .wrap{
  width:min(var(--s2-container),calc(100% - (var(--s2-gutter) * 2)))!important;
  max-width:var(--s2-container)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* top strip + navigation */
.topbar{height:36px}
.topbar-in{justify-content:space-between}
.topbar .perks span{padding:0 18px}
header{height:82px}
.nav{gap:34px}
.logo{min-width:220px}
.logo>b{width:48px;height:48px;border-radius:15px}
.logo strong{font-size:22px}
.nav>nav{gap:26px}
.nav>nav a{line-height:82px;font-size:13px}
.actions{gap:11px}
.search{width:clamp(255px,20vw,360px);height:46px}
.login,.signup{height:46px;padding:0 20px}

/* hero: balanced columns, no dead strip on the right */
.hero{isolation:isolate;background:
  radial-gradient(circle at 78% 12%,rgba(111,91,246,.16),transparent 27%),
  radial-gradient(circle at 22% 5%,rgba(18,151,246,.11),transparent 24%),
  linear-gradient(180deg,#fbfcff 0%,#f4f7fb 100%)}
.hero:before{background:
  linear-gradient(90deg,rgba(255,255,255,.62),rgba(255,255,255,.10) 54%,transparent 76%)}
.hero-grid{
  height:610px!important;
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  gap:64px!important;
  align-items:center!important;
  position:relative!important;
}
.hero-copy{
  width:100%!important;
  max-width:640px!important;
  padding:0!important;
  align-self:center!important;
}
.badge{box-shadow:none;border-color:#dfe5ef;background:rgba(255,255,255,.86)}
.hero h1{
  max-width:620px;
  margin:22px 0 18px;
  font-size:clamp(48px,3.2vw,61px);
  line-height:1.01;
  letter-spacing:-3px;
  text-wrap:balance;
}
.hero-copy>p{max-width:610px;font-size:15.5px;line-height:1.72}
.mini-perks{max-width:610px;gap:10px}
.mini-perks span{min-width:0;padding:12px}
.hero-btns{margin-top:24px}
.primary,.secondary{min-width:178px}
.hero-trust{margin-top:19px}
.hero-art{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  padding:0!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.hero-art-frame{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:12px!important;
  border-radius:28px!important;
  transform:none!important;
  background:linear-gradient(145deg,#091321,#101f34)!important;
  box-shadow:0 34px 80px rgba(15,31,58,.20)!important;
}
.hero-art-label{height:48px;padding:0 12px}
.hero-art img{
  position:static!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:18px!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* category rail shares the exact hero/product edges */
.cat-zone{margin-top:-42px!important;padding-bottom:16px;background:transparent!important;border:0!important}
.cat-zone .wrap{overflow:visible!important}
.categories{
  width:100%!important;
  height:auto!important;
  min-height:92px!important;
  margin:0!important;
  padding:10px!important;
  transform:none!important;
  border:1px solid #e2e7ef!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 20px 55px rgba(20,45,80,.10)!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;
  gap:8px!important;
  overflow:visible!important;
}
.cat{
  width:auto!important;
  min-width:0!important;
  min-height:70px!important;
  padding:10px 12px!important;
  gap:10px!important;
  border:0!important;
  border-radius:15px!important;
  justify-content:flex-start!important;
  background:transparent;
}
.cat .cat-icon{width:38px!important;height:38px!important;min-width:38px!important}
.cat b{font-size:11.5px!important}
.cat small{font-size:8.5px!important}

/* sections and cards */
.section{padding:78px 0}
.products.wrap{padding-left:0!important;padding-right:0!important}
.products .section-head{margin-bottom:28px}
.section-head h2{font-size:36px;line-height:1.15;text-wrap:balance}
.section-head p{max-width:760px}
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px!important}
.product{border-radius:20px!important;box-shadow:0 12px 38px rgba(22,45,78,.065)}
.thumb{aspect-ratio:16/9!important;height:auto!important;border-radius:0!important}
.product-info{padding:18px}
.product h3{font-size:16px;min-height:45px}
.detail{height:42px;border-radius:12px}
.feature-grid,.guide-grid{gap:20px}
.feature-grid article,.guide-grid article{border-radius:22px}
.contact-grid{gap:18px}
.contact-card{min-height:92px}

/* larger monitors */
@media(min-width:1680px){
  :root{--s2-container:1520px;--s2-gutter:44px}
  .hero-grid{height:630px!important;gap:76px!important}
  .hero h1{font-size:62px}
  .hero-copy>p{font-size:16px}
  .product-grid{gap:26px!important}
}

/* compact laptop: retain the same grid without crowding the header */
@media(min-width:1101px) and (max-width:1280px){
  :root{--s2-gutter:24px}
  .nav{gap:20px}
  .nav>nav{gap:16px}
  .search{display:none!important}
  .hero-grid{height:560px!important;gap:38px!important;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important}
  .hero h1{font-size:47px;letter-spacing:-2.4px}
  .mini-perks span{padding:10px}
  .cat b{font-size:10.5px!important}
}

/* tablet */
@media(max-width:1100px){
  .wrap,
  .topbar .wrap,
  .nav.wrap,
  .hero-grid,
  .cat-zone .wrap,
  .products.wrap,
  .feature-zone .wrap,
  .guide-section.wrap,
  .contact-section .wrap,
  footer .wrap{
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .hero-grid{gap:34px!important}
  .hero-art{padding:0!important}
  .hero-art-frame{width:100%!important;max-width:none!important}
  .categories{overflow-x:auto!important;display:flex!important;scrollbar-width:none}
  .categories::-webkit-scrollbar{display:none}
  .cat{min-width:126px!important;flex:0 0 126px!important}
}

/* mobile: equal gutters + clean stacked hero */
@media(max-width:720px){
  :root{--s2-gutter:12px}
  .wrap,
  .nav.wrap,
  .hero-grid,
  .products.wrap,
  .feature-zone .wrap,
  .guide-section.wrap,
  .contact-section .wrap,
  footer .wrap{
    width:calc(100% - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  header{height:68px}
  .hero{padding:0}
  .hero-grid{
    width:calc(100% - 24px)!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
    padding:38px 0 58px!important;
  }
  .hero-copy{max-width:none!important}
  .hero h1{max-width:none;font-size:38px;letter-spacing:-2px;line-height:1.04;text-wrap:balance}
  .hero-copy>p{font-size:14px;line-height:1.68}
  .mini-perks{grid-template-columns:1fr!important;max-width:none}
  .hero-art{padding:0!important}
  .hero-art-frame{padding:8px!important;border-radius:20px!important}
  .hero-art-label{height:38px;font-size:8px}
  .hero-art img{border-radius:13px!important}
  .cat-zone{margin-top:-32px!important;padding-bottom:6px;background:transparent!important}
  .cat-zone .wrap{width:100%!important;margin:0!important;padding:0 12px!important}
  .categories{min-height:0!important;padding:8px!important;border-radius:18px!important;box-shadow:0 12px 35px rgba(20,45,80,.10)!important}
  .cat{min-width:96px!important;flex:0 0 96px!important;min-height:72px!important;flex-direction:column!important;justify-content:center!important;padding:7px!important;gap:5px!important}
  .cat .cat-icon{width:34px!important;height:34px!important;min-width:34px!important}
  .cat b{font-size:10px!important}
  .cat small{display:none!important}
  .section{padding:52px 0}
  .section-head h2{font-size:27px;line-height:1.16}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
  .product-info{padding:12px}
  .product h3{font-size:13px;min-height:38px}
}

@media(max-width:420px){
  .hero h1{font-size:34px}
  .product-grid{grid-template-columns:1fr!important}
  .product h3{min-height:0}
}

/* v51.1 mobile finishing pass */
@media(max-width:720px){
  .mini-perks{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .mini-perks span{min-height:86px;padding:9px 7px!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
  .mini-perks i{width:28px;height:28px;min-width:28px}
  .mini-perks b{font-size:9.5px;line-height:1.2}
  .mini-perks small{font-size:7.5px;line-height:1.2;margin-top:2px}
  .hero-btns{gap:10px!important}
  .hero-btns a{flex:0 0 48px!important;height:48px!important;min-height:48px!important;width:100%!important}
  .cat-zone .wrap.categories{width:calc(100% - 24px)!important;margin-left:auto!important;margin-right:auto!important;padding:8px!important}
}

/* =========================================================
   S2NDCODE.VN V52 - AURORA / NEON PREMIUM UI
   Colorful visual layer. Keeps all V51 layout + responsive logic.
   ========================================================= */
:root{
  --v52-navy:#071329;
  --v52-blue:#1f7bff;
  --v52-cyan:#13d8ff;
  --v52-purple:#7857ff;
  --v52-pink:#ff4fa3;
  --v52-orange:#ff9d32;
  --v52-green:#28d7a1;
  --v52-line:rgba(105,112,255,.24);
  --v52-soft-shadow:0 20px 60px rgba(53,67,155,.13);
}

body{
  color:#0a1834;
  background:
    radial-gradient(circle at 8% 18%,rgba(40,194,255,.09),transparent 21rem),
    radial-gradient(circle at 93% 33%,rgba(126,82,255,.09),transparent 24rem),
    linear-gradient(180deg,#fbfdff 0%,#f8f7ff 46%,#fbfdff 100%);
}

/* top + header */
.topbar{
  position:relative;
  overflow:hidden;
  background:linear-gradient(105deg,#071329 0%,#143a87 35%,#6746e8 68%,#0b9fde 100%)!important;
  box-shadow:0 5px 24px rgba(21,66,155,.18);
}
.topbar:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.10) 45%,transparent 58%);
  transform:translateX(-60%);
  pointer-events:none;
}
header{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(103,91,238,.20)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 35px rgba(40,62,123,.08)!important;
}
header:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent 2%,#27d6ff 25%,#7256ff 52%,#ff55a2 74%,transparent 98%);
  opacity:.7;
}
.logo>b{
  border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(145deg,#2458ff 0%,#6959ff 46%,#10c7ed 100%)!important;
  box-shadow:0 10px 28px rgba(78,80,245,.33),0 0 0 5px rgba(98,86,255,.07)!important;
}
.logo strong span{
  background:linear-gradient(90deg,#4266ff,#7257ff 52%,#0aaedc);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.nav>nav a{transition:color .2s ease,transform .2s ease}
.nav>nav a:hover{color:#6656f3;transform:translateY(-1px)}
.nav>nav a.on{color:#6355ef!important}
.nav>nav a.on:after{background:linear-gradient(90deg,#1e9dff,#7558ff,#ff5fa9)!important;height:3px!important}
.search{
  border:1px solid rgba(96,96,232,.22)!important;
  background:linear-gradient(180deg,#fff,#faf9ff)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 7px 20px rgba(62,71,151,.07);
}
.search:focus-within{border-color:#6b5cf3!important;box-shadow:0 0 0 4px rgba(105,87,244,.10),0 10px 28px rgba(67,75,166,.11)}
.search button{background:linear-gradient(145deg,#1d91ff,#6d58f5)!important}
.login{
  border:1px solid rgba(105,88,239,.26)!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 8px 22px rgba(60,69,144,.06);
}
.login:hover{border-color:#7461f4!important;color:#5f4ee4!important;box-shadow:0 9px 26px rgba(94,77,228,.14)}
.signup{
  border:1px solid rgba(255,255,255,.45);
  background:linear-gradient(115deg,#246fff 0%,#7058f4 56%,#c850d6 100%)!important;
  box-shadow:0 11px 28px rgba(89,71,228,.28)!important;
}

/* hero becomes one premium bordered visual module */
.hero{
  padding:30px 0 66px;
  background:
    radial-gradient(circle at 10% 18%,rgba(32,189,255,.22),transparent 25%),
    radial-gradient(circle at 48% 0%,rgba(124,86,255,.16),transparent 30%),
    radial-gradient(circle at 94% 54%,rgba(255,78,165,.15),transparent 29%),
    linear-gradient(135deg,#f8fcff 0%,#f8f5ff 52%,#f3fbff 100%)!important;
}
.hero:before{
  background-image:
    linear-gradient(rgba(105,89,240,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(105,89,240,.035) 1px,transparent 1px)!important;
  background-size:34px 34px!important;
  opacity:1!important;
}
.hero-grid{
  padding:42px 46px!important;
  border:1px solid rgba(105,94,236,.22)!important;
  border-radius:32px!important;
  background:linear-gradient(125deg,rgba(255,255,255,.93),rgba(255,255,255,.68))!important;
  box-shadow:
    0 32px 90px rgba(68,72,160,.14),
    0 0 0 7px rgba(255,255,255,.44),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  overflow:hidden;
}
.hero-grid:after{
  content:"";
  position:absolute;
  width:420px;height:420px;border-radius:50%;
  right:-190px;top:-230px;
  background:radial-gradient(circle,rgba(118,86,255,.25),rgba(30,189,255,.10) 45%,transparent 70%);
  pointer-events:none;
}
.badge{
  color:#5b4ce2!important;
  border:1px solid rgba(112,90,242,.30)!important;
  background:linear-gradient(90deg,rgba(235,248,255,.95),rgba(245,238,255,.98))!important;
  box-shadow:0 8px 25px rgba(85,77,195,.09)!important;
}
.hero h1{color:#0a1734!important}
.hero h1 em{
  background:linear-gradient(90deg,#1c8cff 4%,#6d54f5 48%,#dd47ba 83%,#ff7d4d);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.hero-copy>p{color:#526582!important}
.mini-perks span{
  border:1px solid rgba(103,94,224,.15);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(247,247,255,.86));
  box-shadow:0 10px 25px rgba(40,60,119,.055);
  transition:.2s ease;
}
.mini-perks span:nth-child(1){border-color:rgba(38,157,255,.25)}
.mini-perks span:nth-child(2){border-color:rgba(123,89,245,.25)}
.mini-perks span:nth-child(3){border-color:rgba(38,205,164,.27)}
.mini-perks span:hover{transform:translateY(-2px);box-shadow:0 13px 31px rgba(69,64,166,.12)}
.mini-perks i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#e9f8ff,#f1ebff);box-shadow:inset 0 0 0 1px rgba(94,101,229,.10)}
.primary{
  border:1px solid rgba(255,255,255,.48);
  background:linear-gradient(110deg,#168dff 0%,#6757f4 50%,#cb4ecf 100%)!important;
  box-shadow:0 16px 34px rgba(82,72,224,.28)!important;
  transition:.22s ease;
}
.primary:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(82,72,224,.34)!important}
.secondary{
  color:#2b3157!important;
  border:1px solid rgba(108,91,237,.25)!important;
  background:linear-gradient(180deg,#fff,#faf8ff)!important;
  box-shadow:0 10px 25px rgba(62,69,139,.07);
}
.secondary:hover{border-color:#725cf1!important;color:#5f4cde!important;transform:translateY(-2px)}
.hero-art-frame{
  border:1px solid rgba(99,114,255,.34)!important;
  background:linear-gradient(145deg,#071328,#0b1732 55%,#17265a)!important;
  box-shadow:
    0 32px 78px rgba(27,43,91,.29),
    0 0 0 6px rgba(115,91,244,.08),
    0 0 42px rgba(45,191,255,.10)!important;
}
.hero-art-frame:before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,#21d5ff,#7658ff,#ff55a6,#ffaf43,#21d5ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.hero-art-label{color:#dfe9ff!important}
.hero-art-label:before{content:"●";color:#28e9aa;margin-right:7px;text-shadow:0 0 10px #28e9aa}
.hero-art img{box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* colorful bordered category rail */
.cat-zone{padding-bottom:26px!important}
.categories{
  border:1px solid rgba(103,89,239,.22)!important;
  background:linear-gradient(120deg,rgba(255,255,255,.97),rgba(249,247,255,.96),rgba(245,253,255,.97))!important;
  box-shadow:0 22px 60px rgba(68,72,163,.13),0 0 0 5px rgba(255,255,255,.58)!important;
}
.cat{
  border:1px solid transparent!important;
  transition:.2s ease!important;
}
.cat:hover{
  transform:translateY(-2px);
  border-color:rgba(105,88,239,.16)!important;
  background:linear-gradient(145deg,#f6fbff,#f6f1ff)!important;
  box-shadow:0 10px 24px rgba(77,76,170,.08);
}
.cat i,.cat .cat-icon{
  border:1px solid rgba(106,93,239,.14);
  background:linear-gradient(145deg,#edf9ff,#efeaff)!important;
  color:#6255e7!important;
  box-shadow:0 7px 18px rgba(69,81,170,.07);
}
.cat:nth-child(3n+2) i,.cat:nth-child(3n+2) .cat-icon{background:linear-gradient(145deg,#e9fff8,#e8f8ff)!important;color:#0a9b7b!important}
.cat:nth-child(3n+3) i,.cat:nth-child(3n+3) .cat-icon{background:linear-gradient(145deg,#fff1f8,#fff5e9)!important;color:#d64c91!important}
.cat.active{
  border-color:rgba(255,255,255,.38)!important;
  background:linear-gradient(130deg,#1a91ff,#6b57f4 55%,#d14dc5)!important;
  box-shadow:0 12px 28px rgba(91,76,224,.26)!important;
}
.cat.active i,.cat.active .cat-icon{background:rgba(255,255,255,.15)!important;color:#fff!important;border-color:rgba(255,255,255,.26)!important}

/* product section */
.products.section,.products{position:relative}
.products:before{
  content:"";position:absolute;z-index:-1;left:50%;top:0;transform:translateX(-50%);
  width:min(1500px,100%);height:100%;
  background:radial-gradient(circle at 10% 15%,rgba(32,178,255,.055),transparent 23%),radial-gradient(circle at 91% 36%,rgba(122,85,244,.065),transparent 25%);
  pointer-events:none;
}
.section-head span{
  background:linear-gradient(90deg,#208fff,#6d55f4,#df4eaf);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.section-head h2{color:#0a1734}
.product{
  position:relative;
  border:1px solid rgba(94,106,208,.20)!important;
  background:linear-gradient(180deg,#fff 0%,#fefeff 70%,#faf9ff 100%)!important;
  box-shadow:0 16px 44px rgba(47,61,128,.09)!important;
}
.product:before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;z-index:4;
  background:linear-gradient(90deg,#20baff,#6657f4,#ff55a6);
}
.product:nth-child(4n+2):before{background:linear-gradient(90deg,#ff526f,#ff8c40,#ffd24f)}
.product:nth-child(4n+3):before{background:linear-gradient(90deg,#1ad6a2,#15b9e4,#3d79ff)}
.product:nth-child(4n+4):before{background:linear-gradient(90deg,#8455ff,#d94bc9,#ff6581)}
.product:hover{
  transform:translateY(-8px)!important;
  border-color:rgba(104,83,242,.38)!important;
  box-shadow:0 24px 62px rgba(65,64,161,.18),0 0 0 5px rgba(114,88,244,.035)!important;
}
.thumb{border-bottom:1px solid rgba(92,100,190,.13)}
.thumb:after{content:"";position:absolute;inset:0;box-shadow:inset 0 -30px 34px rgba(10,18,43,.08);pointer-events:none}
.thumb .flag{box-shadow:0 7px 18px rgba(26,65,160,.18);border:1px solid rgba(255,255,255,.34)}
.price strong{
  background:linear-gradient(90deg,#1f73e9,#6753e7);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.detail{
  border:1px solid rgba(255,255,255,.40);
  background:linear-gradient(110deg,#1a8dff,#6257f4 60%,#c34cd1)!important;
  box-shadow:0 10px 24px rgba(81,75,215,.20);
  transition:.2s ease;
}
.detail:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(81,75,215,.27)}

/* stats frame */
.stats{
  border-top:1px solid rgba(101,91,226,.16)!important;
  border-bottom:1px solid rgba(101,91,226,.16)!important;
  background:linear-gradient(105deg,#f3fbff,#f6f1ff 46%,#fff4fb 72%,#f4fbff)!important;
  box-shadow:inset 0 1px 0 #fff;
}
.stats-grid>div{border-right-color:rgba(105,92,220,.13)!important}
.stats i{
  border:1px solid rgba(102,91,230,.14);
  background:linear-gradient(145deg,#e6f8ff,#eeeaff)!important;
  color:#6255e8!important;
  box-shadow:0 8px 18px rgba(76,77,165,.08);
}
.stats-grid>div:nth-child(2) i{background:linear-gradient(145deg,#e8fff5,#e9f8ff)!important;color:#07977c!important}
.stats-grid>div:nth-child(3) i{background:linear-gradient(145deg,#fff0f7,#fff3e9)!important;color:#d3468a!important}
.stats-grid>div:nth-child(4) i{background:linear-gradient(145deg,#fff6df,#fff0ea)!important;color:#e47728!important}

/* dark premium feature block */
.feature-zone{
  border-top:1px solid rgba(105,91,241,.30);
  border-bottom:1px solid rgba(93,206,255,.18);
  background:
    radial-gradient(circle at 11% 12%,rgba(22,177,255,.18),transparent 27%),
    radial-gradient(circle at 78% 22%,rgba(127,82,255,.24),transparent 30%),
    radial-gradient(circle at 92% 95%,rgba(255,72,170,.15),transparent 28%),
    linear-gradient(135deg,#071127 0%,#0b1632 48%,#101237 100%)!important;
}
.feature-grid article{
  border:1px solid rgba(159,148,255,.20)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.11);
  transition:.22s ease;
}
.feature-grid article:hover{transform:translateY(-5px);border-color:rgba(102,206,255,.40)!important;background:linear-gradient(145deg,rgba(55,179,255,.10),rgba(121,83,245,.08))!important}
.feature-grid article:nth-child(2){border-color:rgba(126,98,255,.24)!important}
.feature-grid article:nth-child(3){border-color:rgba(43,221,172,.23)!important}
.feature-grid article:nth-child(4){border-color:rgba(255,88,176,.22)!important}
.feature-grid i{border:1px solid rgba(255,255,255,.10)}

/* guide / reviews / contact cards */
.guide-section{
  position:relative;
  padding-bottom:82px!important;
}
.guide-grid article,.review-grid article,.contact-card{
  border:1px solid rgba(102,92,223,.18)!important;
  background:linear-gradient(145deg,#fff,#fcfbff)!important;
  box-shadow:0 15px 42px rgba(48,60,128,.08)!important;
  transition:.22s ease;
}
.guide-grid article:hover,.review-grid article:hover,.contact-card:hover{transform:translateY(-4px);border-color:rgba(104,84,241,.34)!important;box-shadow:0 21px 54px rgba(63,63,154,.14)!important}
.guide-grid article>b{
  border:1px solid rgba(103,89,233,.14);
  background:linear-gradient(145deg,#e8f7ff,#efe9ff)!important;
  color:#6254e8!important;
  box-shadow:0 8px 20px rgba(77,75,165,.08);
}
.guide-grid article:nth-child(2)>b{background:linear-gradient(145deg,#e7fff5,#e8f8ff)!important;color:#079a7a!important}
.guide-grid article:nth-child(3)>b{background:linear-gradient(145deg,#fff0f7,#fff1ea)!important;color:#d44b8e!important}
.guide-grid article:nth-child(4)>b{background:linear-gradient(145deg,#fff7dc,#fff0ea)!important;color:#db732a!important}
.review-grid header i{box-shadow:0 9px 23px rgba(92,79,223,.17)}

.contact-section{
  border-top:1px solid rgba(108,91,235,.16)!important;
  border-bottom:1px solid rgba(108,91,235,.13)!important;
  background:
    radial-gradient(circle at 10% 35%,rgba(29,191,255,.09),transparent 24%),
    radial-gradient(circle at 88% 65%,rgba(136,83,246,.10),transparent 25%),
    linear-gradient(180deg,#f8fbff,#f8f5ff)!important;
}
.contact-card>i{
  border:1px solid rgba(105,90,236,.14);
  background:linear-gradient(145deg,#e8f8ff,#eeeaff)!important;
  color:#6255e8!important;
}
.contact-card:nth-child(2)>i{background:linear-gradient(145deg,#e7fff5,#e8f8ff)!important;color:#079e7b!important}
.contact-card:nth-child(3)>i{background:linear-gradient(145deg,#fff0f8,#fff0ea)!important;color:#d4478e!important}
.contact-card:nth-child(4)>i{background:linear-gradient(145deg,#fff8dc,#fff1ea)!important;color:#e07725!important}

.cta{
  position:relative;overflow:hidden;
  border:1px solid rgba(102,88,239,.22)!important;
  background:
    radial-gradient(circle at 12% 50%,rgba(24,191,255,.16),transparent 26%),
    radial-gradient(circle at 86% 40%,rgba(255,76,171,.13),transparent 27%),
    linear-gradient(110deg,#eef9ff,#f2edff 50%,#fff1f8)!important;
  box-shadow:0 18px 52px rgba(70,69,157,.12);
}
.rocket{border:1px solid rgba(111,92,237,.15);box-shadow:0 10px 28px rgba(85,76,186,.12)!important}

/* footer */
footer{
  position:relative;
  border-top:1px solid rgba(107,91,239,.35)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(23,182,255,.13),transparent 28%),
    radial-gradient(circle at 82% 20%,rgba(121,82,245,.18),transparent 30%),
    linear-gradient(135deg,#061025,#08142b 48%,#100f32)!important;
}
footer:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#20d4ff,#6858f4,#ff53a6,#ff9a39)}

/* auth modal / other front-end pages */
.auth-dialog{
  border:1px solid rgba(106,89,235,.25)!important;
  background:linear-gradient(145deg,#fff,#faf9ff)!important;
  box-shadow:0 35px 100px rgba(30,38,95,.30),0 0 0 6px rgba(122,92,244,.055)!important;
}
.auth-brandbar{background:linear-gradient(100deg,#f0f9ff,#f1edff 55%,#fff0f8)!important;border-bottom:1px solid rgba(105,90,230,.13)!important}
.auth-tab.active{color:#6151e6!important}.auth-tab.active:after{background:linear-gradient(90deg,#1d9bff,#6b57f4,#e04dae)!important}
.auth-field{border-color:rgba(96,101,203,.20)!important;background:#fff!important}
.auth-field:focus-within{border-color:#735df1!important;box-shadow:0 0 0 4px rgba(106,85,240,.09)!important}
.auth-submit{background:linear-gradient(110deg,#1a8eff,#6658f3 58%,#ca4fd0)!important;box-shadow:0 12px 28px rgba(83,75,215,.22)!important}

.product-detail-page,.wallet-page,.checkout-page{
  background:
    radial-gradient(circle at 8% 15%,rgba(33,184,255,.08),transparent 25rem),
    radial-gradient(circle at 91% 28%,rgba(125,84,244,.09),transparent 26rem),
    #f7f9fd!important;
}
.product-detail-card,.product-description-card,.product-side-card,.wallet-panel,.checkout-card,.owned-card{
  border:1px solid rgba(99,95,212,.19)!important;
  box-shadow:0 18px 55px rgba(40,54,120,.09)!important;
}
.product-price-box{border-color:rgba(105,91,231,.17)!important;background:linear-gradient(145deg,#f8fcff,#f7f3ff)!important}
.product-buy-btn,.wallet-form button{background:linear-gradient(110deg,#188eff,#6658f3 57%,#c64fcf)!important;box-shadow:0 13px 30px rgba(84,75,215,.24)!important}
.product-demo-btn{border-color:rgba(109,91,239,.24)!important;background:linear-gradient(145deg,#f7fbff,#f4efff)!important}
.balance-card{border:1px solid rgba(255,255,255,.35)!important;background:linear-gradient(130deg,#1b8eff,#6758f4 56%,#cf4fc6)!important;box-shadow:0 22px 52px rgba(83,72,218,.28)!important}
.orders-back{background:linear-gradient(110deg,#101c35,#2a2456)!important;border:1px solid rgba(126,102,255,.24)}
.owned-card:hover{border-color:rgba(105,83,239,.34)!important;transform:translateY(-3px)}

/* mobile polish: retain colorful framing but avoid crowding */
@media(max-width:900px){
  .menu{border:1px solid rgba(104,90,229,.19)!important;background:linear-gradient(145deg,#f2faff,#f2edff)!important;color:#6154e5!important}
  .hero{padding-top:18px!important;padding-bottom:48px!important}
  .hero-grid{padding:34px 28px 38px!important;border-radius:26px!important}
}
@media(max-width:720px){
  body{background:linear-gradient(180deg,#fbfdff,#f9f7ff 50%,#fbfdff)}
  header{background:rgba(255,255,255,.94)!important}
  .hero{padding-top:12px!important;padding-bottom:42px!important}
  .hero-grid{
    padding:27px 18px 34px!important;
    border-radius:24px!important;
    box-shadow:0 20px 55px rgba(69,68,153,.12),0 0 0 4px rgba(255,255,255,.55)!important;
  }
  .mini-perks span{border-radius:13px}
  .mini-perks i{width:30px;height:30px}
  .cat-zone{background:transparent!important;border:0!important}
  .cat-zone .wrap.categories{
    border:1px solid rgba(106,91,229,.19)!important;
    background:linear-gradient(120deg,#fff,#f9f6ff,#f5fcff)!important;
    box-shadow:0 14px 36px rgba(62,66,143,.11)!important;
  }
  .product{border-radius:17px!important}
  .product:hover{transform:translateY(-3px)!important}
  .feature-zone{border-radius:0}
  .feature-grid article{border-radius:18px!important}
  .contact-card{border-radius:16px!important}
}


/* V53 - premium hero trust icons */
.hero-trust{
  display:flex!important;
  flex-wrap:wrap;
  gap:10px!important;
  margin-top:20px!important;
}
.hero-trust .trust-item{
  display:inline-flex!important;
  align-items:center;
  gap:9px!important;
  min-height:40px;
  padding:6px 12px 6px 7px;
  border:1px solid rgba(102,89,230,.18);
  border-radius:13px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(46,58,128,.07), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  color:#243653!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.hero-trust .trust-item:hover{
  transform:translateY(-2px);
  border-color:rgba(103,84,242,.34);
  box-shadow:0 12px 30px rgba(69,67,160,.13),0 0 0 3px rgba(107,86,242,.045);
}
.hero-trust .trust-item b{font-size:10px;line-height:1.15;font-weight:800;white-space:nowrap}
.hero-trust .trust-icon{
  width:29px;height:29px;flex:0 0 29px;
  display:grid!important;place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 8px 18px rgba(63,70,157,.13),inset 0 1px 0 rgba(255,255,255,.75);
}
.hero-trust .trust-icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-trust .trust-responsive .trust-icon{color:#1587f8;background:linear-gradient(145deg,#dff5ff,#e9edff)}
.hero-trust .trust-admin .trust-icon{color:#7257ef;background:linear-gradient(145deg,#eee9ff,#f8e9ff)}
.hero-trust .trust-support .trust-icon{color:#0eaa8a;background:linear-gradient(145deg,#dcfff6,#e6faff)}
@media(max-width:720px){
  .hero-trust{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px!important;
    width:100%;
  }
  .hero-trust .trust-item{
    width:100%;
    min-width:0;
    min-height:76px;
    padding:8px 5px;
    flex-direction:column;
    justify-content:center;
    gap:6px!important;
    text-align:center;
    border-radius:12px;
  }
  .hero-trust .trust-item b{
    font-size:9px;
    line-height:1.25;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .hero-trust .trust-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;
  }
}

/* =========================================================
   S2NDCODE.VN V54 - FULL SCREEN DESKTOP WIDTH
   Keep V53 visuals/frames 100%; only expand the shared desktop grid.
   ========================================================= */
@media (min-width:1101px){
  :root{
    --s2-container:none;
    --s2-gutter:20px;
  }

  .wrap,
  .topbar .wrap,
  .nav.wrap,
  .hero-grid,
  .cat-zone .wrap,
  .products.wrap,
  .feature-zone .wrap,
  .guide-section.wrap,
  .contact-section .wrap,
  footer .wrap{
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin-left:20px!important;
    margin-right:20px!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Preserve the existing V53 frame while letting it fill the viewport. */
  .hero-grid{
    width:calc(100% - 40px)!important;
  }

  .categories{
    width:100%!important;
  }

  .products.wrap{
    width:calc(100% - 40px)!important;
  }
}

/* Large monitors: keep only a slim safety gutter instead of a centered max-width box. */
@media (min-width:1680px){
  :root{--s2-gutter:20px}
  .wrap,
  .topbar .wrap,
  .nav.wrap,
  .hero-grid,
  .cat-zone .wrap,
  .products.wrap,
  .feature-zone .wrap,
  .guide-section.wrap,
  .contact-section .wrap,
  footer .wrap{
    width:calc(100% - 40px)!important;
    max-width:none!important;
    margin-left:20px!important;
    margin-right:20px!important;
  }
}

/* =========================================================
   S2NDCODE.VN V55 - HERO LEFT CONTENT ALIGNMENT
   Keep V54 full-screen frame; add a safe inner offset only to
   the left hero content on desktop so it does not hug the edge.
   ========================================================= */
@media (min-width:1101px){
  .hero-copy{
    position:relative!important;
    left:clamp(24px,1.8vw,38px)!important;
  }
}

/* =========================================================
   S2NDCODE.VN V56 - PRODUCT SECTION HEADER FRAME
   Adds a premium frame around the selected product heading only.
   ========================================================= */
.products .section-head{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  align-items:center!important;
  padding:22px 24px!important;
  margin-bottom:26px!important;
  border:1px solid rgba(102,89,239,.24)!important;
  border-radius:20px!important;
  background:
    linear-gradient(120deg,rgba(255,255,255,.97),rgba(248,247,255,.96) 46%,rgba(244,252,255,.97))!important;
  box-shadow:
    0 18px 48px rgba(57,67,145,.10),
    0 0 0 5px rgba(255,255,255,.60),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.products .section-head:before{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  top:-1px;
  height:4px;
  z-index:2;
  background:linear-gradient(90deg,#21c8ff 0%,#287cff 26%,#7357f4 55%,#e64daf 79%,#ffad45 100%);
  box-shadow:0 4px 18px rgba(104,87,242,.18);
  pointer-events:none;
}
.products .section-head:after{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  right:-95px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(101,86,244,.12),rgba(32,190,255,.055) 46%,transparent 72%);
  z-index:-1;
  pointer-events:none;
}
.products .section-head>div:first-child{
  position:relative;
  z-index:1;
  padding-left:2px;
}
.products .section-head span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:5px 10px;
  border:1px solid rgba(100,84,238,.15);
  border-radius:999px;
  background:linear-gradient(120deg,rgba(233,248,255,.92),rgba(240,234,255,.92),rgba(255,239,249,.88));
  box-shadow:0 6px 16px rgba(84,76,174,.06);
}
.products .section-head h2{
  margin-top:10px!important;
}
.products .result-count{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  min-width:94px;
  text-align:center;
  border:1px solid rgba(99,86,235,.17)!important;
  background:linear-gradient(145deg,#eef8ff,#f3eeff 58%,#fff1f8)!important;
  box-shadow:0 9px 22px rgba(73,74,157,.08);
}

@media(max-width:720px){
  .products .section-head{
    padding:16px 15px!important;
    border-radius:17px!important;
    margin-bottom:18px!important;
  }
  .products .section-head span{
    padding:5px 8px;
  }
  .products .section-head h2{
    margin-top:8px!important;
  }
}

/* =========================================================
   S2NDCODE.VN V57 - PRODUCT HEADER TEXT CONTRAST FIX
   Ensure the product-section kicker remains readable on light
   glass backgrounds and is not affected by gradient text clipping.
   ========================================================= */
.products .section-head > div:first-child > span{
  color:#3151c9!important;
  -webkit-text-fill-color:#3151c9!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  background:linear-gradient(135deg,#eef7ff 0%,#f0edff 52%,#fff0f8 100%)!important;
  border-color:rgba(77,79,220,.24)!important;
  text-shadow:none!important;
  box-shadow:0 6px 18px rgba(68,74,190,.10)!important;
}
.products .section-head > div:first-child > h2{
  color:#081a3a!important;
}
.products .section-head > div:first-child > p{
  color:#66758f!important;
}

/* =========================================================
   S2NDCODE.VN V58 - LIGHT AURORA FEATURE + FOOTER
   Match the dark/purple sections to the main site's light
   blue / violet / pink glassmorphism palette.
   ========================================================= */
.feature-zone{
  color:#0b1d3a!important;
  border-top:1px solid rgba(99,87,230,.18)!important;
  border-bottom:1px solid rgba(68,184,239,.16)!important;
  background:
    radial-gradient(circle at 10% 18%,rgba(33,194,255,.13),transparent 30%),
    radial-gradient(circle at 78% 22%,rgba(126,88,246,.12),transparent 31%),
    radial-gradient(circle at 92% 86%,rgba(255,89,180,.09),transparent 28%),
    linear-gradient(135deg,#f8fcff 0%,#f5f3ff 52%,#fff7fb 100%)!important;
}
.feature-zone:before{
  background:
    radial-gradient(circle at 22% 20%,rgba(56,190,255,.10),transparent 26%),
    radial-gradient(circle at 82% 78%,rgba(129,91,246,.10),transparent 28%)!important;
  opacity:1!important;
}
.feature-zone .section-head h2{color:#0a1b39!important}
.feature-zone .section-head p{color:#697993!important}
.feature-zone .section-head span{
  color:#5d56df!important;
  -webkit-text-fill-color:#5d56df!important;
  text-shadow:none!important;
}
.feature-grid article{
  border:1px solid rgba(101,92,224,.18)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,248,255,.84))!important;
  box-shadow:
    0 16px 40px rgba(60,70,145,.08),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(16px);
}
.feature-grid article:hover{
  transform:translateY(-5px);
  border-color:rgba(92,99,232,.34)!important;
  background:linear-gradient(145deg,#ffffff,#f8f5ff 62%,#f2fbff)!important;
  box-shadow:0 22px 50px rgba(69,70,154,.13)!important;
}
.feature-grid article:nth-child(2){border-color:rgba(126,98,255,.20)!important}
.feature-grid article:nth-child(3){border-color:rgba(30,190,152,.21)!important}
.feature-grid article:nth-child(4){border-color:rgba(231,84,164,.19)!important}
.feature-grid i{
  border:1px solid rgba(105,93,228,.14)!important;
  background:linear-gradient(145deg,#eaf7ff,#eeeaff)!important;
  color:#5c55df!important;
  box-shadow:0 9px 22px rgba(75,78,165,.09)!important;
}
.feature-grid article:nth-child(2) i{background:linear-gradient(145deg,#edf1ff,#f1eaff)!important;color:#6556e8!important}
.feature-grid article:nth-child(3) i{background:linear-gradient(145deg,#e8fff7,#e8faff)!important;color:#0b9b7d!important}
.feature-grid article:nth-child(4) i{background:linear-gradient(145deg,#fff0f7,#fff2e9)!important;color:#d64a8e!important}
.feature-grid h3{color:#10213e!important}
.feature-grid p{color:#6b7a92!important}

footer{
  color:#425470!important;
  border-top:1px solid rgba(104,90,231,.18)!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(33,190,255,.12),transparent 30%),
    radial-gradient(circle at 84% 22%,rgba(128,86,245,.11),transparent 31%),
    radial-gradient(circle at 94% 92%,rgba(255,91,178,.08),transparent 28%),
    linear-gradient(135deg,#f8fcff 0%,#f6f4ff 50%,#fff7fb 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88)!important;
}
footer:before{
  height:3px!important;
  background:linear-gradient(90deg,#20d4ff,#6858f4,#ff53a6,#ff9a39)!important;
}
.footer-grid>div>b{color:#0e2141!important}
.footer-grid a{color:#596b86!important}
.footer-grid a:hover{color:#6356e6!important}
.footer-grid .logo strong{color:#0b1d3c!important}
.footer-grid .logo strong span{color:#6a57ea!important}
.footer-grid .logo small{color:#7888a1!important}
.about p{color:#697992!important}
.copyright{
  border-top-color:rgba(94,97,198,.14)!important;
  color:#74839b!important;
}

@media(max-width:720px){
  .feature-zone{
    background:
      radial-gradient(circle at 8% 10%,rgba(39,193,255,.11),transparent 32%),
      radial-gradient(circle at 90% 74%,rgba(129,89,244,.10),transparent 32%),
      linear-gradient(180deg,#f8fcff,#f7f4ff 58%,#fff8fb)!important;
  }
  footer{
    background:
      radial-gradient(circle at 10% 0%,rgba(35,191,255,.10),transparent 34%),
      radial-gradient(circle at 90% 76%,rgba(126,89,242,.09),transparent 34%),
      linear-gradient(180deg,#f8fcff,#f7f4ff 58%,#fff8fb)!important;
  }
}

/* =========================================================
   S2NDCODE.VN V59 - PREMIUM COLORFUL HERO ART
   New 16:9 brand artwork. Keep it perfectly fitted to the
   existing hero frame on desktop/tablet/mobile.
   ========================================================= */
.hero-art-frame{
  overflow:hidden!important;
}
.hero-art-frame .hero-art-label{
  position:relative;
  z-index:2;
  background:linear-gradient(90deg,rgba(7,19,40,.97),rgba(13,24,57,.96),rgba(46,27,91,.94))!important;
  border-radius:16px 16px 0 0;
  margin:-1px -1px 0;
  padding-left:15px!important;
  padding-right:15px!important;
}
.hero-art-frame img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  border-radius:0 0 18px 18px!important;
  background:#12245b;
}
@media(min-width:901px){
  .hero-art-frame{
    padding:10px!important;
  }
  .hero-art-frame .hero-art-label{
    height:44px!important;
  }
}
@media(max-width:900px){
  .hero-art-frame img{
    aspect-ratio:16/9!important;
    object-fit:cover!important;
    object-position:center!important;
  }
}

/* =========================================================
   S2NDCODE.VN V60 - CLEAN HERO ART
   Remove the dark monitor-style frame and top LIVE PREVIEW bar.
   Keep only the site's soft neon edge around the artwork.
   ========================================================= */
.hero-art-frame.hero-art-clean{
  padding:0!important;
  background:transparent!important;
  border:1px solid rgba(97,104,255,.34)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:
    0 24px 58px rgba(51,72,141,.18),
    0 0 0 5px rgba(255,255,255,.72),
    0 0 30px rgba(70,191,255,.12)!important;
}
.hero-art-frame.hero-art-clean:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,#28d7ff,#735bff,#ef58bb,#ff9d55,#28d7ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:2;
}
.hero-art-frame.hero-art-clean img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  border-radius:23px!important;
  background:transparent!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .hero-art-frame.hero-art-clean{
    border-radius:20px!important;
  }
  .hero-art-frame.hero-art-clean img{
    border-radius:19px!important;
  }
}

/* =========================================================
   S2NDCODE.VN V61 - HERO ART FULL HEIGHT
   Desktop only: stretch the right hero artwork to the top and
   bottom edges of the main hero frame. Keep the artwork cropped
   proportionally (no distortion). Tablet/mobile stay unchanged.
   ========================================================= */
@media (min-width:1101px){
  .hero-grid{
    align-items:center!important;
  }

  .hero-art{
    height:calc(100% + 84px)!important;
    margin-top:-42px!important;
    margin-bottom:-42px!important;
    align-self:center!important;
    align-items:stretch!important;
  }

  .hero-art-frame.hero-art-clean{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    display:flex!important;
    align-items:stretch!important;
  }

  .hero-art-frame.hero-art-clean img{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* =========================================================
   S2NDCODE.VN V62 - SOFT LEFT HERO BLEND
   Fade only the left edge of the hero artwork into the site's
   light aurora background. Keep the main artwork sharp.
   ========================================================= */
@media (min-width:901px){
  .hero-art-frame.hero-art-clean::after{
    content:"";
    position:absolute;
    z-index:3;
    top:0;
    bottom:0;
    left:0;
    width:92px;
    pointer-events:none;
    border-radius:23px 0 0 23px;
    background:linear-gradient(90deg,
      rgba(247,250,255,.82) 0%,
      rgba(245,248,255,.52) 28%,
      rgba(246,244,255,.24) 58%,
      rgba(255,255,255,0) 100%);
    -webkit-backdrop-filter:blur(1.8px);
    backdrop-filter:blur(1.8px);
  }
}

@media (min-width:901px) and (max-width:1100px){
  .hero-art-frame.hero-art-clean::after{
    width:72px;
    background:linear-gradient(90deg,
      rgba(247,250,255,.76) 0%,
      rgba(245,248,255,.42) 36%,
      rgba(255,255,255,0) 100%);
  }
}

/* =========================================================
   S2NDCODE.VN V63 - SEAMLESS LEFT HERO EDGE
   Fade the COMPLETE left edge (image + border + neon/glow) so
   the artwork dissolves into the aurora background without a
   visible frame/corner on the left side.
   ========================================================= */
@media (min-width:901px){
  .hero-art-frame.hero-art-clean{
    /* Fade the whole frame itself, not only the image overlay. */
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0,
      rgba(0,0,0,.10) 16px,
      rgba(0,0,0,.34) 38px,
      rgba(0,0,0,.72) 76px,
      #000 126px,
      #000 100%);
    mask-image:linear-gradient(90deg,
      transparent 0,
      rgba(0,0,0,.10) 16px,
      rgba(0,0,0,.34) 38px,
      rgba(0,0,0,.72) 76px,
      #000 126px,
      #000 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
    border-left-color:transparent!important;
  }

  /* The parent mask already creates the blend. Remove the old
     overlay so it cannot leave a visible rounded vertical edge. */
  .hero-art-frame.hero-art-clean::after{
    display:none!important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .hero-art-frame.hero-art-clean{
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0,
      rgba(0,0,0,.16) 12px,
      rgba(0,0,0,.52) 42px,
      #000 88px,
      #000 100%);
    mask-image:linear-gradient(90deg,
      transparent 0,
      rgba(0,0,0,.16) 12px,
      rgba(0,0,0,.52) 42px,
      #000 88px,
      #000 100%);
  }
}

/* =========================================================
   S2NDCODE.VN V64 - NATURAL AURORA HERO BLEND
   A broader, softer and slightly diagonal dissolve. The image,
   frame edge and neon border blend into the actual hero surface,
   then a very light aurora haze removes the artificial hard band.
   ========================================================= */
@media (min-width:1101px){
  .hero-art{
    isolation:isolate!important;
  }

  .hero-art-frame.hero-art-clean{
    /* Wide feather (roughly 200px on a normal desktop hero).
       The 96deg angle prevents the blend from looking like a
       perfectly vertical white strip. */
    -webkit-mask-image:linear-gradient(96deg,
      transparent 0%,
      rgba(0,0,0,.015) 3%,
      rgba(0,0,0,.05) 6%,
      rgba(0,0,0,.12) 9%,
      rgba(0,0,0,.23) 12%,
      rgba(0,0,0,.38) 15%,
      rgba(0,0,0,.55) 18%,
      rgba(0,0,0,.72) 21%,
      rgba(0,0,0,.86) 24%,
      rgba(0,0,0,.95) 27%,
      #000 30%,
      #000 100%)!important;
    mask-image:linear-gradient(96deg,
      transparent 0%,
      rgba(0,0,0,.015) 3%,
      rgba(0,0,0,.05) 6%,
      rgba(0,0,0,.12) 9%,
      rgba(0,0,0,.23) 12%,
      rgba(0,0,0,.38) 15%,
      rgba(0,0,0,.55) 18%,
      rgba(0,0,0,.72) 21%,
      rgba(0,0,0,.86) 24%,
      rgba(0,0,0,.95) 27%,
      #000 30%,
      #000 100%)!important;
    border-left-color:transparent!important;
  }

  /* A very soft haze matching the hero's own white / lavender
     background. This smooths the cyan-to-white color transition
     without whitening the main dashboard artwork. */
  .hero-art::before{
    content:"";
    position:absolute;
    z-index:5;
    pointer-events:none;
    top:-18px;
    bottom:-18px;
    left:-34px;
    width:250px;
    background:
      radial-gradient(ellipse 78% 46% at 5% 22%,rgba(229,247,255,.48),transparent 72%),
      radial-gradient(ellipse 82% 52% at 7% 78%,rgba(244,235,255,.42),transparent 74%),
      linear-gradient(90deg,
        rgba(255,255,255,.68) 0%,
        rgba(252,252,255,.46) 22%,
        rgba(248,247,255,.24) 48%,
        rgba(246,249,255,.08) 72%,
        rgba(255,255,255,0) 100%);
    filter:blur(10px);
    opacity:.86;
    transform:translateX(-12px);
  }

  .hero-art-frame.hero-art-clean::after{
    display:none!important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .hero-art{
    isolation:isolate!important;
  }
  .hero-art-frame.hero-art-clean{
    -webkit-mask-image:linear-gradient(95deg,
      transparent 0%,
      rgba(0,0,0,.04) 5%,
      rgba(0,0,0,.16) 10%,
      rgba(0,0,0,.36) 15%,
      rgba(0,0,0,.62) 20%,
      rgba(0,0,0,.84) 25%,
      #000 31%,
      #000 100%)!important;
    mask-image:linear-gradient(95deg,
      transparent 0%,
      rgba(0,0,0,.04) 5%,
      rgba(0,0,0,.16) 10%,
      rgba(0,0,0,.36) 15%,
      rgba(0,0,0,.62) 20%,
      rgba(0,0,0,.84) 25%,
      #000 31%,
      #000 100%)!important;
  }
  .hero-art::before{
    content:"";
    position:absolute;
    z-index:5;
    pointer-events:none;
    top:-12px;
    bottom:-12px;
    left:-22px;
    width:180px;
    background:linear-gradient(90deg,
      rgba(255,255,255,.64),
      rgba(249,248,255,.32) 44%,
      rgba(255,255,255,0) 100%);
    filter:blur(8px);
    opacity:.82;
  }
}

/* =========================================================
   S2NDCODE.VN V65 - BOTTOM LEFT HERO CORNER CLEANUP
   Remove the last visible border/glow at the lower-left edge
   without changing the V64 natural blend anywhere else.
   ========================================================= */
@media (min-width:1101px){
  .hero-art::after{
    content:"";
    position:absolute;
    z-index:7;
    pointer-events:none;
    left:-48px;
    bottom:-34px;
    width:330px;
    height:190px;
    background:
      radial-gradient(ellipse 90% 95% at 0% 100%,
        rgba(255,255,255,.99) 0%,
        rgba(252,252,255,.96) 24%,
        rgba(247,246,255,.82) 43%,
        rgba(241,247,255,.50) 61%,
        rgba(245,249,255,.18) 78%,
        rgba(255,255,255,0) 100%);
    filter:blur(12px);
    transform:translate(-12px,10px);
  }

  .hero-art-frame.hero-art-clean{
    border-left-color:transparent!important;
    box-shadow:none!important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .hero-art::after{
    content:"";
    position:absolute;
    z-index:7;
    pointer-events:none;
    left:-34px;
    bottom:-24px;
    width:230px;
    height:145px;
    background:radial-gradient(ellipse 92% 96% at 0% 100%,
      rgba(255,255,255,.98) 0%,
      rgba(250,250,255,.88) 36%,
      rgba(244,247,255,.48) 62%,
      rgba(255,255,255,0) 100%);
    filter:blur(10px);
  }
}

/* =========================================================
   S2NDCODE.VN V66 - TRUE SEAMLESS HERO BLEND
   Remove the artificial white/grey haze completely. The left
   side now dissolves by true alpha transparency only, allowing
   the real hero background to show through naturally.
   ========================================================= */
@media (min-width:1101px){
  /* Remove V64/V65 fog overlays that could still be perceived
     as a pale vertical band / cloudy lower-left corner. */
  .hero-art::before,
  .hero-art::after{
    display:none!important;
    content:none!important;
  }

  .hero-art-frame.hero-art-clean{
    border-left-color:transparent!important;
    box-shadow:none!important;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      transparent 3.5%,
      rgba(0,0,0,.035) 6%,
      rgba(0,0,0,.10) 8.5%,
      rgba(0,0,0,.22) 11%,
      rgba(0,0,0,.40) 13.5%,
      rgba(0,0,0,.62) 16%,
      rgba(0,0,0,.80) 18.5%,
      rgba(0,0,0,.93) 21%,
      #000 23.5%,
      #000 100%)!important;
    mask-image:linear-gradient(90deg,
      transparent 0%,
      transparent 3.5%,
      rgba(0,0,0,.035) 6%,
      rgba(0,0,0,.10) 8.5%,
      rgba(0,0,0,.22) 11%,
      rgba(0,0,0,.40) 13.5%,
      rgba(0,0,0,.62) 16%,
      rgba(0,0,0,.80) 18.5%,
      rgba(0,0,0,.93) 21%,
      #000 23.5%,
      #000 100%)!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-size:100% 100%!important;
    mask-size:100% 100%!important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .hero-art::before,
  .hero-art::after{
    display:none!important;
    content:none!important;
  }
  .hero-art-frame.hero-art-clean{
    border-left-color:transparent!important;
    box-shadow:none!important;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      transparent 3%,
      rgba(0,0,0,.08) 8%,
      rgba(0,0,0,.28) 13%,
      rgba(0,0,0,.58) 18%,
      rgba(0,0,0,.84) 23%,
      #000 28%,
      #000 100%)!important;
    mask-image:linear-gradient(90deg,
      transparent 0%,
      transparent 3%,
      rgba(0,0,0,.08) 8%,
      rgba(0,0,0,.28) 13%,
      rgba(0,0,0,.58) 18%,
      rgba(0,0,0,.84) 23%,
      #000 28%,
      #000 100%)!important;
  }
}

/* =========================================================
   S2NDCODE.VN V68 - USER SELECTED PROGRAMMER HERO
   Exact chosen artwork: keep the bright left side for seamless
   blending and position the developer monitor/icons cleanly.
   ========================================================= */
@media (min-width:1101px){
  .hero-art-frame.hero-art-clean img{
    object-position:61% center!important;
    filter:saturate(1.035) contrast(1.012) brightness(1.01)!important;
  }
}
@media (min-width:901px) and (max-width:1100px){
  .hero-art-frame.hero-art-clean img{
    object-position:60% center!important;
  }
}
@media (max-width:900px){
  .hero-art-frame.hero-art-clean img{
    object-position:63% center!important;
  }
}


/* =========================================================
   S2NDCODE.VN V70 - HERO TITLE EXACTLY 2 LINES ON DESKTOP
   ========================================================= */
.hero-title-line{display:block}
@media (min-width:1101px){
  .hero h1{
    max-width:none!important;
    width:max-content!important;
    font-size:clamp(43px,2.8vw,54px)!important;
    line-height:1.06!important;
    letter-spacing:-2.5px!important;
    text-wrap:nowrap!important;
  }
  .hero-title-line{
    display:block!important;
    white-space:nowrap!important;
  }
}
@media (max-width:1100px){
  .hero h1{width:auto!important;max-width:100%!important}
  .hero-title-line{white-space:normal!important}
}

/* V71 - colorful category icons polish */
.cat{
  position:relative;
  overflow:hidden;
}
.cat::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:15px;
  background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.58),transparent 34%),
             linear-gradient(180deg,rgba(255,255,255,.20),transparent 46%);
  pointer-events:none;
  opacity:.85;
}
.cat i,.cat .cat-icon{
  position:relative;
  z-index:1;
  border-width:1px!important;
  box-shadow:0 10px 24px rgba(84,87,195,.12),inset 0 1px 0 rgba(255,255,255,.75)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65),0 0 18px rgba(108,111,255,.18);
}
.cat span{position:relative;z-index:1}
.cat b{color:#24324a!important}
.cat small{color:#71839b!important}

.cat:nth-child(1) i,.cat:nth-child(1) .cat-icon{
  background:linear-gradient(145deg,#dff3ff,#dff0ff 45%,#efe5ff)!important;
  color:#2f7cf6!important;
  border-color:rgba(47,124,246,.16)!important;
}
.cat:nth-child(2) i,.cat:nth-child(2) .cat-icon{
  background:linear-gradient(145deg,#e8fff8,#dcf8ff 52%,#eaf8ff)!important;
  color:#08a887!important;
  border-color:rgba(8,168,135,.16)!important;
}
.cat:nth-child(3) i,.cat:nth-child(3) .cat-icon{
  background:linear-gradient(145deg,#fff1fb,#fff3e7 55%,#ffe9f4)!important;
  color:#df4b92!important;
  border-color:rgba(223,75,146,.16)!important;
}
.cat:nth-child(4) i,.cat:nth-child(4) .cat-icon{
  background:linear-gradient(145deg,#eef0ff,#e8ecff 45%,#f1e9ff)!important;
  color:#6a58f1!important;
  border-color:rgba(106,88,241,.16)!important;
}
.cat:nth-child(5) i,.cat:nth-child(5) .cat-icon{
  background:linear-gradient(145deg,#e8fffb,#e6f7ff 55%,#effcff)!important;
  color:#0f98d7!important;
  border-color:rgba(15,152,215,.16)!important;
}
.cat:nth-child(6) i,.cat:nth-child(6) .cat-icon{
  background:linear-gradient(145deg,#fff6e8,#fff0dd 55%,#fff7f0)!important;
  color:#f08a1c!important;
  border-color:rgba(240,138,28,.16)!important;
}
.cat:nth-child(7) i,.cat:nth-child(7) .cat-icon{
  background:linear-gradient(145deg,#f0ecff,#f8ebff 55%,#f1f7ff)!important;
  color:#8053f2!important;
  border-color:rgba(128,83,242,.16)!important;
}
.cat:nth-child(8) i,.cat:nth-child(8) .cat-icon{
  background:linear-gradient(145deg,#ecfff6,#e7fff2 45%,#effffb)!important;
  color:#11a56d!important;
  border-color:rgba(17,165,109,.16)!important;
}
.cat:nth-child(9) i,.cat:nth-child(9) .cat-icon{
  background:linear-gradient(145deg,#fff0f6,#fff5e9 55%,#fff8f2)!important;
  color:#eb5b97!important;
  border-color:rgba(235,91,151,.16)!important;
}

.cat:hover i,.cat:hover .cat-icon{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 14px 28px rgba(83,87,195,.16),0 0 20px rgba(112,99,255,.12),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.cat.active{
  background:linear-gradient(130deg,#198efe,#6b57f4 58%,#d94bb7)!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:0 16px 34px rgba(93,77,230,.28)!important;
}
.cat.active b,.cat.active small{color:#fff!important}
.cat.active i,.cat.active .cat-icon{
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.12))!important;
  color:#ffffff!important;
  border-color:rgba(255,255,255,.34)!important;
  box-shadow:0 14px 28px rgba(28,28,80,.18),inset 0 1px 0 rgba(255,255,255,.40)!important;
  text-shadow:0 0 14px rgba(255,255,255,.22);
}

/* V72 - vivid neon category rail: strong visible color upgrade */
.cat-zone .categories{overflow:visible!important}
.cat{
  isolation:isolate;
  position:relative!important;
  overflow:visible!important;
  border:1px solid rgba(117,101,255,.10)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(249,250,255,.90))!important;
}
.cat::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:12px;
  opacity:.16;
  z-index:-1;
  filter:blur(12px);
  transition:opacity .22s ease,transform .22s ease;
}
.cat:hover::before{opacity:.34;transform:scale(1.03)}
.cat i,.cat .cat-icon{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:-.3px!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:0 10px 24px rgba(34,61,140,.22),0 0 0 3px rgba(255,255,255,.72),inset 0 1px 0 rgba(255,255,255,.60)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.22),0 0 10px rgba(255,255,255,.28)!important;
  overflow:hidden!important;
  position:relative!important;
  transform:translateZ(0);
}
.cat i::before,.cat .cat-icon::before{
  content:"";
  position:absolute;
  width:28px;
  height:80px;
  left:-28px;
  top:-18px;
  transform:rotate(28deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  opacity:.9;
  transition:left .45s ease;
}
.cat:hover i::before,.cat:hover .cat-icon::before{left:56px}
.cat:hover i,.cat:hover .cat-icon{
  transform:translateY(-3px) scale(1.08)!important;
  box-shadow:0 15px 30px rgba(58,52,180,.28),0 0 22px rgba(100,82,255,.28),0 0 0 3px rgba(255,255,255,.82),inset 0 1px 0 rgba(255,255,255,.75)!important;
}

/* 1 - All: electric blue -> violet -> pink */
.cat:nth-child(1)::before{background:linear-gradient(135deg,#168cff,#7657ff,#ef4cc5)}
.cat:nth-child(1) i,.cat:nth-child(1) .cat-icon{background:linear-gradient(135deg,#168cff 0%,#6657f6 52%,#e94dbd 100%)!important}
/* 2 - Website: cyan -> mint -> emerald */
.cat:nth-child(2)::before{background:linear-gradient(135deg,#09c6ff,#16d6c1,#16b57f)}
.cat:nth-child(2) i,.cat:nth-child(2) .cat-icon{background:linear-gradient(135deg,#06bff4 0%,#13c9c2 48%,#16aa78 100%)!important}
/* 3 - PHP: indigo -> violet -> fuchsia */
.cat:nth-child(3)::before{background:linear-gradient(135deg,#4967ff,#7b50f5,#df4dc8)}
.cat:nth-child(3) i,.cat:nth-child(3) .cat-icon{background:linear-gradient(135deg,#4f67f1 0%,#7654e9 52%,#d947c2 100%)!important}
/* 4 - Laravel: coral -> red -> orange */
.cat:nth-child(4)::before{background:linear-gradient(135deg,#ff416c,#ff4b2b,#ff9a32)}
.cat:nth-child(4) i,.cat:nth-child(4) .cat-icon{background:linear-gradient(135deg,#ff3e68 0%,#ff5140 48%,#ff9f2f 100%)!important}
/* 5 - WordPress: deep blue -> sky -> cyan */
.cat:nth-child(5)::before{background:linear-gradient(135deg,#146eff,#159df6,#13d4e3)}
.cat:nth-child(5) i,.cat:nth-child(5) .cat-icon{background:linear-gradient(135deg,#155ee8 0%,#168df1 52%,#11c8d5 100%)!important}
/* 6 - HTML/CSS: orange -> hot pink -> purple */
.cat:nth-child(6)::before{background:linear-gradient(135deg,#ff912e,#ff496f,#9c56ef)}
.cat:nth-child(6) i,.cat:nth-child(6) .cat-icon{background:linear-gradient(135deg,#ff8d2c 0%,#f74d77 50%,#9455ea 100%)!important}
/* 7 - Bot / Tool: violet -> cobalt -> cyan */
.cat:nth-child(7)::before{background:linear-gradient(135deg,#8455ff,#4268ff,#12c8ef)}
.cat:nth-child(7) i,.cat:nth-child(7) .cat-icon{background:linear-gradient(135deg,#8150ee 0%,#4664f3 52%,#13bfe3 100%)!important}
/* 8 - Mobile: emerald -> aqua -> blue */
.cat:nth-child(8)::before{background:linear-gradient(135deg,#17c66d,#12cbbb,#198df1)}
.cat:nth-child(8) i,.cat:nth-child(8) .cat-icon{background:linear-gradient(135deg,#18b96b 0%,#10c4b5 50%,#1787e8 100%)!important}
/* 9 - Other: pink -> orange -> gold */
.cat:nth-child(9)::before{background:linear-gradient(135deg,#ef4bb8,#ff6a48,#ffc531)}
.cat:nth-child(9) i,.cat:nth-child(9) .cat-icon{background:linear-gradient(135deg,#e94bb2 0%,#fa674d 50%,#f7b932 100%)!important}

/* gentle colored glass on each category tile */
.cat:nth-child(2){background:linear-gradient(145deg,rgba(238,255,252,.96),rgba(246,253,255,.94))!important}
.cat:nth-child(3){background:linear-gradient(145deg,rgba(247,244,255,.96),rgba(255,246,253,.94))!important}
.cat:nth-child(4){background:linear-gradient(145deg,rgba(255,247,244,.96),rgba(255,252,244,.94))!important}
.cat:nth-child(5){background:linear-gradient(145deg,rgba(241,249,255,.96),rgba(240,255,255,.94))!important}
.cat:nth-child(6){background:linear-gradient(145deg,rgba(255,249,241,.96),rgba(255,244,251,.94))!important}
.cat:nth-child(7){background:linear-gradient(145deg,rgba(248,245,255,.96),rgba(241,249,255,.94))!important}
.cat:nth-child(8){background:linear-gradient(145deg,rgba(240,255,249,.96),rgba(239,252,255,.94))!important}
.cat:nth-child(9){background:linear-gradient(145deg,rgba(255,244,250,.96),rgba(255,250,239,.94))!important}

.cat.active{
  background:linear-gradient(130deg,#168cff 0%,#6956f3 52%,#df4bbd 100%)!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:0 14px 32px rgba(87,71,224,.32),0 0 26px rgba(206,73,191,.13)!important;
}
.cat.active::before{opacity:.42!important;filter:blur(16px)!important}
.cat.active i,.cat.active .cat-icon{
  color:#fff!important;
  background:linear-gradient(135deg,#00c8ff 0%,#5964ff 48%,#ff4fc9 100%)!important;
  border-color:rgba(255,255,255,.88)!important;
  box-shadow:0 12px 28px rgba(20,34,120,.28),0 0 24px rgba(255,255,255,.22),0 0 0 3px rgba(255,255,255,.26),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
.cat.active b,.cat.active small{color:#fff!important}

@media(max-width:720px){
  .cat i,.cat .cat-icon{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important;font-size:10px!important}
  .cat:hover i,.cat:hover .cat-icon{transform:none!important}
}

/* =========================================================
   S2NDCODE.VN V73 - MOBILE CATEGORY SWIPE FIX
   Keep V72 neon visuals; restore native horizontal touch scrolling.
   ========================================================= */
@media (max-width:720px){
  .cat-zone{
    overflow:hidden!important;
    max-width:100%!important;
  }
  .cat-zone .wrap.categories,
  .cat-zone .categories{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:10px 12px 12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none!important;
    cursor:grab;
  }
  .cat-zone .categories::-webkit-scrollbar,
  .cat-zone .wrap.categories::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .cat-zone .cat{
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    scroll-snap-align:start;
    user-select:none;
    -webkit-user-select:none;
  }
  .cat-zone .cat:active{cursor:grabbing}
}

@media (min-width:721px) and (max-width:1050px){
  .cat-zone .wrap.categories,
  .cat-zone .categories{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
  }
  .cat-zone .categories::-webkit-scrollbar{display:none!important}
}

/* =========================================================
   S2NDCODE.VN V74 - CONTACT + FOOTER PREMIUM FRAMES
   Frame the two bottom sections while preserving their content/layout.
   ========================================================= */
#contact.contact-section{
  padding:38px 0 22px!important;
  border-top:0!important;
  border-bottom:0!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(27,196,255,.09),transparent 28%),
    radial-gradient(circle at 92% 78%,rgba(220,72,196,.08),transparent 30%),
    linear-gradient(180deg,#f8fbff 0%,#f8f5ff 58%,#fff9fc 100%)!important;
}
#contact .contact-wrap{
  position:relative;
  overflow:hidden;
  padding:48px 24px 26px!important;
  border:1px solid rgba(112,96,235,.22)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 7% 20%,rgba(44,196,255,.08),transparent 30%),
    radial-gradient(circle at 92% 76%,rgba(227,75,186,.07),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(249,249,255,.91))!important;
  box-shadow:0 20px 55px rgba(64,72,156,.11),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
#contact .contact-wrap::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#18c8ff 0%,#5572ff 32%,#8b56f5 58%,#ef4eba 80%,#ff9b42 100%);
}
#contact .contact-wrap::after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-70px;top:-80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(117,84,244,.10),transparent 70%);
  pointer-events:none;
}
#contact .contact-heading,
#contact .contact-grid{position:relative;z-index:1}

#footer{
  position:relative!important;
  overflow:hidden!important;
  width:calc(100% - 40px)!important;
  margin:18px auto 26px!important;
  border:1px solid rgba(103,91,224,.22)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 6% 12%,rgba(31,190,255,.10),transparent 28%),
    radial-gradient(circle at 92% 78%,rgba(232,75,189,.08),transparent 31%),
    linear-gradient(145deg,#f7fbff 0%,#f8f5ff 56%,#fff8fb 100%)!important;
  box-shadow:0 20px 58px rgba(63,72,157,.12),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
#footer::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#18c8ff 0%,#5572ff 32%,#8b56f5 58%,#ef4eba 80%,#ff9b42 100%);
}
#footer::after{
  content:"";
  position:absolute;
  width:220px;height:220px;
  left:-95px;bottom:-110px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(24,189,255,.10),transparent 70%);
  pointer-events:none;
}
#footer .footer-grid,
#footer .copyright{position:relative;z-index:1}
#footer .wrap{
  width:calc(100% - 48px)!important;
  max-width:none!important;
}
#footer .footer-grid{
  padding-top:48px!important;
  padding-bottom:34px!important;
}
#footer .copyright{
  margin-top:0!important;
  min-height:58px!important;
  height:auto!important;
  padding:16px 0!important;
  border-top:1px solid rgba(98,92,203,.14)!important;
}

@media(max-width:720px){
  #contact.contact-section{padding:20px 0 12px!important}
  #contact .contact-wrap{
    width:calc(100% - 24px)!important;
    padding:34px 14px 16px!important;
    border-radius:20px!important;
  }
  #footer{
    width:calc(100% - 24px)!important;
    margin:12px auto 18px!important;
    border-radius:20px!important;
  }
  #footer .wrap{width:calc(100% - 28px)!important}
  #footer .footer-grid{padding-top:34px!important;padding-bottom:24px!important}
  #footer .copyright{padding:14px 0!important}
}

/* =========================================================
   S2NDCODE.VN V75 - CENTER COPYRIGHT
   ========================================================= */
#footer .copyright{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
#footer .copyright>span:first-child{
  margin:0 auto!important;
  text-align:center!important;
  white-space:nowrap;
}
#footer .copyright>span:last-child{
  position:absolute;
  right:0;
  margin:0!important;
}
@media(max-width:720px){
  #footer .copyright{
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }
  #footer .copyright>span:first-child{
    white-space:normal;
    width:100%;
  }
  #footer .copyright>span:last-child{
    position:static;
  }
}

/* v78 - always-visible premium Demo button */
.product-demo-btn{gap:8px;cursor:pointer;font-family:inherit;white-space:nowrap}
.product-demo-btn .demo-btn-icon{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#27c8ff,#7058ff 55%,#e34fce);box-shadow:0 5px 15px rgba(103,79,238,.28)}
.product-demo-btn .demo-btn-icon svg{width:14px;height:14px;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.product-demo-btn:hover .demo-btn-icon{transform:rotate(-5deg) scale(1.08);box-shadow:0 6px 18px rgba(103,79,238,.38)}
.product-demo-btn .demo-btn-icon{transition:.2s ease}
.product-demo-empty{opacity:.92}
.product-demo-empty:hover{opacity:1}

/* v79 - can bang 2 nut Xem Demo / Mua source ngay */
.product-action-row > .product-demo-btn,
.product-action-row > .product-buy-btn{
  flex:1 1 0!important;
  width:0;
  min-width:0;
  height:54px;
}
@media(max-width:520px){
  .product-action-row > .product-demo-btn,
  .product-action-row > .product-buy-btn{
    width:100%;
    flex:0 0 auto!important;
  }
}

/* =========================================================
   S2NDCODE.VN V80 - FRAME FOR "4 BƯỚC ĐƠN GIẢN"
   Adds a premium rounded frame to the guide section heading.
   ========================================================= */
.guide-section > .section-head{
  position:relative;
  overflow:hidden;
  align-items:center;
  min-height:150px;
  margin-bottom:24px!important;
  padding:28px 34px!important;
  border:1px solid rgba(101,90,235,.24);
  border-radius:22px;
  background:linear-gradient(115deg,#ffffff 0%,#fbfcff 45%,#fcf8ff 100%);
  box-shadow:
    0 10px 22px rgba(54,63,126,.12),
    0 24px 55px rgba(55,65,135,.18),
    0 4px 12px rgba(100,82,235,.10),
    inset 0 1px 0 rgba(255,255,255,.96);
}
.guide-section > .section-head:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,#22b8ff 0%,#6356f0 52%,#f05bb4 100%);
  opacity:.72;
}
.guide-section > .section-head > div{
  position:relative;
  z-index:1;
}
.guide-section > .section-head span{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 12px;
  border-radius:999px;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:linear-gradient(100deg,#239df5,#6757ed);
  box-shadow:0 7px 18px rgba(91,82,226,.18);
  letter-spacing:.8px;
}
.guide-section > .section-head h2{
  margin-top:10px;
}

@media(max-width:720px){
  .guide-section > .section-head{
    min-height:0;
    padding:20px 18px!important;
    border-radius:18px;
    margin-bottom:16px!important;
  }
  .guide-section > .section-head h2{
    font-size:25px;
    margin-top:9px;
  }
}

/* =========================================================
   S2NDCODE.VN V84 - MOBILE 2x2 GUIDE + CONTACT GRID
   4 cards = 2 cards per row on phone.
   ========================================================= */
@media(max-width:720px){
  .guide-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .guide-grid article{
    min-width:0!important;
    min-height:154px;
    padding:15px 13px!important;
    border-radius:16px!important;
  }
  .guide-grid article>b{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
    font-size:10px!important;
  }
  .guide-grid h3{
    margin:13px 0 6px!important;
    font-size:12px!important;
    line-height:1.3!important;
  }
  .guide-grid p{
    font-size:9px!important;
    line-height:1.55!important;
  }

  #contact .contact-grid,
  .contact-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  #contact .contact-card,
  .contact-card{
    min-width:0!important;
    min-height:88px!important;
    padding:11px 9px!important;
    gap:8px!important;
    border-radius:14px!important;
    align-items:center!important;
  }
  #contact .contact-card>i,
  .contact-card>i{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:10px!important;
    font-size:14px!important;
  }
  #contact .contact-card>div,
  .contact-card>div{
    min-width:0!important;
  }
  #contact .contact-card small,
  .contact-card small{
    font-size:7.5px!important;
  }
  #contact .contact-card b,
  .contact-card b{
    max-width:100%!important;
    margin:2px 0 3px!important;
    font-size:9px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #contact .contact-card span,
  .contact-card span{
    font-size:7.5px!important;
    line-height:1.25!important;
  }
}

/* =========================================================
   S2NDCODE.VN V85 - COMPACT MOBILE FOOTER
   Make the last/footer section shorter and denser on phones.
   ========================================================= */
@media(max-width:720px){
  #footer{
    width:calc(100% - 24px)!important;
    margin:10px auto 14px!important;
    border-radius:18px!important;
  }
  #footer .wrap{
    width:calc(100% - 22px)!important;
  }
  #footer .footer-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px 10px!important;
    padding-top:20px!important;
    padding-bottom:12px!important;
  }
  #footer .footer-grid>div{
    min-width:0!important;
    gap:5px!important;
  }
  #footer .footer-grid .about{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:0!important;
  }
  #footer .footer-grid .about .logo{
    grid-column:1!important;
    min-width:0!important;
    margin:0!important;
  }
  #footer .footer-grid .about .logo>b{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
    font-size:16px!important;
  }
  #footer .footer-grid .about .logo>span{
    margin-left:7px!important;
  }
  #footer .footer-grid .about .logo strong{
    font-size:15px!important;
    line-height:1.05!important;
  }
  #footer .footer-grid .about .logo small{
    font-size:5.5px!important;
    letter-spacing:.8px!important;
    margin-top:2px!important;
  }
  #footer .footer-grid .about p{
    grid-column:2!important;
    margin:0!important;
    font-size:8px!important;
    line-height:1.45!important;
  }
  #footer .footer-grid>div:not(.about){
    grid-column:auto!important;
  }
  #footer .footer-grid>div>b{
    margin:0 0 3px!important;
    font-size:9px!important;
    line-height:1.2!important;
  }
  #footer .footer-grid a{
    font-size:8px!important;
    line-height:1.3!important;
    overflow-wrap:anywhere!important;
  }
  #footer .footer-grid>div:last-child a:last-child{
    font-size:7px!important;
  }
  #footer .copyright{
    min-height:0!important;
    padding:8px 0 9px!important;
    gap:2px!important;
    font-size:7.5px!important;
    line-height:1.35!important;
  }
  #footer .copyright>span:first-child,
  #footer .copyright>span:last-child{
    width:100%!important;
    text-align:center!important;
  }
}

@media(max-width:390px){
  #footer .footer-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px 7px!important;
  }
  #footer .footer-grid .about{
    grid-column:1/-1!important;
  }
  #footer .footer-grid .about p{
    font-size:7.5px!important;
  }
  #footer .footer-grid>div>b{font-size:8.5px!important}
  #footer .footer-grid a{font-size:7.5px!important}
}

/* =========================================================
   S2NDCODE.VN V86 - COMPACT PRODUCT DETAIL ON MOBILE
   3 benefit cards in one horizontal row + Demo/Buy in one row.
   ========================================================= */
@media(max-width:720px){
  .product-benefits{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    margin:14px 0!important;
  }
  .product-benefits>div{
    min-width:0!important;
    min-height:82px!important;
    padding:9px 5px!important;
    gap:6px!important;
    border-radius:12px!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
  }
  .product-benefits .benefit-icon{
    width:30px!important;
    height:30px!important;
    border-radius:10px!important;
    margin:0 auto!important;
  }
  .product-benefits .benefit-icon svg{
    width:16px!important;
    height:16px!important;
  }
  .product-benefits>div>span{
    min-width:0!important;
    width:100%!important;
  }
  .product-benefits b{
    font-size:8.5px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  .product-benefits small{
    margin-top:3px!important;
    font-size:6.8px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }

  .product-action-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .product-action-row > .product-demo-btn,
  .product-action-row > .product-buy-btn{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    font-size:10.5px!important;
    flex:none!important;
    white-space:nowrap!important;
  }
  .product-demo-btn .demo-btn-icon{
    width:23px!important;
    height:23px!important;
    border-radius:8px!important;
  }
  .product-demo-btn .demo-btn-icon svg{
    width:13px!important;
    height:13px!important;
  }
  .product-buy-btn span{
    font-size:14px!important;
  }
}

@media(max-width:380px){
  .product-benefits{gap:5px!important}
  .product-benefits>div{padding:8px 4px!important;min-height:80px!important}
  .product-benefits b{font-size:8px!important}
  .product-benefits small{font-size:6.2px!important}
  .product-action-row > .product-demo-btn,
  .product-action-row > .product-buy-btn{font-size:9.5px!important;padding:0 5px!important}
}


/* =========================================================
   S2NDCODE.VN V88 - TYPOGRAPHY READABILITY PASS
   Increase text slightly on desktop and mobile for easier reading
   without changing the established card/grid layout.
   ========================================================= */
body{font-size:15px!important}
.topbar{font-size:13px!important}
.nav>nav a,nav a{font-size:14px}
.search input{font-size:13px!important}
.login,.signup{font-size:13px!important}
.badge{font-size:12px!important}
.hero-copy>p{font-size:16px!important}
.mini-perks b{font-size:12px!important}
.mini-perks small{font-size:10px!important}
.rating-row span,.rating-row b{font-size:12px!important}
.cat b{font-size:12px}
.cat small{font-size:9px}
.section-head span{font-size:11px!important}
.section-head p,.section-head>a{font-size:13px!important}
.product h3{font-size:15px}
.product-short{font-size:12px!important}
.product-cat-label,.thumb .flag{font-size:10px!important}
.price strong{font-size:17px}
.price del{font-size:12px}
.meta{font-size:11px}
.detail{font-size:12px}
.stats small{font-size:11px!important}
.review-grid header b{font-size:13px!important}
.review-grid header small,.review-grid p{font-size:13px!important}
.feature-grid h3,.guide-grid h3{font-size:16px}
.feature-grid p,.guide-grid p{font-size:12px!important}
.contact-card b{font-size:13px}
.contact-card small,.contact-card span{font-size:10px}
.footer-grid>div>b{font-size:13px!important}
.footer-grid a{font-size:11px!important}
.about p{font-size:12px!important}
.copyright{font-size:10px!important}
.product-summary h1{font-size:37px}
.product-lead{font-size:14px!important;line-height:1.65!important}
.product-rating{font-size:12px!important}
.product-price-box small,.product-price-box>span{font-size:11px!important}
.product-price-box strong{font-size:28px!important}
.product-benefits b{font-size:12px}
.product-benefits small{font-size:9px}
.product-demo-btn,.product-buy-btn{font-size:13px!important}
.product-safe{font-size:10px!important}
.product-section-title>span{font-size:10px!important}
.product-section-title h2{font-size:24px!important}
.product-description-text{font-size:13px!important;line-height:1.75!important}
.product-side-card h3{font-size:18px!important}
.product-side-card>div span,.product-side-card>div b,.product-side-card>a{font-size:11px!important}
.wallet-panel,.checkout-card,.owned-card{font-size:14px}
.wallet-panel h2,.checkout-card h2{font-size:20px!important}
.wallet-form label{font-size:12px!important}
.wallet-form input,.wallet-form textarea,.wallet-form select{font-size:14px!important}
.wallet-form button,.orders-back{font-size:12px!important}
.wallet-table{font-size:12px!important}
.owned-body h2{font-size:18px}
.owned-body p{font-size:12px}
.auth-dialog input,.auth-dialog button,.auth-dialog label{font-size:13px}
.mobile-drawer-links a{font-size:15px}
.mobile-drawer-account a{font-size:13px}

@media(max-width:720px){
  body{font-size:15px!important}
  .logo strong{font-size:17px!important}
  .logo small{font-size:7px!important}
  .hero-copy>p{font-size:15px!important}
  .badge{font-size:9.5px!important}
  .cat b{font-size:11px!important}
  .cat small{font-size:8.5px!important}
  .section-head h2{font-size:29px!important}
  .section-head p{font-size:12px!important}
  .product h3{font-size:14px!important;line-height:1.4!important}
  .product-cat-label{font-size:9px!important}
  .price strong{font-size:16px!important}
  .price del{font-size:10px!important}
  .meta{font-size:9px!important}
  .detail{font-size:10.5px!important}
  .feature-grid h3{font-size:16px!important}
  .feature-grid p{font-size:11px!important;line-height:1.55!important}
  .guide-grid h3{font-size:13px!important}
  .guide-grid p{font-size:10px!important;line-height:1.55!important}
  #contact .contact-card small,.contact-card small{font-size:8.5px!important}
  #contact .contact-card b,.contact-card b{font-size:10px!important}
  #contact .contact-card span,.contact-card span{font-size:8.5px!important}
  #footer .footer-grid .about .logo strong{font-size:16px!important}
  #footer .footer-grid .about .logo small{font-size:6px!important}
  #footer .footer-grid .about p{font-size:9px!important}
  #footer .footer-grid>div>b{font-size:10px!important}
  #footer .footer-grid a{font-size:9px!important}
  #footer .footer-grid>div:last-child a:last-child{font-size:8px!important}
  #footer .copyright{font-size:8.5px!important}
  .product-summary h1{font-size:29px!important}
  .product-lead{font-size:13px!important}
  .product-rating{font-size:10px!important}
  .product-price-box small,.product-price-box>span{font-size:10px!important}
  .product-price-box strong{font-size:27px!important}
  .product-benefits b{font-size:9.5px!important}
  .product-benefits small{font-size:7.6px!important}
  .product-action-row > .product-demo-btn,
  .product-action-row > .product-buy-btn{font-size:11.5px!important}
  .product-safe{font-size:9px!important}
  .product-description-text{font-size:12px!important}
  .product-side-card>div span,.product-side-card>div b,.product-side-card>a{font-size:10px!important}
  .mobile-drawer-links a{font-size:15px!important}
  .mobile-drawer-account a{font-size:13px!important}
}

@media(max-width:380px){
  .product-benefits b{font-size:9px!important}
  .product-benefits small{font-size:7px!important}
  .product-action-row > .product-demo-btn,
  .product-action-row > .product-buy-btn{font-size:10.5px!important}
  #footer .footer-grid .about p{font-size:8.5px!important}
  #footer .footer-grid>div>b{font-size:9.5px!important}
  #footer .footer-grid a{font-size:8.5px!important}
}


/* v91 — premium checkout redesign */
.checkout-shell-premium{width:min(1180px,calc(100% - 34px));margin:42px auto 70px}
.checkout-shell-premium>.logo{display:flex;width:max-content;margin:0 auto 28px}
.checkout-card-premium{padding:0!important;overflow:hidden;background:linear-gradient(145deg,#ffffff,#faf9ff)!important}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.15fr) 370px;gap:0}
.checkout-main{padding:34px 34px 28px}
.checkout-side{padding:26px;border-left:1px solid rgba(105,91,231,.12);background:linear-gradient(180deg,#f9fbff 0%,#f8f5ff 100%)}
.checkout-heading h1{margin:8px 0 10px!important;font-size:38px!important;line-height:1.12;letter-spacing:-1.1px;color:#0b1f49}
.checkout-heading p{margin:0;color:#72819a;font-size:15px;line-height:1.7}
.checkout-badges{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 22px}
.checkout-badges span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(110,95,237,.16);background:linear-gradient(135deg,#f7fbff,#f8f4ff);color:#304a71;font-size:12px;font-weight:800}
.checkout-panel{padding:22px;border:1px solid rgba(102,98,214,.16);border-radius:22px;background:linear-gradient(145deg,#fff,#fbfcff 58%,#f8f5ff);box-shadow:0 18px 45px rgba(35,55,100,.07)}
.checkout-form{display:grid;gap:16px}
.checkout-coupon>span{display:block;margin-bottom:9px;color:#203858;font-size:13px;font-weight:800}
.checkout-input{display:flex;align-items:center;height:56px;border:1px solid #d8e2f0;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(34,75,130,.06);transition:.2s}
.checkout-input:focus-within{border-color:#7c67f2;box-shadow:0 0 0 4px rgba(110,90,240,.09),0 14px 32px rgba(52,76,141,.10)}
.checkout-input-icon{width:52px;height:52px;display:grid;place-items:center;flex:none;color:#735df1}
.checkout-input-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.checkout-input input{height:100%;min-width:0;flex:1;border:0;outline:0;background:transparent;padding:0 16px 0 0;color:#10284e;font:inherit;font-size:14px}
.checkout-note{padding:13px 15px;border-radius:15px;font-size:13px;line-height:1.6;border:1px solid transparent}
.checkout-note strong{font-size:15px}
.checkout-note.warning{background:#fff6e9;border-color:#ffd9a7;color:#8a5a00}
.checkout-note.success{background:#eefbf4;border-color:#c4edd6;color:#0b7a4c}
.checkout-submit{width:100%;min-height:56px;border:0;border-radius:16px;color:#fff;text-decoration:none;font-weight:900;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;background:linear-gradient(110deg,#1a8eff,#6658f3 56%,#cc50d0);box-shadow:0 16px 34px rgba(84,75,215,.24);transition:.22s}
.checkout-submit:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(84,75,215,.30)}
.checkout-submit b{font-size:18px}
.checkout-submit-icon{width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.17);display:grid;place-items:center;flex:none}
.checkout-submit-icon svg{width:16px;height:16px;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.checkout-safe{margin:0;color:#72819a;font-size:12px;line-height:1.6}
.checkout-success-box{display:grid;gap:14px}
.checkout-secondary{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:15px;text-decoration:none;font-weight:800;font-size:14px;color:#574ed9;background:linear-gradient(145deg,#f8fbff,#f4efff);border:1px solid rgba(108,92,239,.18)}
.checkout-actions{display:flex;justify-content:space-between;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid #edf2f7}
.checkout-actions a{display:inline-flex;align-items:center;gap:8px;color:#0878f6;text-decoration:none;font-size:13px;font-weight:800}
.checkout-summary-card{display:grid;gap:16px}
.checkout-thumb{height:190px;border-radius:20px;overflow:hidden;border:1px solid rgba(110,95,237,.14);background:linear-gradient(145deg,#eef7ff,#f5efff)}
.checkout-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.checkout-summary-label{display:inline-flex;padding:8px 12px;border-radius:999px;background:linear-gradient(120deg,#e9f4ff,#efe9ff);color:#5f54de;font-size:11px;font-weight:900;letter-spacing:.6px}
.checkout-summary-head h2{margin:10px 0 6px;color:#102b53;font-size:24px;line-height:1.25}
.checkout-summary-head p{margin:0;color:#75869e;font-size:12px;line-height:1.6}
.checkout-summary-list{padding:6px 0 0}
.checkout-summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid rgba(133,146,170,.16);font-size:13px;color:#5f728d}
.checkout-summary-row b{font-size:17px;color:#0b2d53}
.checkout-summary-row.discount b{color:#db4a65}
.checkout-summary-row.total b{color:#0878f6;font-size:24px}
.checkout-summary-row.balance b{color:#0b8b59}
.checkout-mini-benefits{display:grid;gap:10px;padding-top:4px}
.checkout-mini-benefits div{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:15px;background:rgba(255,255,255,.8);border:1px solid rgba(112,124,150,.14)}
.checkout-mini-benefits i{width:28px;height:28px;border-radius:999px;background:linear-gradient(135deg,#1a8eff,#6a58f4);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:900;flex:none}
.checkout-mini-benefits span{color:#334d72;font-size:12px;font-weight:700;line-height:1.45}
@media(max-width:980px){.checkout-grid{grid-template-columns:1fr}.checkout-side{border-left:0;border-top:1px solid rgba(105,91,231,.12)}.checkout-heading h1{font-size:32px!important}}
@media(max-width:720px){.checkout-shell-premium{width:calc(100% - 22px);margin:18px auto 34px}.checkout-shell-premium>.logo{margin-bottom:16px}.checkout-main{padding:20px 18px 18px}.checkout-side{padding:18px}.checkout-panel{padding:16px;border-radius:18px}.checkout-heading h1{font-size:26px!important;letter-spacing:-.6px}.checkout-heading p{font-size:13px}.checkout-badges{gap:8px;margin:16px 0 18px}.checkout-badges span{font-size:10px;padding:8px 10px}.checkout-coupon>span,.checkout-price,.checkout-summary-row,.checkout-actions a{font-size:12px}.checkout-input{height:50px;border-radius:14px}.checkout-input-icon{width:46px;height:46px}.checkout-input input{font-size:13px}.checkout-submit,.checkout-secondary{min-height:50px;font-size:13px;border-radius:14px}.checkout-submit b{font-size:16px}.checkout-safe{font-size:11px}.checkout-actions{flex-direction:column;align-items:stretch}.checkout-summary-head h2{font-size:20px}.checkout-summary-row b{font-size:15px}.checkout-summary-row.total b{font-size:21px}.checkout-thumb{height:160px}.checkout-mini-benefits div{padding:10px 11px}.checkout-mini-benefits span{font-size:11px}}

/* V91 - checkout redesign */
.checkout-page-v91{min-height:100vh;font-family:"Segoe UI",Arial,sans-serif;background:
radial-gradient(circle at 10% 14%,rgba(29,156,255,.11),transparent 26rem),
radial-gradient(circle at 90% 22%,rgba(126,82,245,.12),transparent 28rem),
linear-gradient(180deg,#f8fbff 0%,#f8f7ff 55%,#fbfdff 100%)!important;color:#102341}
.checkout-shell-v91{width:min(980px,calc(100% - 32px));margin:32px auto 60px}
.checkout-logo{margin:0 auto 20px!important;filter:drop-shadow(0 8px 18px rgba(62,80,160,.12))}
.checkout-card-v91{padding:0!important;overflow:hidden;border-radius:28px!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(103,94,213,.18)!important;box-shadow:0 28px 80px rgba(33,44,104,.13),0 0 0 5px rgba(255,255,255,.58)!important}
.checkout-v91-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 30px 24px;background:linear-gradient(120deg,#f7fcff 0%,#f7f4ff 52%,#fff6fb 100%);border-bottom:1px solid rgba(101,91,214,.12)}
.checkout-v91-head h1{margin:6px 0 5px!important;font-size:30px!important;letter-spacing:-.8px;color:#0d2347!important}.checkout-v91-head p{margin:0!important;font-size:13px;color:#72839d}.checkout-kicker{font-size:10px!important;letter-spacing:1.6px!important;font-weight:900!important;color:#4f63ef!important}
.checkout-secure-badge{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:999px;background:#fff;border:1px solid #dfe9f8;box-shadow:0 8px 20px rgba(48,70,140,.08);font-size:11px;font-weight:800;color:#49617f;white-space:nowrap}.checkout-secure-badge svg{width:18px;height:18px;stroke:#6358ee;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.checkout-v91-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:0}.checkout-product-panel{padding:28px 28px 30px;border-right:1px solid #edf1f7;background:linear-gradient(180deg,#fff,#fcfdff)}.checkout-payment-panel{padding:28px 30px 30px}
.checkout-product-card{display:flex;gap:16px;align-items:center;padding:14px;border-radius:18px;background:linear-gradient(145deg,#f7fbff,#f8f5ff);border:1px solid rgba(103,93,213,.13)}.checkout-product-thumb{width:126px;height:96px;flex:none;border-radius:14px;overflow:hidden;background:#e9eef9;box-shadow:0 10px 24px rgba(33,52,106,.11)}.checkout-product-thumb img{width:100%;height:100%;object-fit:cover;display:block}.checkout-product-copy>span{display:inline-block;margin-bottom:5px;font-size:9px;font-weight:900;letter-spacing:1px;color:#6a5bed}.checkout-product-copy h2{margin:0 0 7px!important;font-size:20px!important;line-height:1.2;color:#0c244a!important}.checkout-product-copy p{margin:0!important;font-size:11px!important;line-height:1.55!important;color:#73839a!important}
.checkout-trust-list{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}.checkout-trust-list>div{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;padding:11px 12px;border:1px solid #e8eef7;border-radius:14px;background:#fff}.checkout-trust-list b{font-size:12px;color:#193658}.checkout-trust-list small{font-size:10px;color:#8695a9;margin-top:2px}.checkout-trust-icon{grid-row:1/3;width:36px;height:36px;border-radius:11px;display:grid;place-items:center}.checkout-trust-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.checkout-trust-icon.purple{color:#6c58f4;background:#efeaff}.checkout-trust-icon.cyan{color:#0c9ec5;background:#e4faff}.checkout-trust-icon.pink{color:#d751a8;background:#fff0f8}
.checkout-summary-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.checkout-summary-title span{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#71839d}.checkout-summary-title b{font-size:10px;color:#6a5ce8;background:#f1eeff;padding:5px 8px;border-radius:999px}.checkout-price-v91{padding:13px 0!important;font-size:12px!important}.checkout-price-v91 b{font-size:17px!important}.checkout-price-v91.total{margin-top:2px;border-top:1px dashed #dce5f2!important;border-bottom:0;font-weight:800}.checkout-price-v91.total span{color:#172f52}.checkout-price-v91.total b{font-size:23px!important;color:#5e55ec!important}.checkout-price-v91.discount em{font-style:normal;font-size:9px;padding:3px 6px;border-radius:999px;background:#eefbf5;color:#16845d;margin-left:5px}.checkout-price-v91.discount b{color:#129067!important}
.checkout-balance-box{display:flex;align-items:center;gap:10px;margin:13px 0 15px;padding:12px 13px;border-radius:15px;border:1px solid}.checkout-balance-box.enough{background:linear-gradient(145deg,#effcf7,#f5fffb);border-color:#cceee1}.checkout-balance-box.short{background:linear-gradient(145deg,#fff7f7,#fffafa);border-color:#ffdada}.checkout-balance-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;box-shadow:0 8px 18px rgba(42,78,117,.08)}.checkout-balance-icon svg{width:18px;height:18px;stroke:#5864ed;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.checkout-balance-box>span:nth-child(2){display:grid;gap:2px;flex:1}.checkout-balance-box small{font-size:9px;color:#7c8da4;font-weight:700}.checkout-balance-box b{font-size:17px;color:#0d7f57}.checkout-balance-box.short b{color:#d84f5e}.checkout-balance-box i{font-style:normal;font-size:9px;font-weight:900;padding:5px 8px;border-radius:999px;background:#fff;color:#18825c}.checkout-balance-box.short i{color:#d34b59}
.checkout-form-v91{display:grid;gap:12px}.checkout-coupon-v91>span{display:block;margin-bottom:7px;font-size:11px;font-weight:800;color:#2d4667}.checkout-coupon-v91>span small{font-weight:600;color:#98a5b6}.checkout-coupon-field{height:48px;display:flex;align-items:center;border:1px solid #dbe5f2;border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 5px 16px rgba(31,97,146,.05)}.checkout-coupon-field:focus-within{border-color:#765ff0;box-shadow:0 0 0 4px rgba(108,88,239,.08)}.checkout-coupon-icon{width:44px;display:grid;place-items:center;color:#6c58ef}.checkout-coupon-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.checkout-coupon-field input{flex:1;height:100%;min-width:0;border:0;outline:0;background:transparent;padding:0 13px 0 0;font:inherit;font-size:13px;color:#18314f}
.checkout-confirm-btn{width:100%;height:52px;border:0;border-radius:14px;background:linear-gradient(110deg,#1b91ff,#6658f3 58%,#c84fd0);color:#fff;text-decoration:none;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 14px 28px rgba(83,75,215,.25);cursor:pointer;transition:.2s}.checkout-confirm-btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(83,75,215,.32)}.checkout-confirm-btn:disabled{cursor:not-allowed;background:linear-gradient(110deg,#aab7c7,#8f9bae);box-shadow:none}.checkout-confirm-btn b{font-size:18px}.checkout-confirm-icon{width:23px;height:23px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.16)}.checkout-confirm-icon svg{width:14px;height:14px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.checkout-note{margin:0!important;text-align:center;font-size:9px!important;color:#8a99ad!important;line-height:1.5!important}.checkout-topup-btn,.checkout-secondary-btn{height:45px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-size:11px;font-weight:900}.checkout-topup-btn{background:#fff6e9;color:#aa6e12;border:1px solid #ffe2b2}.checkout-secondary-btn{margin-top:10px;background:#f4f6fb;color:#536987;border:1px solid #e2e8f2}.checkout-message{margin:0 0 13px!important}
.checkout-v91-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 30px;border-top:1px solid #edf1f7;background:#fbfcff}.checkout-v91-footer a{font-size:10px;font-weight:800;text-decoration:none;color:#5d61e9}.checkout-v91-footer span{font-size:9px;color:#94a1b2}.success-action{background:linear-gradient(110deg,#17a071,#3d8bea)!important}
@media(max-width:780px){.checkout-shell-v91{width:min(100% - 20px,620px);margin:12px auto 40px}.checkout-logo{display:none!important}.checkout-card-v91{border-radius:22px!important}.checkout-v91-head{padding:22px 18px 19px;align-items:flex-start}.checkout-v91-head h1{font-size:25px!important}.checkout-v91-head p{font-size:11px!important}.checkout-secure-badge{padding:8px 10px;font-size:9px}.checkout-v91-grid{grid-template-columns:1fr}.checkout-product-panel{padding:18px;border-right:0;border-bottom:1px solid #edf1f7}.checkout-payment-panel{padding:20px 18px 22px}.checkout-product-thumb{width:104px;height:80px}.checkout-product-copy h2{font-size:17px!important}.checkout-trust-list{grid-template-columns:repeat(3,1fr);gap:7px}.checkout-trust-list>div{display:flex;flex-direction:column;text-align:center;padding:10px 6px;min-width:0}.checkout-trust-icon{width:32px;height:32px;margin-bottom:5px}.checkout-trust-list b{font-size:9px}.checkout-trust-list small{font-size:7.5px}.checkout-v91-footer{padding:14px 18px;flex-direction:column;align-items:flex-start;gap:5px}.checkout-v91-footer span{font-size:8px}}
@media(max-width:440px){.checkout-v91-head{gap:10px}.checkout-secure-badge span{display:none}.checkout-secure-badge{padding:8px}.checkout-product-card{gap:11px;padding:10px}.checkout-product-thumb{width:92px;height:72px}.checkout-product-copy h2{font-size:15px!important}.checkout-product-copy p{font-size:9.5px!important}.checkout-payment-panel{padding:18px 14px 20px}.checkout-trust-list b{font-size:8.5px}.checkout-trust-list small{display:none}}


/* =========================================================
   S2NDCODE.VN V106 - PREMIUM NAV GLOW + UNIFIED TYPOGRAPHY
   - Modern Inter type across the public storefront
   - Soft blue/purple pill glow on top navigation hover/active
   ========================================================= */
body,
button,
input,
select,
textarea,
.checkout-page-v91,
.signature,
.cat .cat-wp{
  font-family:"Inter","Segoe UI",Arial,sans-serif!important;
}

/* Keep the public header clean while giving navigation more presence. */
.nav>nav{
  gap:14px!important;
  overflow:visible;
}
.nav>nav a{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  line-height:1.15!important;
  padding:0 14px;
  border-radius:15px;
  color:#17243b;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:-.25px;
  transition:
    color .22s ease,
    transform .22s ease,
    text-shadow .22s ease,
    box-shadow .22s ease;
}
.nav>nav a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  border:1px solid rgba(108,91,246,0);
  background:
    radial-gradient(circle at 20% 20%,rgba(35,157,255,.12),transparent 55%),
    linear-gradient(120deg,rgba(69,154,255,.09),rgba(117,88,255,.11) 58%,rgba(255,95,169,.08));
  box-shadow:
    0 0 0 1px rgba(77,149,255,0),
    0 10px 28px rgba(86,91,236,0),
    inset 0 1px 0 rgba(255,255,255,.55);
  opacity:0;
  transform:scale(.93);
  transition:opacity .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  pointer-events:none;
}
.nav>nav a::after{
  content:""!important;
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  bottom:-20px!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#209cff 0%,#7758ff 58%,#f35fc7 100%)!important;
  box-shadow:0 0 10px rgba(86,106,255,.48),0 0 18px rgba(211,81,224,.24)!important;
  opacity:0;
  transform:scaleX(.35);
  transform-origin:center;
  transition:opacity .22s ease,transform .22s ease!important;
}
.nav>nav a:hover,
.nav>nav a:focus-visible,
.nav>nav a.on{
  color:#6256f2!important;
  transform:translateY(-1px);
  text-shadow:0 0 15px rgba(99,86,242,.24);
}
.nav>nav a:hover::before,
.nav>nav a:focus-visible::before,
.nav>nav a.on::before{
  opacity:1;
  transform:scale(1);
  border-color:rgba(102,91,239,.13);
  box-shadow:
    0 0 0 1px rgba(66,150,255,.05),
    0 10px 28px rgba(95,88,240,.12),
    0 0 24px rgba(48,156,255,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
}
.nav>nav a:hover::after,
.nav>nav a:focus-visible::after,
.nav>nav a.on::after{
  opacity:1!important;
  transform:scaleX(1)!important;
}

/* Slightly refined typography throughout storefront content. */
h1,h2,h3,h4,h5,h6,
.logo strong,
.section-head h2,
.product h3,
.contact-heading h2,
.wallet-hero h1,
.product-summary h1{
  font-family:"Inter","Segoe UI",Arial,sans-serif!important;
  font-feature-settings:"cv02" 1,"cv03" 1,"cv04" 1,"cv11" 1;
}
p,span,small,a,label,td,th,li{
  font-family:inherit;
}

@media(max-width:900px){
  .nav>nav a::after{bottom:-17px!important}
}

/* =========================================================
   V108 - HARD REFRESH / CLS STABILITY FIX
   Prevent visible jumps on Ctrl+F5 while fonts/assets are cold.
   ========================================================= */
html.s2-preload,
html.s2-preload body{scroll-behavior:auto!important}
html.s2-preload *,
html.s2-preload *::before,
html.s2-preload *::after{
  transition:none!important;
  animation:none!important;
}
img{max-width:100%}

/* Admin verified badge */
.verified-badge{display:inline-block;width:18px;height:18px;vertical-align:middle;margin-left:6px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(40,156,255,.28));}
.user-copy b,.user-dropdown-head b{display:inline-flex;align-items:center;gap:0;line-height:1.2;}

/* Contact icons refresh v110 */
#contact .contact-card, .contact-card{position:relative;overflow:hidden;}
#contact .contact-card::before, .contact-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.45),rgba(255,255,255,0) 35%,rgba(104,84,241,.04));pointer-events:none;}
#contact .contact-card>i, .contact-card>i{display:grid;place-items:center;border:1px solid rgba(99,88,235,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 18px rgba(73,94,160,.10)!important;}
#contact .contact-card>i svg, .contact-card>i svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block;}
#contact .contact-card>i .contact-letter, .contact-card>i .contact-letter{font-size:24px;line-height:1;font-weight:900;display:block;transform:translateY(-1px);}
#contact .contact-card-email>i{background:linear-gradient(145deg,#ecf8ff,#eef0ff)!important;color:#2f7ef7!important;}
#contact .contact-card-phone>i{background:linear-gradient(145deg,#e9fff6,#e8faff)!important;color:#0b9e7b!important;}
#contact .contact-card-zalo>i{background:linear-gradient(145deg,#eef4ff,#e8f7ff)!important;color:#1482ff!important;}
#contact .contact-card-facebook>i{background:linear-gradient(145deg,#edf2ff,#ebeaff)!important;color:#4d66ff!important;}
#contact .contact-card-facebook .contact-letter, .contact-card-facebook .contact-letter{font-size:26px;text-transform:none;}
#contact .contact-card-zalo .contact-letter, .contact-card-zalo .contact-letter{font-size:22px;}


/* User profile & password v111 */
.profile-page{min-height:100vh;background:linear-gradient(180deg,#f7f9fd 0,#f4f7fb 100%)}
.profile-wrap{max-width:1180px}
.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;padding:25px 27px;border:1px solid #e0e7f1;border-radius:22px;background:radial-gradient(circle at 0 0,rgba(31,168,255,.12),transparent 35%),radial-gradient(circle at 100% 100%,rgba(221,76,197,.10),transparent 34%),#fff;box-shadow:0 15px 42px rgba(31,63,105,.07)}
.profile-identity{display:flex;align-items:center;gap:16px;min-width:0}.profile-avatar{width:66px;height:66px;min-width:66px;border-radius:20px;display:grid;place-items:center;color:#fff;font-size:25px;font-weight:900;background:linear-gradient(135deg,#1aa7fa,#6959f5 58%,#d34fc8);box-shadow:0 13px 28px rgba(91,78,226,.22)}
.profile-kicker{display:block;color:var(--s2-primary,#6256F2);font-size:9px;font-weight:900;letter-spacing:1.4px}.profile-identity h1{display:flex;align-items:center;margin:5px 0 4px;font-size:28px;letter-spacing:-.8px;color:#102846}.profile-identity p{margin:0;color:#7b8ca4;font-size:12px}
.profile-quick-stats{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:10px}.profile-quick-stats>div{min-width:110px;padding:13px 15px;border:1px solid #e4e9f2;border-radius:14px;background:rgba(255,255,255,.82)}.profile-quick-stats small{display:block;color:#8b99ad;font-size:8px;font-weight:900;letter-spacing:.8px}.profile-quick-stats b{display:block;margin-top:5px;color:#183659;font-size:12px}
.profile-ok{color:#078b5d!important}.profile-warn{color:#c78112!important}.wallet-alert.warning{background:#fff8e7;color:#8a6314;border:1px solid #f5dda6}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.profile-panel{margin-bottom:0}.profile-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}.profile-panel-head h2{margin:0 0 4px}.profile-panel-head p{margin:0;color:#7b8ca3;font-size:11px}.profile-panel-icon{width:43px;height:43px;min-width:43px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#eef8ff,#eeeaff);color:#5f59ed;border:1px solid rgba(91,80,229,.12)}.profile-panel-icon.lock{background:linear-gradient(145deg,#fff2fa,#f4efff);color:#bb4caf}.profile-panel-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.profile-form{gap:15px}.profile-note{padding:11px 12px;border-radius:10px;background:#f6f8fc;color:#718299;font-size:10px;line-height:1.55;border:1px solid #e8edf4}
.password-field{position:relative;margin-top:7px}.password-field input{margin-top:0!important;padding-right:66px!important}.password-toggle{position:absolute!important;right:7px;top:50%;transform:translateY(-50%);width:auto!important;height:32px!important;padding:0 10px!important;border:0!important;border-radius:8px!important;background:#eef3fb!important;color:#4c6383!important;font-size:9px!important;font-weight:900!important;box-shadow:none!important}.password-toggle:hover{background:#e6edfa!important}
.profile-account-info{margin-top:20px;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:20px}.profile-account-info>div span{display:block;color:#8a99ad;font-size:9px;font-weight:800;margin-bottom:4px}.profile-account-info>div b{font-size:11px;color:#294667}.profile-account-info>a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border-radius:11px;background:#fff0f2;color:#bf374c;text-decoration:none;font-size:10px;font-weight:900;border:1px solid #ffd5dc}
.mobile-nav a.on{color:var(--s2-primary,#6256F2);font-weight:900}
@media(max-width:900px){.profile-hero{align-items:flex-start;flex-direction:column}.profile-quick-stats{width:100%;grid-template-columns:repeat(3,1fr)}.profile-grid{grid-template-columns:1fr}.profile-account-info{grid-template-columns:1fr 1fr}.profile-account-info>a{grid-column:1/-1}}
@media(max-width:720px){.profile-wrap{width:calc(100% - 24px)}.profile-hero{padding:18px;border-radius:18px}.profile-avatar{width:54px;height:54px;min-width:54px;border-radius:16px;font-size:21px}.profile-identity{align-items:flex-start}.profile-identity h1{font-size:22px;flex-wrap:wrap}.profile-identity p{font-size:10px}.profile-quick-stats{grid-template-columns:1fr;gap:7px}.profile-quick-stats>div{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:10px 12px}.profile-quick-stats b{margin:0}.profile-panel{padding:17px}.profile-panel-head{align-items:flex-start}.profile-account-info{grid-template-columns:1fr}.profile-account-info>a{grid-column:auto}}

/* ===== V112 - Favorites, verified reviews, tickets, account security ===== */
.product{position:relative}
.product-favorite-form{position:absolute;right:10px;top:10px;z-index:8;margin:0}
.product-favorite-btn{position:absolute;right:10px;top:10px;z-index:8;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(84,103,157,.14);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:#8b96aa;text-decoration:none;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 7px 20px rgba(44,65,105,.12);transition:.2s}
.product-favorite-form .product-favorite-btn{position:static}
.product-favorite-btn:hover,.product-favorite-btn.is-favorite{transform:translateY(-2px) scale(1.04);color:#f24682;border-color:rgba(242,70,130,.22);box-shadow:0 10px 25px rgba(242,70,130,.17)}
.product-detail-favorite{margin:0;display:flex}.product-save-btn{height:48px;border-radius:11px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e2dffa;background:#fff;color:#735ce9;text-decoration:none;font:inherit;font-size:11px;font-weight:900;cursor:pointer;white-space:nowrap;transition:.2s}.product-save-btn:hover,.product-save-btn.is-favorite{background:#fff1f7;color:#ed407f;border-color:#ffc5da;box-shadow:0 9px 24px rgba(235,61,124,.12)}
.favorites-hero{align-items:center}.favorites-count{min-width:130px;text-align:center;padding:15px 20px;border:1px solid #e1e8f5;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(42,67,104,.06)}.favorites-count small{display:block;color:#8a97ab;font-size:9px;font-weight:900;letter-spacing:1px}.favorites-count b{display:inline-block;font-size:28px;color:#6558ec;margin-top:2px}.favorites-count span{font-size:11px;color:#7988a0;margin-left:3px}.favorite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.favorite-card{display:grid;grid-template-columns:190px 1fr;min-width:0;border:1px solid #e0e8f3;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 12px 34px rgba(32,63,101,.07)}.favorite-thumb{min-height:190px;background:#eef5ff}.favorite-thumb img{width:100%;height:100%;object-fit:cover;display:block}.favorite-body{padding:18px;min-width:0}.favorite-body>span{font-size:9px;color:#6a59e8;font-weight:900;text-transform:uppercase;letter-spacing:.8px}.favorite-body h2{font-size:17px;margin:6px 0}.favorite-body h2 a{color:#10274a;text-decoration:none}.favorite-body p{min-height:38px;margin:0 0 12px;color:#718099;font-size:11px;line-height:1.6}.favorite-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.favorite-meta b{font-size:18px;color:#0c4f9e}.favorite-meta small{font-size:9px;color:#7b8aa0}.favorite-actions{display:flex;gap:8px;align-items:center}.favorite-actions .product-buy-btn{height:38px;min-width:0;flex:1}.favorite-actions form{margin:0}.favorite-remove{height:38px;border-radius:10px;border:1px solid #ffd2df;background:#fff6f9;color:#e34573;font:inherit;font-size:10px;font-weight:900;padding:0 12px;cursor:pointer}
.ticket-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:16px;margin-bottom:28px}.ticket-create>p{margin-top:-4px;color:#7889a2;font-size:11px}.ticket-guide-list{display:grid;gap:12px;margin-top:18px}.ticket-guide-list>div{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #e6ebf4;border-radius:13px;background:#fafcff}.ticket-guide-list>div>b{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eeebff;color:#6759ed;font-size:10px}.ticket-guide-list span{display:flex;flex-direction:column}.ticket-guide-list strong{font-size:11px;color:#1c3457}.ticket-guide-list small{font-size:9px;color:#8290a6;margin-top:2px}.ticket-list{margin-top:10px}.ticket-section-head{margin-bottom:14px}.ticket-card{border:1px solid #e0e8f4;border-radius:18px;background:#fff;padding:18px;margin-bottom:12px;box-shadow:0 10px 30px rgba(39,68,106,.06)}.ticket-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid #eef2f7;padding-bottom:12px}.ticket-card-head span{font-size:9px;color:#7564e9;font-weight:900;letter-spacing:.4px}.ticket-card-head h3{margin:4px 0 2px;font-size:16px;color:#162d50}.ticket-card-head small{color:#7d8ca2;font-size:9px}.ticket-status{padding:7px 10px;border-radius:999px;font-size:9px;white-space:nowrap}.ticket-status.open{background:#fff0f2;color:#d94a60}.ticket-status.answered{background:#eafbf4;color:#0a9568}.ticket-status.closed{background:#eef1f5;color:#778397}.ticket-message,.ticket-reply{padding:13px 0}.ticket-message>span,.ticket-reply>span{display:block;font-size:9px;font-weight:900;color:#7d8da4;margin-bottom:5px}.ticket-message p,.ticket-reply p{margin:0;color:#415675;font-size:11px;line-height:1.65}.ticket-reply{margin-top:3px;padding:13px;border-radius:13px;background:linear-gradient(120deg,#f1efff,#eef9ff);border:1px solid #e3e2fb}.ticket-reply>span{color:#6257df}.ticket-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid #eef2f7}.ticket-card-foot small{font-size:9px;color:#8b98aa}.ticket-card-foot form{margin:0}.ticket-close{border:0;background:transparent;color:#d95669;font:inherit;font-size:9px;font-weight:900;cursor:pointer}
.product-reviews{padding:16px 0 64px}.reviews-layout{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:16px}.review-form-card,.review-list-card{border:1px solid #dfe8f3;border-radius:18px;background:#fff;padding:20px;box-shadow:0 12px 36px rgba(34,64,100,.06)}.review-form-card h3,.review-list-head h3{margin:0;color:#162e50;font-size:17px}.review-form-card>p{color:#798aa2;font-size:11px;line-height:1.6}.product-review-form{display:grid;gap:12px;margin-top:16px}.product-review-form label{display:grid;gap:6px;font-size:10px;font-weight:800;color:#435875}.product-review-form select,.product-review-form textarea{width:100%;border:1px solid #dbe5f1;border-radius:11px;background:#fbfdff;padding:11px 12px;font:inherit;color:#233b5d;outline:0}.product-review-form textarea{min-height:115px;resize:vertical}.product-review-form select:focus,.product-review-form textarea:focus{border-color:#8e7df7;box-shadow:0 0 0 3px rgba(111,91,236,.08)}.product-review-form button{height:42px;border:0;border-radius:11px;background:linear-gradient(115deg,#1fa5f8,#6f5af0 60%,#d957c8);color:#fff;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.review-list-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid #edf1f6}.review-list-head>b{color:#f2a600}.review-empty{padding:24px 0;color:#8190a5;font-size:11px}.customer-review{padding:15px 0;border-bottom:1px solid #edf1f6}.customer-review:last-child{border-bottom:0}.customer-review-head{display:flex;align-items:center;gap:10px}.review-avatar{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#23aafd,#6b5cf2);color:#fff;font-weight:900;flex:none}.customer-review-head>div{display:flex;flex:1;min-width:0;flex-direction:column}.customer-review-head>div>b{display:flex;align-items:center;font-size:11px;color:#1d3558}.customer-review-head small{font-size:8.5px;color:#8a98aa;margin-top:2px}.customer-review-head>strong{color:#ffab00;font-size:11px;letter-spacing:1px;white-space:nowrap}.customer-review>p{margin:10px 0 0 47px;color:#536783;font-size:11px;line-height:1.65}.profile-access-panel{margin-top:16px}.profile-access-panel .profile-panel-head{margin-bottom:14px}.profile-security-note{margin-top:12px;padding:11px 13px;border-radius:11px;background:#fff8e9;color:#78601e;font-size:10px}.profile-security-note a{color:#6657e6;font-weight:900}.owned-actions{display:flex;gap:8px;align-items:center}.owned-actions .product-buy-btn{flex:1}.owned-support-btn{height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:0 13px;border:1px solid #dfe3f8;background:#f8f7ff;color:#6758e5;text-decoration:none;font-size:10px;font-weight:900;white-space:nowrap}
@media(max-width:900px){.favorite-grid{grid-template-columns:1fr}.ticket-layout,.reviews-layout{grid-template-columns:1fr}}
@media(max-width:720px){.product-favorite-btn{width:31px;height:31px;font-size:16px}.favorite-card{grid-template-columns:112px 1fr}.favorite-thumb{min-height:160px}.favorite-body{padding:13px}.favorite-body h2{font-size:14px}.favorite-body p{min-height:0}.favorite-meta{align-items:flex-start;flex-direction:column}.favorite-actions{flex-wrap:wrap}.favorites-count{min-width:95px;padding:11px}.favorites-count b{font-size:22px}.ticket-card{padding:14px}.ticket-card-head{flex-direction:column}.ticket-card-foot{align-items:flex-start;flex-direction:column}.customer-review>p{margin-left:0}.review-form-card,.review-list-card{padding:15px}.product-save-btn{height:43px}.product-action-row{flex-wrap:wrap}.profile-access-table{overflow-x:auto}.profile-access-table table{min-width:650px}.owned-actions{flex-direction:column;align-items:stretch}.owned-support-btn{width:100%}}
@media(max-width:720px){.mobile-nav.six{grid-template-columns:repeat(6,1fr)}.mobile-nav.six a{font-size:16px}.mobile-nav.six small{font-size:7px}}

/* V113 - Nạp tiền tự động */
.auto-deposit-order{border:1px solid rgba(94,82,238,.18)!important;background:linear-gradient(135deg,#fff 0%,#f8fbff 52%,#fbf7ff 100%)!important;box-shadow:0 18px 52px rgba(55,70,150,.10)!important}
.auto-deposit-order.is-paid{border-color:#bfead5!important;background:linear-gradient(135deg,#fff,#f1fff8)!important}
.auto-deposit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.auto-deposit-head h2{margin:3px 0 5px!important}.auto-deposit-head p{margin:0!important;color:#7688a0;font-size:12px;line-height:1.6}.auto-kicker{display:block;color:#6557ef;font-weight:900;font-size:9px;letter-spacing:1.3px}.auto-deposit-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}.auto-bank-box,.auto-transfer-info{border:1px solid #e0e7f1;border-radius:16px;background:#fff;padding:16px}.auto-bank-box{display:flex;align-items:center;gap:14px}.auto-bank-box img{width:132px;height:132px;object-fit:cover;border-radius:14px;border:1px solid #edf1f6;background:#fff}.auto-bank-box>div:last-child{min-width:0}.auto-bank-box small,.auto-transfer-info small{display:block;color:#8696aa;font-size:9px;font-weight:900;letter-spacing:.6px}.auto-bank-box b{display:block;margin:4px 0;color:#18375e;font-size:16px}.auto-bank-box span{color:#62758f;font-size:11px}.auto-qr-empty{width:132px;height:132px;display:grid;place-items:center;border-radius:14px;background:#f3f6fb;color:#8291a7;font-weight:900}.auto-transfer-info{display:grid;gap:10px}.auto-transfer-info>div{position:relative;padding:12px 92px 12px 13px;border-radius:12px;background:#f7f9fd;border:1px solid #edf1f6}.auto-transfer-info strong{display:block;margin-top:4px;color:#102d57;font-size:18px;word-break:break-word}.auto-transfer-info .transfer-code{font-size:21px;color:#6757ef;letter-spacing:.7px}.copy-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:1px solid #dce3ef;border-radius:9px;background:#fff;color:#5d55dc;padding:8px 10px;font-size:10px;font-weight:800;cursor:pointer}.copy-btn:hover{border-color:#a99df7;box-shadow:0 6px 18px rgba(96,82,236,.12)}.auto-note{display:block;margin-top:5px;color:#8a6b28!important;font-size:9px!important}.auto-wait{margin-top:14px;padding:11px 13px;border-radius:11px;background:#eef6ff;color:#34618f;font-size:11px;font-weight:800}.auto-wait>span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2d8ff5;margin-right:7px;box-shadow:0 0 0 6px rgba(45,143,245,.10);animation:autoPulse 1.2s infinite}.auto-result{margin:14px 0 0!important}.auto-bank-tag{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:8px!important;font-weight:900;vertical-align:middle;margin-left:5px}.auto-bank-tag.on{background:#e8faf2;color:#08764a}.auto-bank-tag.off{background:#f0f2f6;color:#718098}.wallet-status.expired{background:#f0f2f6;color:#6f7c90}@keyframes autoPulse{50%{opacity:.35;transform:scale(.82)}}
@media(max-width:760px){.auto-deposit-head{flex-direction:column}.auto-deposit-grid{grid-template-columns:1fr}.auto-bank-box{align-items:flex-start}.auto-bank-box img,.auto-qr-empty{width:108px;height:108px}.auto-transfer-info>div{padding-right:78px}.copy-btn{font-size:9px;padding:7px}.auto-transfer-info strong{font-size:16px}.auto-transfer-info .transfer-code{font-size:18px}}


/* =========================================================
   S2NDCODE.VN V115 - MOBILE HERO TITLE FORCE 2 LINES
   ========================================================= */
@media (max-width:720px){
  .hero h1{
    width:max-content!important;
    max-width:100%!important;
    font-size:clamp(20px,5.6vw,28px)!important;
    line-height:1.14!important;
    letter-spacing:-1px!important;
    margin-top:15px!important;
  }
  .hero-title-line{
    display:block!important;
    white-space:nowrap!important;
  }
}


/* =========================================================
   S2NDCODE.VN V116 - MOBILE MINI PERKS EQUAL ALIGNMENT
   ========================================================= */
.mini-perks b>strong{font:inherit;color:inherit;}
@media (max-width:720px){
  .mini-perks{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  .mini-perks>span{
    width:100%!important;
    height:116px!important;
    min-height:116px!important;
    padding:10px 8px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:7px!important;
  }
  .mini-perks>span>i{
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    min-height:29px!important;
    margin:0!important;
    flex:none!important;
  }
  .mini-perks>span>b{
    width:100%!important;
    display:block!important;
    margin:0!important;
    line-height:1.2!important;
  }
  .mini-perks>span>b>strong{
    display:block!important;
    min-height:30px!important;
    font-size:10px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }
  .mini-perks>span>b>small{
    display:block!important;
    margin-top:4px!important;
    font-size:8px!important;
    line-height:1.25!important;
  }
}

/* =========================================================
   S2NDCODE.VN V117 - CENTER FAVORITE BUTTON ON MOBILE
   ========================================================= */
@media (max-width:720px){
  .product-action-row > .product-detail-favorite{
    grid-column:1 / -1!important;
    width:calc(50% - 4px)!important;
    justify-self:center!important;
    margin:0!important;
  }
  .product-action-row > .product-detail-favorite .product-save-btn{
    width:100%!important;
  }
  .product-action-row > .product-save-btn{
    grid-column:1 / -1!important;
    width:calc(50% - 4px)!important;
    justify-self:center!important;
  }
}


/* =========================================================
   S2NDCODE.VN V118 - MOBILE AUTH BUTTONS UPPERCASE
   ========================================================= */
@media (max-width:720px){
  .mobile-drawer-account a{
    text-transform:uppercase!important;
    font-weight:800!important;
    letter-spacing:.15px;
  }
}


/* =========================================================
   S2NDCODE.VN V119 - MOBILE CATEGORY CARDS EVEN + NO CLIP
   ========================================================= */
@media (max-width:720px){
  .cat-zone{
    padding-left:0!important;
    padding-right:0!important;
    overflow:hidden!important;
  }

  .cat-zone .wrap.categories,
  .cat-zone .categories{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:10px 12px 12px!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-padding-left:12px!important;
    scroll-padding-right:12px!important;
  }

  .cat-zone .cat{
    box-sizing:border-box!important;
    flex:0 0 calc((100% - 24px) / 4)!important;
    width:calc((100% - 24px) / 4)!important;
    min-width:calc((100% - 24px) / 4)!important;
    max-width:calc((100% - 24px) / 4)!important;
    min-height:76px!important;
    height:76px!important;
    padding:7px 4px!important;
    gap:5px!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    scroll-snap-align:start!important;
  }

  .cat-zone .cat i,
  .cat-zone .cat .cat-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    margin:0 auto!important;
  }

  .cat-zone .cat > span{
    width:100%!important;
    min-width:0!important;
    display:block!important;
    text-align:center!important;
  }

  .cat-zone .cat b{
    display:block!important;
    width:100%!important;
    font-size:9.5px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
  }

  .cat-zone .cat small{
    display:none!important;
  }
}


/* =========================================================
   S2NDCODE.VN V121 - FIX MOBILE MINI PERKS WITHOUT OVERLAP
   ========================================================= */
@media (max-width:720px){
  .mini-perks{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:96px!important;
    gap:8px!important;
    margin-bottom:18px!important;
    align-items:stretch!important;
    overflow:visible!important;
  }

  .mini-perks > span{
    box-sizing:border-box!important;
    width:100%!important;
    height:96px!important;
    min-height:96px!important;
    padding:8px 5px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  .mini-perks > span > i{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    min-height:27px!important;
    margin:0 auto!important;
    flex:none!important;
  }

  .mini-perks > span > b{
    display:block!important;
    width:100%!important;
    margin:0!important;
    text-align:center!important;
    line-height:1!important;
  }

  .mini-perks > span > b > strong{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    font-size:8.2px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:-.18px!important;
    white-space:nowrap!important;
  }

  .mini-perks > span > b > small{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    margin-top:5px!important;
    font-size:0!important;
    line-height:1!important;
    white-space:nowrap!important;
    color:#7a8aa0!important;
    text-align:center!important;
  }

  .mini-perks > span > b > small::before{
    content:attr(data-mobile-text);
    font-size:6.9px!important;
    line-height:1!important;
    font-weight:500!important;
  }

  .hero-btns{
    position:relative!important;
    clear:both!important;
    margin-top:0!important;
  }
}