@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@400;500;600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
@font-face {
    font-family: 'Ethnocentric';
    src: url('Ethnocentric-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root{
  --bg:#05040a; --panel:rgba(9,7,18,.82); --line:rgba(185,87,255,.22);
  --purple:#9b35ff; --purple2:#d06bff; --text:#fff; --muted:#b9b4c3;
}
*{box-sizing:border-box;margin:0;   user-select: none;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
  min-height:100vh;
}
button,a{font:inherit}
a{text-decoration:none;color:inherit}
.site{
  min-height:100vh;
  background:
    radial-gradient(circle at 75% 28%,rgba(144,42,255,.12),transparent 28%),
    linear-gradient(180deg,#05040a,#08060e 65%,#05040a);
}
.header{
  height:76px;
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  top:0;
  display:flex;
  align-items:center;
  padding:0 3%;
  background:linear-gradient(180deg,rgba(2,2,5,.78),rgba(2,2,5,.16));
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
}
.logo{
  font-weight:900;line-height:.78;letter-spacing:-2px;font-size:24px;width:240px;
  text-transform:uppercase;
}
.logo span{display:block;color:#fff}
.logo i{display:block;color:#b33cff;font-size:19px;font-style:italic;letter-spacing:-1px;margin-left:25px}
.logo small{display:block;font-size:7px;letter-spacing:5px;color:#ddd;margin:8px 0 0 32px}
.nav{display:flex;gap:48px;align-items:center;justify-content:center;flex:1}
.nav a{font-size:14px;color:#ddd;position:relative;padding:28px 0;transition:.25s}
.nav a:hover,.nav a.active{color:#c65cff}
.nav a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#b83cff;box-shadow:0 0 14px #b83cff;
}
.login{
  width:166px;height:44px;border:1px solid #9e42ff;border-radius:7px;
  background:rgba(130,25,255,.08);color:#fff;cursor:pointer;
  box-shadow:0 0 22px rgba(157,50,255,.12);transition:.25s;
}
.login:hover{background:rgba(157,50,255,.2);box-shadow:0 0 28px rgba(157,50,255,.3)}
.menu{display:none;background:none;border:0;color:#fff;font-size:26px}

.hero{
  position:relative;
  min-height:calc(100vh - 76px);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:110px 4% 80px;
  overflow:hidden;
}

.content{
  position:relative;
  z-index:3;
  max-width:630px;
  width:100%;
  text-align:center;
}
.hero-art{
  position:absolute;inset:0;background-image:
    linear-gradient(90deg,rgba(3,2,7,.84) 0%,rgba(3,2,7,.32) 43%,rgba(3,2,7,.22) 100%),
    linear-gradient(0deg,rgba(5,4,10,.82) 0%,transparent 25%,rgba(4,2,8,.18) 100%),
    url("hero.png");
  background-size:cover;background-position:center top;filter:saturate(1.03);
  z-index:0;
}
.hero:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:160px;
  background:linear-gradient(transparent,var(--bg));z-index:1;
}
.content{position:relative;z-index:3;max-width:630px}
.kicker{letter-spacing:7px;font-size:15px;color:#fff;margin-bottom:30px}
.title{
  font-size:clamp(70px,8vw,124px);font-weight:950;line-height:.74;
  letter-spacing:-6px;text-transform:uppercase;
  text-shadow:0 8px 30px #000;
}
.script{
  color:#a83cff;font-size:clamp(52px,6vw,90px);font-style:italic;
  font-weight:900;line-height:.9;letter-spacing:-5px;margin-left:0;
  text-shadow:0 0 24px rgba(166,55,255,.55);
}
.mp{
  margin:22px 0 30px 0;letter-spacing:11px;font-weight:800;font-size:18px;color: #fff000;
}
.desc{
  max-width:725px;color:#ddd;line-height:1.8;font-size:16px;
 padding-left:18px;margin-bottom:36px;
}
.actions{
    display:flex;
    gap:10px;
    width:100%;
    margin-top:28px;
}

.actions .btn{
    flex:1;
    min-width:0;
    height:56px;
    padding:0 12px;
    font-size:13px;
}
.btn{
  height:58px;padding:0 38px;border-radius:7px;border:1px solid #a840ff;
  color:#fff;background:transparent;cursor:pointer;font-weight:800;
  transition:.25s;display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.btn.primary{
  background:linear-gradient(135deg,#7d1df0,#c247ff);
  box-shadow:0 0 30px rgba(166,54,255,.38);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(166,54,255,.35)}
.server{
  position:absolute;z-index:4;right:3.5%;top:225px;width:260px;
  padding:25px;border-radius:18px;background:rgba(9,6,18,.78);
  border:1px solid rgba(186,71,255,.42);backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 35px rgba(146,35,255,.08);
}
.server-head{display:flex;align-items:center;gap:10px;font-size:15px}
.dot{width:8px;height:8px;border-radius:50%;background:#59ef7b;box-shadow:0 0 12px #59ef7b}
.online{font-size:52px;font-weight:900;color:#b04cff;line-height:1;margin-top:22px}
.online small{font-size:25px;color:#aaa;font-weight:500}
.label{font-size:11px;color:#aaa;margin-top:8px}
.sep{height:1px;background:rgba(255,255,255,.12);margin:20px 0}
.connect{font-size:14px;display:flex;align-items:center;gap:10px}

.ai{
  position:absolute;right:3%;bottom:108px;z-index:5;width:265px;
  border:1px solid rgba(170,69,255,.35);background:rgba(8,5,15,.84);
  backdrop-filter:blur(14px);border-radius:18px;padding:20px;
  box-shadow:0 15px 50px rgba(0,0,0,.5);
}
.ai-row{display:flex;align-items:center;gap:13px}
.bot{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#6717bc,#c14cff);box-shadow:0 0 20px rgba(185,69,255,.45);
  font-weight:900;
}
.ai strong{font-size:14px}.ai p{font-size:12px;color:#aaa;margin-top:4px}
.ai button{width:100%;margin-top:15px;height:40px;border:0;border-radius:7px;background:#7020d8;color:#fff;cursor:pointer}

.stats{
  position:relative;
  z-index:6;
  margin:-55px 3% 0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;background:rgba(8,6,14,.9);backdrop-filter:blur(20px);
  display:grid;grid-template-columns:repeat(3,1fr);padding:28px 5%;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.stat{display:flex;align-items:center;justify-content:center;gap:18px;min-height:74px}
.stat+.stat{border-left:1px solid rgba(255,255,255,.12)}
.icon{font-size:30px;color:#ad4cff}
.stat h3{font-size:27px}.stat p{font-size:11px;color:#999;margin-top:4px;letter-spacing:1px}
.footer{padding:70px 7% 30px;text-align:center;color:#777;font-size:12px}
.footer b{color:#b44cff}

.toast{
  position:fixed;right:22px;bottom:22px;z-index:50;max-width:320px;
  padding:15px 18px;background:#120b1c;border:1px solid #9b3cff;border-radius:10px;
  box-shadow:0 15px 40px #000;transform:translateY(120px);opacity:0;transition:.3s;
}
.toast.show{transform:none;opacity:1}

@media(min-width:901px){
  .hero{
    min-height:calc(100vh - 76px);
  }

  .stats{
    margin-top:-55px;
  }

  .footer{
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
}


.mobile-logo,.mobile-server-card,.mobile-features,.mobile-bottom-nav{display:none}

@media(max-width:900px){
  body{padding-bottom:92px;background:#05040a}
  .site{min-height:100vh;overflow:hidden}

  .header{
    position:absolute;
    height:86px;
    padding:0 14px;
    background:rgba(2,2,6,.92);
    border-bottom:1px solid rgba(176,70,255,.14);
    backdrop-filter:blur(12px);
  }
  .header .logo{display:none}
  .mobile-logo{
    display:flex;
    position:absolute;
    left:50%;top:10px;
    transform:translateX(-50%);
    width:190px;
    height:64px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:.72;
    text-transform:uppercase;
  }
  .mobile-logo strong{
    font-size:30px;
    font-weight:950;
    letter-spacing:-2px;
    color:#fff;
    text-shadow:0 2px 12px #000;
  }
  .mobile-logo em{
    color:#ad3dff;
    font-size:20px;
    font-weight:950;
    font-style:italic;
    letter-spacing:-1.5px;
    margin-top:4px;
    text-shadow:0 0 16px rgba(174,55,255,.5);
  }
  .mobile-logo small{
    font-size:7px;
    letter-spacing:5px;
    color:#eee;
    margin-top:9px;
  }
  .menu{
    display:block;
    position:absolute;
    left:18px;top:27px;
    width:44px;height:38px;
    font-size:0;
  }
  .menu:before,.menu:after,.menu{ }
  .menu:before{
    content:"☰";
    font-size:38px;
    line-height:34px;
    color:#fff;
    text-shadow:0 0 10px rgba(255,255,255,.25);
  }
  .header:after{
    content:"♙  ĐĂNG NHẬP";
    position:absolute;
    right:14px;top:17px;
    width:122px;height:48px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #a847ff;
    border-radius:13px;
    color:#fff;font-size:12px;font-weight:800;
    background:rgba(95,20,160,.08);
    box-shadow:0 0 18px rgba(158,62,255,.16);
  }
  .login{display:none}

  .hero{
    min-height:auto;
    padding:125px 22px 0;
    display:block;
    overflow:visible;
  }
  .hero-art{
    position:absolute;
    top:86px;left:0;right:0;
    height:680px;
    background-image:
      linear-gradient(180deg,rgba(4,2,10,.08) 0%,rgba(4,2,10,.08) 50%,rgba(5,4,10,.95) 100%),
      linear-gradient(90deg,rgba(3,2,7,.35),rgba(3,2,7,.05) 60%,rgba(3,2,7,.25)),
      url("hero.png");
    background-size:cover;
    background-position:63% center;
    filter:saturate(1.05) brightness(.92);
  }
  .hero:after{display:none}
  .content{
    position:relative;
    z-index:3;
    max-width:none;
    margin:0;
    min-height:620px;
  }
  .kicker{
    font-size:12px;
    letter-spacing:5px;
    margin:8px 0 23px;
    color:#b85cff;
    font-weight:700;
  }
  .title{
    font-size:clamp(54px,15vw,74px);
    line-height:.78;
    letter-spacing:-4px;
    white-space:nowrap;
  }
  .script{
    font-size:clamp(40px,11vw,57px);
    line-height:.9;
    letter-spacing:-3px;
    margin:7px 0 0 7px;
  }
  .mp{
    margin:18px 0 22px 3px;
    font-size:12px;
    letter-spacing:6px;
  }
  .desc{
    max-width:340px;
    font-size:14px;
    line-height:1.7;
    padding-left:14px;
    margin-bottom:32px;
  }
  .actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:360px;
  }
  .btn{
    height:54px;
    padding:0 13px;
    border-radius:8px;
    font-size:13px;
    white-space:normal;
    text-align:center;
  }

  /* Mobile uses one large server + AI card, matching the reference composition. */
  .server,.ai{display:none}
  .mobile-server-card{
    display:block;
    position:relative;
    z-index:8;
    margin:-5px 0 28px;
    width:100%;
    min-height:345px;
    padding:25px 24px 18px;
    border-radius:25px;
    border:1px solid rgba(178,72,255,.48);
    background:
      radial-gradient(circle at 82% 28%,rgba(156,55,255,.17),transparent 25%),
      linear-gradient(145deg,rgba(15,9,27,.97),rgba(7,6,15,.96));
    box-shadow:0 18px 55px rgba(0,0,0,.52),inset 0 0 35px rgba(140,45,255,.035);
    overflow:hidden;
  }
  .mobile-server-card:after{
    content:"AE";
    position:absolute;
    right:-18px;top:35px;
    width:120px;height:120px;
    border-radius:50%;
    display:grid;place-items:center;
    color:#c767ff;font-size:44px;font-weight:950;
    background:radial-gradient(circle,#26103f 0 28%,#0e0918 68%);
    border:2px solid rgba(190,89,255,.35);
    box-shadow:0 0 35px rgba(172,66,255,.22);
    opacity:.9;
  }
  .mobile-server-top{position:relative;z-index:2}
  .mobile-server-top>div:first-child{
    display:flex;align-items:center;gap:9px;
    font-size:13px;font-weight:800;letter-spacing:.2px;
  }
  .mobile-server-icon{color:#c15cff;font-size:17px}
  .mobile-online{display:flex;align-items:baseline;gap:8px;margin-top:20px}
  .mobile-online strong{font-size:54px;line-height:1;color:#b84eff;letter-spacing:-2px}
  .mobile-online span{font-size:24px;color:#aaa}
  .mobile-server-top>small{display:block;margin-top:6px;color:#aaa;font-size:10px}
  .mobile-connect{
    position:relative;z-index:2;
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:21px;padding-top:18px;
    color:#fff;font-size:14px;font-weight:700;
  }
  .mobile-connect span{color:#b14cff;font-size:22px;margin-right:8px}
  .mobile-ai-box{
    position:relative;z-index:3;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:20px;padding:16px;
    border:1px solid rgba(168,78,255,.25);
    border-radius:14px;
    background:rgba(12,8,22,.86);
  }
  .mobile-ai-box strong{font-size:14px}
  .mobile-ai-box p{font-size:11px;color:#aaa;margin-top:5px}
  .mobile-ai-box button{
    flex:0 0 44%;height:48px;border:1px solid #c15aff;border-radius:9px;
    color:#fff;font-weight:800;background:linear-gradient(135deg,#7920dd,#a941ff);
    box-shadow:0 0 20px rgba(168,61,255,.28);cursor:pointer;
  }

  .stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:0 0 18px;
    padding:12px;
    border-radius:22px;
    background:rgba(8,6,16,.88);
    border:1px solid rgba(177,76,255,.25);
    box-shadow:none;
  }
  .stats:before{
    content:"THỐNG KÊ";
    grid-column:1/-1;
    text-align:center;
    color:#ddd;font-size:14px;font-weight:800;letter-spacing:2px;
    padding:4px 0 8px;
  }
  .stat{
    min-height:150px;
    padding:17px 7px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:9px;
    text-align:center;
    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(20,15,31,.78),rgba(8,7,15,.86));
  }
  .stat+.stat{border-left:1px solid rgba(255,255,255,.1);border-top:0}
  .icon{font-size:32px}
  .stat h3{font-size:22px;line-height:1}
  .stat p{font-size:9px;line-height:1.35;letter-spacing:.7px}

  .mobile-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    margin:0 0 20px;
    border:1px solid rgba(177,76,255,.22);
    border-radius:22px;
    overflow:hidden;
    background:rgba(8,6,16,.9);
  }
  .mobile-feature{
    min-height:145px;
    padding:18px 12px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:8px;
  }
  .mobile-feature:nth-child(2n){border-left:1px solid rgba(255,255,255,.09)}
  .mobile-feature:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  .mobile-feature b{font-size:35px;color:#b64cff;text-shadow:0 0 16px rgba(181,71,255,.4)}
  .mobile-feature strong{font-size:10px;line-height:1.3}
  .mobile-feature span{font-size:10px;color:#999;line-height:1.35}

  .footer{display:none}
  .mobile-bottom-nav{
    position:fixed;
    z-index:100;
    left:14px;right:14px;bottom:10px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    height:74px;
    border:1px solid rgba(184,80,255,.7);
    border-radius:30px;
    background:rgba(10,7,19,.94);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 35px rgba(0,0,0,.55),0 0 25px rgba(157,49,255,.14);
    overflow:hidden;
  }
  .mobile-bottom-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    color:#999;font-size:10px;font-weight:700;
  }
  .mobile-bottom-nav a b{font-size:28px;font-weight:400;line-height:1}
  .mobile-bottom-nav a.active{
    color:#bd61ff;
    background:linear-gradient(180deg,rgba(146,41,255,.12),rgba(146,41,255,.03));
    border-right:1px solid rgba(184,80,255,.45);
  }
  .mobile-bottom-nav a.active b{text-shadow:0 0 16px rgba(189,97,255,.65)}
}

@media(max-width:900px){
  .header{height:66px;padding:0 20px}
  .logo{width:auto;font-size:19px}
  .logo i{font-size:15px;margin-left:17px}
  .logo small{font-size:5px;letter-spacing:3px;margin:6px 0 0 21px}
  .nav,.login{display:none}
  .menu{display:block;margin-left:auto}
  .hero{min-height:860px;padding:115px 24px 190px;align-items:flex-start}
  .hero-art{background-position:62% top}
.content{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}
  .kicker{font-size:11px;letter-spacing:5px;margin-bottom:25px}
  .title{font-size:65px;letter-spacing:-4px}
  .script{font-size:48px;letter-spacing:-3px}
  .mp{font-size:12px;letter-spacing:6px;margin:18px 0}
  .desc{font-size:13px;line-height:1.65;max-width:360px}
  .actions{gap:10px}
  .btn{height:52px;padding:0 22px;font-size:13px}
    .server{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;

        width:100%;
        margin:45px 0 0;
        padding:22px;
        border-radius:20px;
    }
  .online{font-size:38px;margin-top:14px}
  .online small{font-size:19px}
  .ai{right:18px;bottom:25px;width:205px;padding:13px}
  .bot{width:38px;height:38px;font-size:12px}.ai p{font-size:10px}
  .ai{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;

        width:100%;
        margin:0;
        padding:16px 18px;

        border-radius:0 0 18px 18px;
    }
  .stats{margin:-35px 14px 0;grid-template-columns:1fr;padding:5px 18px}
  .stat{justify-content:flex-start;padding:18px 5px}
  .stat+.stat{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .stat h3{font-size:22px}
}
@media(max-width:430px){
  .hero{min-height:825px;padding-left:18px;padding-right:18px}
  .title{font-size:56px}.script{font-size:42px}
  .mp{letter-spacing:4px}
  .desc{max-width:300px}
  .actions{flex-wrap:wrap}
  .btn{flex:1;min-width:145px;padding:0 12px}
  .server{right:14px;bottom:132px;width:190px}
  .server-head{font-size:12px}.online{font-size:32px}
  .ai{right:14px;width:185px}
}


/* FINAL MOBILE OVERRIDES — intentionally placed after the desktop/mobile base CSS */
@media(max-width:900px){
  body{padding-bottom:92px}
  .header{height:86px;padding:0 14px;background:rgba(2,2,6,.92)}
  .header .logo,.nav,.login{display:none}
  .mobile-logo{display:flex;position:absolute;left:50%;top:10px;transform:translateX(-50%);width:190px;height:64px;flex-direction:column;align-items:center;justify-content:center;line-height:.72;text-transform:uppercase}
  .mobile-logo strong{font-size:30px;font-weight:950;letter-spacing:-2px;color:#fff}
  .mobile-logo em{color:#ad3dff;font-size:20px;font-weight:950;font-style:italic;letter-spacing:-1.5px;margin-top:4px;text-shadow:0 0 16px rgba(174,55,255,.5)}
  .mobile-logo small{font-size:7px;letter-spacing:5px;color:#eee;margin-top:9px}
  .menu{display:block;position:absolute;left:18px;top:27px;width:44px;height:38px;font-size:0}
  .menu:before{content:"☰";font-size:38px;line-height:34px;color:#fff}
  .header:after{content:"♙  ĐĂNG NHẬP";position:absolute;right:14px;top:17px;width:122px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #a847ff;border-radius:13px;color:#fff;font-size:12px;font-weight:800;background:rgba(95,20,160,.08);box-shadow:0 0 18px rgba(158,62,255,.16)}

  .hero{min-height:auto;padding:125px 22px 0;display:block;overflow:visible}
  .hero-art{position:absolute;top:86px;left:0;right:0;height:680px;background-image:linear-gradient(180deg,rgba(4,2,10,.08) 0%,rgba(4,2,10,.08) 50%,rgba(5,4,10,.95) 100%),linear-gradient(90deg,rgba(3,2,7,.35),rgba(3,2,7,.05) 60%,rgba(3,2,7,.25)),url("hero.png");background-size:cover;background-position:63% center;filter:saturate(1.05) brightness(.92)}
  .hero:after{display:none}
  .content{max-width:none;margin:0;min-height:610px;position:relative;z-index:3}
  .kicker{font-size:12px;letter-spacing:5px;margin:8px 0 23px;color:#b85cff;font-weight:700}
  .title{font-size:clamp(54px,15vw,74px);line-height:.78;letter-spacing:-4px;white-space:nowrap}
  .script{font-size:clamp(40px,11vw,57px);line-height:.9;letter-spacing:-3px;margin:7px 0 0 7px}
  .mp{margin:18px 0 22px 3px;font-size:12px;letter-spacing:6px}
  .desc{max-width:340px;font-size:14px;line-height:1.7;padding-left:14px;margin-bottom:32px}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px}
  .btn{height:54px;padding:0 13px;border-radius:8px;font-size:13px;white-space:normal;text-align:center}

  .server,.ai{display:none}
  .mobile-server-card{display:block;position:relative;z-index:8;margin:-5px 0 28px;width:100%;min-height:345px;padding:25px 24px 18px;border-radius:25px;border:1px solid rgba(178,72,255,.48);background:radial-gradient(circle at 82% 28%,rgba(156,55,255,.17),transparent 25%),linear-gradient(145deg,rgba(15,9,27,.97),rgba(7,6,15,.96));box-shadow:0 18px 55px rgba(0,0,0,.52),inset 0 0 35px rgba(140,45,255,.035);overflow:hidden}
  .mobile-server-card:after{content:"AE";position:absolute;right:-18px;top:35px;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;color:#c767ff;font-size:44px;font-weight:950;background:radial-gradient(circle,#26103f 0 28%,#0e0918 68%);border:2px solid rgba(190,89,255,.35);box-shadow:0 0 35px rgba(172,66,255,.22);opacity:.9}
  .mobile-server-top{position:relative;z-index:2}
  .mobile-server-top>div:first-child{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800}
  .mobile-server-icon{color:#c15cff;font-size:17px}
  .mobile-online{display:flex;align-items:baseline;gap:8px;margin-top:20px}
  .mobile-online strong{font-size:54px;line-height:1;color:#b84eff;letter-spacing:-2px}
  .mobile-online span{font-size:24px;color:#aaa}
  .mobile-server-top>small{display:block;margin-top:6px;color:#aaa;font-size:10px}
  .mobile-connect{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.12);margin-top:21px;padding-top:18px;color:#fff;font-size:14px;font-weight:700}
  .mobile-connect span{color:#b14cff;font-size:22px;margin-right:8px}
  .mobile-ai-box{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:16px;border:1px solid rgba(168,78,255,.25);border-radius:14px;background:rgba(12,8,22,.86)}
  .mobile-ai-box strong{font-size:14px}.mobile-ai-box p{font-size:11px;color:#aaa;margin-top:5px}
  .mobile-ai-box button{flex:0 0 44%;height:48px;border:1px solid #c15aff;border-radius:9px;color:#fff;font-weight:800;background:linear-gradient(135deg,#7920dd,#a941ff);box-shadow:0 0 20px rgba(168,61,255,.28);cursor:pointer}

  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px;padding:12px;border-radius:22px;background:rgba(8,6,16,.88);border:1px solid rgba(177,76,255,.25);box-shadow:none}
  .stats:before{content:"THỐNG KÊ";grid-column:1/-1;text-align:center;color:#ddd;font-size:14px;font-weight:800;letter-spacing:2px;padding:4px 0 8px}
  .stat{min-height:150px;padding:17px 7px;display:flex;flex-direction:column;justify-content:center;gap:9px;text-align:center;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:linear-gradient(145deg,rgba(20,15,31,.78),rgba(8,7,15,.86))}
  .stat+.stat{border-left:1px solid rgba(255,255,255,.1);border-top:0}
  .icon{font-size:32px}.stat h3{font-size:22px;line-height:1}.stat p{font-size:9px;line-height:1.35;letter-spacing:.7px}

  .mobile-features{display:grid;grid-template-columns:repeat(2,1fr);margin:0 0 20px;border:1px solid rgba(177,76,255,.22);border-radius:22px;overflow:hidden;background:rgba(8,6,16,.9)}
  .mobile-feature{min-height:145px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
  .mobile-feature:nth-child(2n){border-left:1px solid rgba(255,255,255,.09)}
  .mobile-feature:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  .mobile-feature b{font-size:35px;color:#b64cff;text-shadow:0 0 16px rgba(181,71,255,.4)}
  .mobile-feature strong{font-size:10px;line-height:1.3}.mobile-feature span{font-size:10px;color:#999;line-height:1.35}

  .footer{display:none}
  .mobile-bottom-nav{position:fixed;z-index:100;left:14px;right:14px;bottom:10px;display:grid;grid-template-columns:repeat(4,1fr);height:74px;border:1px solid rgba(184,80,255,.7);border-radius:30px;background:rgba(10,7,19,.94);backdrop-filter:blur(18px);box-shadow:0 10px 35px rgba(0,0,0,.55),0 0 25px rgba(157,49,255,.14);overflow:hidden}
  .mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#999;font-size:10px;font-weight:700}
.mobile-bottom-nav a i{
    font-size:21px;
    line-height:1;
    font-style:normal;
    transition:all .25s ease;
}

.mobile-bottom-nav a span{
    font-size:10px;
    font-weight:700;
    letter-spacing:.2px;
}

.mobile-bottom-nav a.active i{
    color:#bd61ff;
    filter:drop-shadow(0 0 8px rgba(189,97,255,.75));
    transform:translateY(-1px);
}

.mobile-bottom-nav a:not(.active) i{
    color:#9b98a3;
}

.mobile-bottom-nav a:hover i{
    color:#c66aff;
    transform:translateY(-2px);
}
  .mobile-bottom-nav a.active{color:#bd61ff;background:linear-gradient(180deg,rgba(146,41,255,.12),rgba(146,41,255,.03));border-right:1px solid rgba(184,80,255,.45)}
  .mobile-bottom-nav a.active b{text-shadow:0 0 16px rgba(189,97,255,.65)}
}
@media(max-width:430px){
  .hero{padding-left:18px;padding-right:18px}.content{min-height:610px}.title{font-size:56px}.script{font-size:42px}.mp{letter-spacing:4px}.desc{max-width:310px}
  .mobile-server-card{min-height:330px;padding:23px 18px 16px}.mobile-online strong{font-size:48px}.mobile-ai-box{padding:13px}.mobile-ai-box button{height:44px;flex-basis:43%;font-size:12px}.stat{min-height:142px}.stat h3{font-size:19px}.stat p{font-size:8px}.mobile-feature{min-height:138px}
}

/* FINAL MOBILE OVERRIDES */
@media(max-width:900px){
body{padding-bottom:92px}.header{height:86px;padding:0 14px;background:rgba(2,2,6,.92)}.header .logo,.nav,.login{display:none}.mobile-logo{display:flex;position:absolute;left:50%;top:10px;transform:translateX(-50%);width:190px;height:64px;flex-direction:column;align-items:center;justify-content:center;line-height:.72;text-transform:uppercase}.mobile-logo strong{font-size:30px;font-weight:950;letter-spacing:-2px;color:#fff}.mobile-logo em{color:#ad3dff;font-size:20px;font-weight:950;font-style:italic;letter-spacing:-1.5px;margin-top:4px;text-shadow:0 0 16px rgba(174,55,255,.5)}.mobile-logo small{font-size:7px;letter-spacing:5px;color:#eee;margin-top:9px}
.hero{min-height:auto;padding:125px 22px 0;display:block;overflow:visible}.hero-art{position:absolute;top:86px;left:0;right:0;height:680px;background-image:linear-gradient(180deg,rgba(4,2,10,.08),rgba(4,2,10,.08) 50%,rgba(5,4,10,.95)),linear-gradient(90deg,rgba(3,2,7,.35),rgba(3,2,7,.05) 60%,rgba(3,2,7,.25)),url("hero.png");background-size:cover;background-position:63% center;filter:saturate(1.05) brightness(.92)}.hero:after{display:none}.content{max-width:none;margin:0;min-height:610px;position:relative;z-index:3}.kicker{font-size:12px;letter-spacing:5px;margin:8px 0 23px;color:#b85cff;font-weight:700}.title{font-size:clamp(54px,15vw,74px);line-height:.78;letter-spacing:-4px;white-space:nowrap}.script{font-size:clamp(40px,11vw,57px);line-height:.9;letter-spacing:-3px;margin:7px 0 0 7px}.mp{margin:18px 0 22px 3px;font-size:12px;letter-spacing:6px}.desc{max-width:340px;font-size:14px;line-height:1.7;padding-left:14px;margin-bottom:32px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px}.btn{height:54px;padding:0 13px;border-radius:8px;font-size:13px;white-space:normal;text-align:center}.server,.ai{display:none}
.mobile-server-card{display:block;position:relative;z-index:8;margin:-5px 0 28px;width:100%;min-height:345px;padding:25px 24px 18px;border-radius:25px;border:1px solid rgba(178,72,255,.48);background:radial-gradient(circle at 82% 28%,rgba(156,55,255,.17),transparent 25%),linear-gradient(145deg,rgba(15,9,27,.97),rgba(7,6,15,.96));box-shadow:0 18px 55px rgba(0,0,0,.52);overflow:hidden}.mobile-server-card:after{content:"AE";position:absolute;right:-18px;top:35px;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;color:#c767ff;font-size:44px;font-weight:950;background:radial-gradient(circle,#26103f 0 28%,#0e0918 68%);border:2px solid rgba(190,89,255,.35);box-shadow:0 0 35px rgba(172,66,255,.22);opacity:.9}.mobile-server-top{position:relative;z-index:2}.mobile-server-top>div:first-child{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800}.mobile-server-icon{color:#c15cff;font-size:17px}.mobile-online{display:flex;align-items:baseline;gap:8px;margin-top:20px}.mobile-online strong{font-size:54px;line-height:1;color:#b84eff;letter-spacing:-2px}.mobile-online span{font-size:24px;color:#aaa}.mobile-server-top>small{display:block;margin-top:6px;color:#aaa;font-size:10px}.mobile-connect{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.12);margin-top:21px;padding-top:18px;color:#fff;font-size:14px;font-weight:700}.mobile-connect span{color:#b14cff;font-size:22px;margin-right:8px}.mobile-ai-box{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:16px;border:1px solid rgba(168,78,255,.25);border-radius:14px;background:rgba(12,8,22,.86)}.mobile-ai-box strong{font-size:14px}.mobile-ai-box p{font-size:11px;color:#aaa;margin-top:5px}.mobile-ai-box button{flex:0 0 44%;height:48px;border:1px solid #c15aff;border-radius:9px;color:#fff;font-weight:800;background:linear-gradient(135deg,#7920dd,#a941ff);box-shadow:0 0 20px rgba(168,61,255,.28);cursor:pointer}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px;padding:12px;border-radius:22px;background:rgba(8,6,16,.88);border:1px solid rgba(177,76,255,.25);box-shadow:none}.stats:before{content:"THỐNG KÊ";grid-column:1/-1;text-align:center;color:#ddd;font-size:14px;font-weight:800;letter-spacing:2px;padding:4px 0 8px}.stat{min-height:150px;padding:17px 7px;display:flex;flex-direction:column;justify-content:center;gap:9px;text-align:center;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:linear-gradient(145deg,rgba(20,15,31,.78),rgba(8,7,15,.86))}.stat+.stat{border-left:1px solid rgba(255,255,255,.1);border-top:0}.icon{font-size:32px}.stat h3{font-size:22px;line-height:1}.stat p{font-size:9px;line-height:1.35;letter-spacing:.7px}
.mobile-features{display:grid;grid-template-columns:repeat(2,1fr);margin:0 0 20px;border:1px solid rgba(177,76,255,.22);border-radius:22px;overflow:hidden;background:rgba(8,6,16,.9)}.mobile-feature{min-height:145px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.mobile-feature:nth-child(2n){border-left:1px solid rgba(255,255,255,.09)}.mobile-feature:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}.mobile-feature b{font-size:35px;color:#b64cff;text-shadow:0 0 16px rgba(181,71,255,.4)}.mobile-feature strong{font-size:10px;line-height:1.3}.mobile-feature span{font-size:10px;color:#999;line-height:1.35}.footer{display:none}
.mobile-bottom-nav{position:fixed;z-index:100;left:14px;right:14px;bottom:10px;display:grid;grid-template-columns:repeat(4,1fr);height:74px;border:1px solid rgba(184,80,255,.7);border-radius:30px;background:rgba(10,7,19,.94);backdrop-filter:blur(18px);box-shadow:0 10px 35px rgba(0,0,0,.55),0 0 25px rgba(157,49,255,.14);overflow:hidden}.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#999;font-size:10px;font-weight:700}.mobile-bottom-nav a b{font-size:28px;font-weight:400;line-height:1}.mobile-bottom-nav a.active{color:#bd61ff;background:linear-gradient(180deg,rgba(146,41,255,.12),rgba(146,41,255,.03));border-right:1px solid rgba(184,80,255,.45)}.mobile-bottom-nav a.active b{text-shadow:0 0 16px rgba(189,97,255,.65)}
}
@media(max-width:430px){.hero{padding-left:18px;padding-right:18px}.content{min-height:610px}.title{font-size:56px}.script{font-size:42px}.mp{letter-spacing:4px}.desc{max-width:310px}.mobile-server-card{min-height:330px;padding:23px 18px 16px}.mobile-online strong{font-size:48px}.mobile-ai-box{padding:13px}.mobile-ai-box button{height:44px;flex-basis:43%;font-size:12px}.stat{min-height:142px}.stat h3{font-size:19px}.stat p{font-size:8px}.mobile-feature{min-height:138px}}


/* =========================================================
   FINAL MOBILE FIX — overrides older duplicated mobile rules
   PC layout is untouched.
   ========================================================= */
@media (max-width: 900px){
  html, body{width:100%; overflow-x:hidden;}
  body{padding-bottom:92px !important;}

  /* HEADER */
  .header{
    height:86px !important;
    padding:0 14px !important;
    position:absolute !important;
    top:0;left:0;right:0;
    background:rgba(2,2,6,.94) !important;
    z-index:50 !important;
  }
  .header .logo,
  .header .nav,
  .header .login{display:none !important;}

  .mobile-logo{
    display:flex !important;
    position:absolute !important;
    left:50% !important;
    top:8px !important;
    transform:translateX(-50%) !important;
    width:155px !important;
    height:70px !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    z-index:52 !important;
  }
  .mobile-logo strong{
    font-size:27px !important;
    line-height:.85 !important;
    letter-spacing:-1.8px !important;
  }
  .mobile-logo em{
    font-size:16px !important;
    line-height:1 !important;
    letter-spacing:-1.1px !important;
    margin-top:3px !important;
    white-space:nowrap !important;
  }
  .mobile-logo small{
    font-size:5px !important;
    letter-spacing:4px !important;
    margin-top:7px !important;
  }

  .menu,.header:after{display:none !important;}

  /* HERO: no artificial min-height — this removes the huge black gap */
  .hero{
    min-height:0 !important;
    height:auto !important;
    padding:112px 18px 0 !important;
    display:block !important;
    overflow:visible !important;
  }
  .hero-art{
    top:86px !important;
    height:680px !important;
    background-position:63% center !important;
  }
.content{
  min-height:0 !important;
  height:auto !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  position:relative !important;
  z-index:3 !important;
  text-align:center !important;
}

  /* HERO TEXT + BUTTONS */
  .kicker{margin:8px 0 22px !important;}
  .title{
    font-size:clamp(54px,15vw,70px) !important;
    white-space:nowrap !important;
  }
.script{
  font-size:clamp(40px,11vw,54px) !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:center !important;
}
.mp{
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:center !important;
}
.desc{
  max-width:320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:28px !important;
  text-align:left !important;
}
.actions{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:9px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
}
  .actions .btn{
    width:100% !important;
    min-width:0 !important;
    height:54px !important;
    padding:0 7px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }

  /* SERVER + AI: one clean card, immediately after hero actions */
  .server,.ai{display:none !important;}
  .mobile-server-card{
    display:block !important;
    position:relative !important;
    z-index:8 !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:42px 0 24px !important;
    padding:23px 18px 16px !important;
    border-radius:22px !important;
    box-sizing:border-box !important;
  }
  .mobile-server-card:after{
    width:112px !important;
    height:112px !important;
    right:-20px !important;
    top:34px !important;
  }
  .mobile-online{margin-top:18px !important;}
  .mobile-online strong{font-size:50px !important;}
  .mobile-online span{font-size:21px !important;}
  .mobile-connect{margin-top:19px !important;padding-top:16px !important;}
  .mobile-ai-box{
    margin-top:18px !important;
    padding:13px !important;
    gap:9px !important;
  }
  .mobile-ai-box button{
    flex:0 0 42% !important;
    height:44px !important;
    font-size:12px !important;
    padding:0 7px !important;
  }

  /* STATS: stays directly under server card */
  .stats{
    margin:0 18px 18px !important;
    width:auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .stat{min-width:0 !important;}

  .mobile-features{margin-left:18px !important;margin-right:18px !important;}
}

@media (max-width:430px){
  .mobile-logo{width:145px !important;}
  .mobile-logo strong{font-size:25px !important;}
  .mobile-logo em{font-size:15px !important;}
  .header:after{right:12px !important;width:112px !important;font-size:10.5px !important;}
  .menu{left:14px !important;}
  .hero{padding-left:18px !important;padding-right:18px !important;}
.title{
  font-size:56px !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:center !important;
}

.script{
  font-size:42px !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:center !important;
}

.mp{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:center !important;
}
  .desc{max-width:400px !important;}
  .mobile-server-card{margin-top:38px !important;}
}
/* =========================================================
   GTA SAN — FEATURE SECTION
   ========================================================= */

.feature-section{
    position:relative;
    width:100%;
    padding:95px 3% 0px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(144,45,255,.12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #05040a 0%,
            #08060f 45%,
            #05040a 100%
        );
    overflow:hidden;
}


/* subtle background glow */

.feature-section::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    left:50%;
    top:180px;
    transform:translateX(-50%);
    background:radial-gradient(
        circle,
        rgba(154,48,255,.08),
        transparent 70%
    );
    pointer-events:none;
}
/* =========================================================
   FEATURE BACKGROUND - ẢNH 2 BÊN
   ========================================================= */

.feature-section{
    position:relative;
    overflow:hidden;
}

.feature-header,
.feature-grid,
.feature-cta{
    position:relative;
    z-index:2;
}
/* ẢNH BÊN TRÁI */
.feature-bg-left{
    position:absolute;
    top:0;
    left:0;

    width:42%;
    height:100%;

    background-image:
        linear-gradient(
            90deg,
            rgba(5,4,10,0) 0%,
            rgba(5,4,10,.10) 30%,
            rgba(5,4,10,.65) 72%,
            #05040a 100%
        ),
        url("features/bg-left.jpg");

    background-size:cover;
    background-position:left center;

    opacity:.9;

    pointer-events:none;
    z-index:0;
}


/* ẢNH BÊN PHẢI */
.feature-bg-right{
    position:absolute;
    top:0;
    right:0;

    width:42%;
    height:100%;

    background-image:
        linear-gradient(
            270deg,
            rgba(5,4,10,0) 0%,
            rgba(5,4,10,.10) 30%,
            rgba(5,4,10,.65) 72%,
            #05040a 100%
        ),
        url("features/bg-right.jpg");

    background-size:cover;
    background-position:right center;

    opacity:.9;

    pointer-events:none;
    z-index:0;
}


/* ĐẢM BẢO NỘI DUNG NẰM TRÊN ẢNH */
.feature-header{
    position:relative;
    z-index:2;
}

.feature-grid{
    position:relative;
    z-index:2;
}

.feature-cta{
    position:relative;
    z-index:3;
}

/* =========================================================
   HEADER
   ========================================================= */

.feature-header{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:48px;
}


.feature-kicker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    color:#e8bd69;
    font-size:13px;
    font-weight:700;
    letter-spacing:7px;
}


.feature-kicker span{
    width:65px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #e6b85f
    );

    box-shadow:0 0 10px rgba(235,184,87,.5);
}


.feature-kicker span:last-child{
    background:linear-gradient(
        90deg,
        #e6b85f,
        transparent
    );
}


.feature-header h2{
    margin-top:20px;

    font-family:'Anton',Impact,sans-serif;
    font-size:clamp(42px,5vw,72px);
    line-height:.9;
    letter-spacing:1px;

    color:#fff;

    text-shadow:
        0 4px 0 #222,
        0 8px 22px rgba(0,0,0,.8);
}


.feature-title{
    margin-top:8px;

    font-family:'Barlow Condensed',Arial,sans-serif;
    font-size:clamp(38px,4.5vw,66px);
    font-weight:800;
    line-height:.95;

    color:#a93cff;

    letter-spacing:1px;

    text-shadow:
        0 0 12px rgba(167,54,255,.45),
        0 5px 20px rgba(0,0,0,.8);
}


.feature-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    margin-top:26px;
}


.feature-divider i{
    width:120px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(222,169,79,.8)
    );
}


.feature-divider i:last-child{
    background:linear-gradient(
        90deg,
        rgba(222,169,79,.8),
        transparent
    );
}


.feature-divider b{
    color:#ffc75b;
    font-size:23px;

    text-shadow:
        0 0 12px rgba(255,192,80,.8);
}


/* =========================================================
   GRID
   ========================================================= */

.feature-grid{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1450px;

    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:10px;
}


/* =========================================================
   CARD
   ========================================================= */

.feature-card{
    position:relative;

    min-width:0;
    height:270px;

    overflow:hidden;

    border-radius:15px;

    border:1px solid rgba(221,169,83,.55);

    background:#09070e;

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        inset 0 0 30px rgba(140,40,255,.05);

    isolation:isolate;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.feature-card:hover{
    transform:translateY(-7px);

    border-color:#d99a3e;

    box-shadow:
        0 20px 45px rgba(0,0,0,.65),
        0 0 25px rgba(157,55,255,.18),
        inset 0 0 30px rgba(164,52,255,.1);
}


/* IMAGE */

.feature-image{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    transform:scale(1.02);

    transition:
        transform .6s ease,
        filter .4s ease;
}


.feature-card:hover .feature-image{
    transform:scale(1.08);

    filter:
        saturate(1.15)
        brightness(1.08);
}


/* dark gradient */

.feature-overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(3,2,8,.08) 0%,
            rgba(3,2,8,.12) 35%,
            rgba(3,2,8,.55) 65%,
            rgba(2,2,6,.98) 100%
        );
}


/* number */

.feature-number{
    position:absolute;

    z-index:3;

    top:15px;
    left:15px;

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#e8c57c;

    font-family:'Barlow Condensed',Arial,sans-serif;
    font-size:20px;
    font-weight:500;

    border:1px solid rgba(228,182,95,.4);

    background:rgba(15,10,24,.55);

    backdrop-filter:blur(8px);

    box-shadow:
        0 0 15px rgba(170,86,255,.08);
}


/* content */

.feature-content{
    position:absolute;

    z-index:3;

    left:15px;
    right:15px;
    bottom:17px;

    display:flex;
    align-items:center;

    gap:13px;
}


/* icon */

.feature-icon{
    flex:0 0 58px;

    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#e8bb63;

    font-size:28px;

    border:1px solid rgba(228,174,79,.75);

    background:
        radial-gradient(
            circle,
            rgba(87,44,15,.7),
            rgba(11,7,17,.96)
        );

    box-shadow:
        0 0 15px rgba(228,165,69,.16),
        inset 0 0 18px rgba(236,177,68,.08);
}


/* little purple line */

.feature-content::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-13px;

    width:34px;
    height:2px;

    background:#b13cff;

    box-shadow:0 0 10px #a737ff;
}


/* title */

.feature-content h3{
    color:#fff;

    font-family:'Barlow Condensed',Arial,sans-serif;

    font-size:19px;
    line-height:1.05;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:0 2px 5px #000;
}


/* description */

.feature-content p{
    margin-top:5px;

    color:#aaa;

    font-size:11px;
    line-height:1.25;

    opacity:.9;
}


/* =========================================================
   CTA
   ========================================================= */

.feature-cta{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:0;

    max-width:850px;

    margin:25px auto 0;
}


.cta-line{
    flex:1;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(185,81,255,.5)
    );
}


.cta-line:last-child{
    background:linear-gradient(
        90deg,
        rgba(185,81,255,.5),
        transparent
    );
}


.feature-cta-button{
    position:relative;

    min-width:620px;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 70px 0 40px;

    border:1px solid rgba(218,164,75,.75);

    border-radius:35px;

    background:
        linear-gradient(
            90deg,
            rgba(12,8,18,.96),
            rgba(30,11,49,.96)
        );

    color:#f3d68f;

    font-family:'Barlow Condensed',Arial,sans-serif;

    font-size:17px;
    font-weight:700;

    letter-spacing:7px;

    box-shadow:
        0 0 20px rgba(191,75,255,.12),
        inset 0 0 20px rgba(177,65,255,.08);

    transition:.3s;
}


.feature-cta-button:hover{
    transform:translateY(-3px);

    color:#fff;

    border-color:#c65aff;

    box-shadow:
        0 0 30px rgba(181,63,255,.35),
        inset 0 0 25px rgba(177,65,255,.12);
}


.feature-cta-button b{
    position:absolute;

    right:20px;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;

    font-size:34px;
    font-weight:300;

    background:
        linear-gradient(
            135deg,
            #7720d9,
            #a941ff
        );

    box-shadow:
        0 0 18px rgba(174,60,255,.55);
}
.feature-cta-button span {
  display: inline-block;
  transform: translateX(20px);
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .feature-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .feature-card{
        height:260px;
    }

    .feature-cta-button{
        min-width:520px;
    }
    .feature-cta-button span {
      display: inline-block;
      transform: translateX(20px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .feature-section{
        padding:65px 14px 0px;
    }


    .feature-header{
        margin-bottom:30px;
    }


    .feature-kicker{
        font-size:10px;
        letter-spacing:4px;
        gap:9px;
    }


    .feature-kicker span{
        width:35px;
    }


    .feature-header h2{
        margin-top:16px;
        font-size:39px;
    }


    .feature-title{
        font-size:34px;
        line-height:.95;
    }


    .feature-divider{
        margin-top:20px;
    }


    .feature-divider i{
        width:55px;
    }


    .feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }


    .feature-card{
        height:190px;
        border-radius:12px;
    }


    .feature-number{
        top:9px;
        left:9px;

        width:31px;
        height:31px;

        font-size:15px;
        border-radius:8px;
    }


    .feature-content{
        left:10px;
        right:10px;
        bottom:12px;

        gap:8px;
        align-items:flex-end;
    }


    .feature-icon{
        flex:0 0 42px;

        width:42px;
        height:42px;

        font-size:20px;
    }


    .feature-content h3{
        font-size:13px;
    }


    .feature-content p{
        display:none;
    }


    .feature-content::after{
        bottom:-8px;
        width:25px;
    }


    .feature-cta{
        margin-top:20px;
    }


    .cta-line{
        display:none;
    }


    .feature-cta-button{
        min-width:0;
        width:100%;
        height:55px;

        padding:0 50px 0 18px;

        font-size:12px;
        letter-spacing:3px;

        text-align:center;
    }


    .feature-cta-button b{
        right:10px;

        width:35px;
        height:35px;

        font-size:27px;
    }
    .feature-cta-button span {
    display: inline-block;
    transform: translateX(20px);
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:430px){

    .feature-section{
        padding-left:12px;
        padding-right:12px;
    }


    .feature-header h2{
        font-size:34px;
    }


    .feature-title{
        font-size:30px;
    }


    .feature-card{
        height:178px;
    }


    .feature-content h3{
        font-size:12px;
    }


    .feature-icon{
        flex-basis:38px;
        width:38px;
        height:38px;
        font-size:18px;
    }


    .feature-cta-button{
        font-size:10px;
  
        letter-spacing:2px;
    }
    .feature-cta-button span {
    display: inline-block;
    transform: translateX(20px);
    }
}

@media(max-width:700px){

    .feature-bg-left,
    .feature-bg-right{
        display:none;
    }

}

/* =========================================================
   MOBILE FEATURE SLIDER — 2 CENTER CARDS + SIDE PREVIEWS
   Desktop layout is intentionally untouched.
   ========================================================= */
.feature-slider{position:relative;}
.feature-slider-viewport{position:relative;}
.feature-slider-arrow{display:none;}

@media(max-width:700px){
  .feature-section{overflow:hidden;}
  .feature-slider{position:relative;width:100%;margin:0 auto;padding:0 0 8px;}

  .feature-slider-viewport{
    position:relative;
    width:100%;
    height:clamp(225px,62vw,310px);
    overflow:hidden;
    margin:0 auto;
    padding:0;
    perspective:1100px;
  }

  /* Soft side glow behind the cards, like the reference */
  .feature-slider-viewport::before,
  .feature-slider-viewport::after{
    content:"";
    position:absolute;
    top:15%;
    width:18vw;
    max-width:125px;
    height:70%;
    border-radius:15px;
    z-index:0;
    pointer-events:none;
    opacity:.72;
  }
  .feature-slider-viewport::before{
    left:-7vw;
    background:linear-gradient(180deg,#a04cff,#42146f);
    box-shadow:0 0 28px rgba(155,60,255,.22);
  }
  .feature-slider-viewport::after{
    right:-7vw;
    background:linear-gradient(180deg,#ff3cae,#7b174e);
    box-shadow:0 0 28px rgba(255,55,177,.22);
  }

  .feature-grid{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:100%;
    margin:0 !important;
    max-width:none !important;
    transform:none !important;
    transition:none !important;
  }

  .feature-card{
    position:absolute !important;
    top:50%;
    left:50%;
    flex:none !important;
    width:clamp(150px,36vw,560px) !important;
    height:clamp(225px,62vw,310px) !important;
    margin:0 !important;
    border-radius:16px !important;
    border:1px solid rgba(240,190,53,.95) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.65),0 0 18px rgba(175,61,255,.12) !important;
    transform:translate3d(-50%,-50%,0) scale(.72) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease,filter .45s ease,z-index 0s linear .25s !important;
  }

  /* slot = distance from the two-card center window */
  .feature-card.is-center-1,
  .feature-card.is-center-2{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translate3d(calc(-50% + var(--card-shift)), -50%, 0) scale(1) !important;
    z-index:6 !important;
    filter:none !important;
  }
  .feature-card.is-center-1{--card-shift:calc(-18vw - 5px);}
  .feature-card.is-center-2{--card-shift:calc(18vw + 5px);}

  .feature-card.is-side-left-1,
  .feature-card.is-side-right-1{
    opacity:.62 !important;
    pointer-events:none !important;
    z-index:4 !important;
    filter:saturate(.85) brightness(.78) !important;
  }
  .feature-card.is-side-left-2,
  .feature-card.is-side-right-2{
    opacity:.36 !important;
    pointer-events:none !important;
    z-index:2 !important;
    filter:saturate(.7) brightness(.58) !important;
  }

  .feature-card.is-side-left-1{
    transform:translate3d(calc(-50% - 54vw),-50%,0) scale(.86) !important;
  }
  .feature-card.is-side-left-2{
    transform:translate3d(calc(-50% - 88vw),-50%,0) scale(.76) !important;
  }
  .feature-card.is-side-right-1{
    transform:translate3d(calc(-50% + 54vw),-50%,0) scale(.86) !important;
  }
  .feature-card.is-side-right-2{
    transform:translate3d(calc(-50% + 88vw),-50%,0) scale(.76) !important;
  }

  .feature-card.is-hidden-left{
    transform:translate3d(calc(-50% - 120vw),-50%,0) scale(.65) !important;
    opacity:0 !important;
  }
  .feature-card.is-hidden-right{
    transform:translate3d(calc(-50% + 120vw),-50%,0) scale(.65) !important;
    opacity:0 !important;
  }

  .feature-card:hover{transform:translate3d(-50%,-50%,0) !important;}
  .feature-card.is-center-1:hover{transform:translate3d(calc(-50% - 18vw - 5px),-50%,0) scale(1.01) !important;}
  .feature-card.is-center-2:hover{transform:translate3d(calc(-50% + 18vw + 5px),-50%,0) scale(1.01) !important;}

  .feature-number{
    top:13px !important;
    left:13px !important;
    width:48px !important;
    height:48px !important;
    border-radius:13px !important;
    font-size:22px !important;
    background:rgba(8,5,14,.72) !important;
    border-color:rgba(244,193,75,.75) !important;
  }
  .feature-content{left:14px !important;right:14px !important;bottom:16px !important;gap:10px !important;align-items:flex-end !important;}
  .feature-icon{flex:0 0 58px !important;width:58px !important;height:58px !important;font-size:28px !important;}
  .feature-content h3{font-size:18px !important;line-height:1 !important;}
  .feature-content p{display:block !important;font-size:11px !important;line-height:1.15 !important;margin-top:6px !important;}
  .feature-content::after{bottom:-11px !important;width:34px !important;height:3px !important;}

  .feature-slider-arrow{
display:flex;
align-items:center;
justify-content:center;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    width:52px;
    height:52px;
    padding:0;
    border:1px solid #f0c64d;
    border-radius:50%;
    color:#ffe7a0;
    background:radial-gradient(circle at 35% 30%,#3b2508,#08050a 72%);
    box-shadow:0 0 22px rgba(255,202,64,.3),inset 0 0 14px rgba(255,214,104,.08);
    font-family:Arial,sans-serif;
    font-size:46px;
    font-weight:300;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
  }
  .feature-slider-arrow:active{transform:translateY(-50%) scale(.9);}
  .feature-slider-prev{left:2px;}
  .feature-slider-next{right:2px;}
  .feature-slider-arrow.is-disabled{opacity:.45;}

  .feature-cta{margin-top:26px !important;}
}

@media(max-width:430px){
  .feature-slider-viewport{height:230px;}
  .feature-card{width:calc((100vw - 54px)/2) !important;height:230px !important;border-radius:14px !important;}
  .feature-card.is-center-1{--card-shift:calc(-((100vw - 54px)/4) - 4px);}
  .feature-card.is-center-2{--card-shift:calc(((100vw - 54px)/4) + 4px);}
  .feature-card.is-side-left-1{transform:translate3d(calc(-50% - 43vw),-50%,0) scale(.82) !important;}
  .feature-card.is-side-right-1{transform:translate3d(calc(-50% + 43vw),-50%,0) scale(.82) !important;}
  .feature-card.is-side-left-2{transform:translate3d(calc(-50% - 55vw),-50%,0) scale(.72) !important;}
  .feature-card.is-side-right-2{transform:translate3d(calc(-50% + 55vw),-50%,0) scale(.72) !important;}
  .feature-number{width:42px !important;height:42px !important;font-size:19px !important;}
  .feature-content{left:10px !important;right:10px !important;bottom:11px !important;gap:7px !important;}
  .feature-icon{flex-basis:43px !important;width:43px !important;height:43px !important;font-size:21px !important;}
  .feature-content h3{font-size:13px !important;}
  .feature-content p{font-size:9px !important;}
  .feature-slider-arrow{width:44px;height:44px;font-size:39px;}
  .feature-slider-prev{left:0;}.feature-slider-next{right:0;}
}
/* FADE MÉP TRÊN - KHÔNG CÒN ĐƯỜNG CẮT */
.feature-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.feature-section::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:220px;

    background:linear-gradient(
        to bottom,
        #05040a 0%,
        rgba(5,4,10,.95) 15%,
        rgba(5,4,10,.75) 35%,
        rgba(5,4,10,.35) 65%,
        rgba(5,4,10,0) 100%
    );

    z-index:3;
    pointer-events:none;
}

.feature-header,
.feature-grid,
.feature-cta{
    position:relative;
    z-index:4;
}
@media (max-width:900px){
  html body .content .title,
  html body .content .script{
    width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
  }
}
/* REMOVE MOBILE MENU + LOGIN */
@media (max-width:900px){
  .menu,
  .header:after{display:none !important;}
}

/* FINAL MOBILE TITLE OVERRIDE — logo bố cục theo ảnh mẫu */
@media (max-width: 900px){
  .content .title{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    font-size:clamp(48px,15.2vw,70px) !important;
    line-height:.78 !important;
    letter-spacing:-4.5px !important;
    font-weight:950 !important;
    color:#fff !important;
    text-shadow:0 3px 0 #000, 0 8px 18px rgba(0,0,0,.65) !important;
  }

  .content .script{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:max-content !important;
    max-width:calc(100vw - 28px) !important;
    margin:-15px 0 0 2px !important;
    padding:0 !important;
    white-space:nowrap !important;
    font-size:clamp(39px,12.7vw,59px) !important;
    line-height:.82 !important;
    letter-spacing:-3.2px !important;
    font-weight:950 !important;
    font-style:italic !important;
    color:#a53cff !important;

    transform-origin:left center !important;
    text-shadow:
      0 2px 0 #5b129d,
      0 0 12px rgba(170,55,255,.42),
      0 6px 12px rgba(0,0,0,.75) !important;
  }

  .content .mp{
    position:relative !important;
    z-index:4 !important;
    display:block !important;
    width:100% !important;
    margin:16px 0 24px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1 !important;
    letter-spacing:7px !important;
    white-space:nowrap !important;
    font-weight:900 !important;
  }
}

@media (max-width:430px){
  .content .title{
    font-size:56px !important;
    letter-spacing:-4px !important;
  }
  .content .script{
    font-size:43px !important;
    margin-top:-13px !important;
    letter-spacing:-3px !important;
  }
  .content .mp{
    font-size:11px !important;
    letter-spacing:5.5px !important;
    margin-top:15px !important;
  }
}

/* FINAL GTA TYPOGRAPHY + STACKED TITLE OVERRIDE */
500;600;700;800&family=Permanent+Marker&display=swap');

body{font-family:'Barlow Condensed',Arial,sans-serif;}
.nav a,.login,.btn,.desc,.server,.ai,.stats,.footer,.mobile-server-card,.mobile-feature,.mobile-bottom-nav{font-family:'Barlow Condensed',Arial,sans-serif;}

/* Desktop + mobile: GTA SAN / San Andreas overlap like the reference */
.content .title{
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-2px;
  line-height:.82;
  white-space:nowrap;
  position:relative;
  z-index:2;
  text-shadow:0 8px 26px rgba(0,0,0,.75);
}
.content .script{
  font-family:'Be Vietnam Pro',sans-serif;
  font-weight:1000;
  font-style:normal;
  color:#a83cff;
  letter-spacing:-1.5px;
  line-height:.72;
  position:relative;
  z-index:3;
  margin-left:-2px;
  margin-top:-10px;
  white-space:nowrap;
  transform-origin:left center;
  text-shadow:0 3px 0 rgba(35,8,60,.9),0 0 24px rgba(166,55,255,.5);
}
.content .mp{
  font-family:'Barlow Condensed',Arial,sans-serif;
  font-weight:700;
  letter-spacing:10px;
  margin-top:18px;
  position:relative;
  z-index:4;
}

@media (min-width:901px){
  .content .title{font-size:clamp(78px,8vw,128px);}
  .content .script{font-size:clamp(62px,6.1vw,102px);}
  .content .mp{font-size:18px;margin-left:4px;}
}

@media (max-width:900px){
  .content .title{
    font-size:clamp(58px,15.4vw,76px);
    letter-spacing:-1.5px;
    line-height:.82;
  }
  .content .script{
    font-size:clamp(45px,12.5vw,63px);
    letter-spacing:-1px;
    margin-left:-1px;
    margin-top:-8px;
    line-height:.72;
  }
  .content .mp{
    font-size:12px;
    letter-spacing:6px;
    margin:16px 0 22px 2px;
  }
}

@media (max-width:430px){
  .content .title{font-size:58px;}
  .content .script{font-size:45px;}
}

/* =========================================================
   MOBILE FEATURE SLIDER — FINAL FIX
   2 cards side-by-side + layered previews
   Desktop is untouched.
   ========================================================= */
@media (max-width:700px){
  .feature-section{overflow:hidden !important;}
  .feature-slider{position:relative !important;width:100% !important;margin:0 !important;}
  .feature-slider-viewport{
    position:relative !important;
    width:100% !important;
    height:230px !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }
  .feature-grid{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
    transform:none !important;
  }
  .feature-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:calc(50vw - 18px) !important;
    height:230px !important;
    margin:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translate(-50%,-50%) scale(.72) !important;
    z-index:1 !important;
    transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .35s ease,filter .35s ease !important;
  }

  /* Two main cards: 01 + 02 */
  .feature-card.is-center-1{
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:10 !important;
    transform:translate(calc(-50% - 25vw + 9px),-50%) scale(1) !important;
    filter:none !important;
  }
  .feature-card.is-center-2{
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:10 !important;
    transform:translate(calc(-50% + 25vw - 9px),-50%) scale(1) !important;
    filter:none !important;
  }

  /* First preview layer */
  .feature-card.is-side-left-1{
    opacity:.58 !important;
    z-index:5 !important;
    transform:translate(calc(-50% - 75vw),-50%) scale(.84) !important;
    filter:brightness(.72) saturate(.8) !important;
  }
  .feature-card.is-side-right-1{
    opacity:.58 !important;
    z-index:5 !important;
    transform:translate(calc(-50% + 75vw),-50%) scale(.84) !important;
    filter:brightness(.72) saturate(.8) !important;
  }

  /* Second preview layer */
  .feature-card.is-side-left-2{
    opacity:.35 !important;
    z-index:3 !important;
    transform:translate(calc(-50% - 102vw),-50%) scale(.72) !important;
    filter:brightness(.55) saturate(.65) !important;
  }
  .feature-card.is-side-right-2{
    opacity:.35 !important;
    z-index:3 !important;
    transform:translate(calc(-50% + 102vw),-50%) scale(.72) !important;
    filter:brightness(.55) saturate(.65) !important;
  }

  .feature-card.is-hidden-left{
    opacity:0 !important;
    transform:translate(calc(-50% - 130vw),-50%) scale(.6) !important;
  }
  .feature-card.is-hidden-right{
    opacity:0 !important;
    transform:translate(calc(-50% + 130vw),-50%) scale(.6) !important;
  }

  .feature-card:hover{filter:none !important;}
  .feature-card.is-center-1:hover{transform:translate(calc(-50% - 25vw + 9px),-50%) scale(1.01) !important;}
  .feature-card.is-center-2:hover{transform:translate(calc(-50% + 25vw - 9px),-50%) scale(1.01) !important;}

  /* Compact mobile card content */
  .feature-number{
    top:12px !important;left:12px !important;
    width:42px !important;height:42px !important;
    font-size:19px !important;border-radius:12px !important;
  }
  .feature-content{
    left:10px !important;right:10px !important;bottom:10px !important;
    gap:7px !important;align-items:flex-end !important;
  }
  .feature-icon{
    flex:0 0 43px !important;width:43px !important;height:43px !important;
    font-size:21px !important;
  }
  .feature-content h3{font-size:13px !important;line-height:1 !important;}
  .feature-content p{display:block !important;font-size:9px !important;line-height:1.15 !important;margin-top:5px !important;}
  .feature-content::after{bottom:-8px !important;width:25px !important;height:2px !important;}

  .feature-slider-arrow{
    display:grid !important;place-items:center !important;
    position:absolute !important;top:50% !important;
    width:44px !important;height:44px !important;
    z-index:30 !important;
    transform:translateY(-50%) !important;
    font-size:39px !important;
  }
  .feature-slider-prev{left:0 !important;}
  .feature-slider-next{right:0 !important;}
}

@media (max-width:360px){
  .feature-slider-viewport{height:215px !important;}
  .feature-card{height:215px !important;width:calc(50vw - 15px) !important;}
  .feature-card.is-center-1{transform:translate(calc(-50% - 25vw + 7px),-50%) scale(1) !important;}
  .feature-card.is-center-2{transform:translate(calc(-50% + 25vw - 7px),-50%) scale(1) !important;}
}

/* FINAL MOBILE FEATURE CAROUSEL — match 2 large cards + layered side previews */
@media (max-width:700px){
  .feature-section{overflow:hidden !important;}
  .feature-slider{position:relative !important;width:100% !important;margin:0 !important;padding:0 !important;}
  .feature-slider-viewport{
    position:relative !important;
    width:100% !important;
    height:clamp(245px,64vw,330px) !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    perspective:1200px !important;
  }
  .feature-grid{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
  }
  .feature-card{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:calc(50vw - 12px) !important;
    height:clamp(245px,64vw,330px) !important;
    margin:0 !important;
    border-radius:16px !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translate3d(-50%,-50%,0) scale(.72) !important;
    transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease,filter .45s ease !important;
    will-change:transform,opacity;
  }

  /* Main pair: nearly fills the screen, with only a small gap */
  .feature-card.is-center-1{
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:10 !important;
    transform:translate3d(calc(-50% - 25vw + 6px),-50%,0) scale(1) !important;
  }
  .feature-card.is-center-2{
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:10 !important;
    transform:translate3d(calc(-50% + 25vw - 6px),-50%,0) scale(1) !important;
  }

  /* Layer 1: clearly visible cards peeking from both sides */
  .feature-card.is-side-left-1,
  .feature-card.is-side-right-1{
    opacity:.78 !important;
    pointer-events:none !important;
    z-index:6 !important;
    filter:brightness(.72) saturate(.9) !important;
  }
  .feature-card.is-side-left-1{
    transform:translate3d(calc(-50% - 61vw),-50%,0) scale(.86) !important;
  }
  .feature-card.is-side-right-1{
    transform:translate3d(calc(-50% + 61vw),-50%,0) scale(.86) !important;
  }

  /* Layer 2: second, darker peek behind layer 1 */
  .feature-card.is-side-left-2,
  .feature-card.is-side-right-2{
    opacity:.48 !important;
    pointer-events:none !important;
    z-index:4 !important;
    filter:brightness(.48) saturate(.7) !important;
  }
  .feature-card.is-side-left-2{
    transform:translate3d(calc(-50% - 91vw),-50%,0) scale(.72) !important;
  }
  .feature-card.is-side-right-2{
    transform:translate3d(calc(-50% + 91vw),-50%,0) scale(.72) !important;
  }

  .feature-card.is-hidden-left{
    opacity:0 !important;
    transform:translate3d(calc(-50% - 125vw),-50%,0) scale(.62) !important;
  }
  .feature-card.is-hidden-right{
    opacity:0 !important;
    transform:translate3d(calc(-50% + 125vw),-50%,0) scale(.62) !important;
  }

  /* Card contents sized like the reference, not the tiny previous version */
  .feature-number{
    top:12px !important;
    left:12px !important;
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    font-size:19px !important;
  }
  .feature-content{
    left:10px !important;
    right:10px !important;
    bottom:12px !important;
    gap:7px !important;
    align-items:flex-end !important;
  }
  .feature-icon{
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    font-size:21px !important;
  }
  .feature-content h3{font-size:13px !important;line-height:1 !important;}
  .feature-content p{display:block !important;font-size:9px !important;line-height:1.15 !important;margin-top:5px !important;}
  .feature-content::after{bottom:-8px !important;width:26px !important;height:2px !important;}

  /* arrows sit outside/over the main pair like the reference */
  .feature-slider-arrow{
    display:grid !important;
    place-items:center !important;
    position:absolute !important;
    top:50% !important;
    z-index:30 !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    transform:translateY(-50%) !important;
    font-size:39px !important;
    border:1px solid #f0c64d !important;
    border-radius:50% !important;
  }
  .feature-slider-prev{left:0 !important;}
  .feature-slider-next{right:0 !important;}
}

@media (max-width:430px){
  .feature-slider-viewport{height:clamp(245px,64vw,270px) !important;}
  .feature-card{height:clamp(245px,64vw,270px) !important;width:calc(50vw - 11px) !important;}
  .feature-card.is-center-1{transform:translate3d(calc(-50% - 25vw + 5px),-50%,0) scale(1) !important;}
  .feature-card.is-center-2{transform:translate3d(calc(-50% + 25vw - 5px),-50%,0) scale(1) !important;}
  .feature-card.is-side-left-1{transform:translate3d(calc(-50% - 61vw),-50%,0) scale(.84) !important;}
  .feature-card.is-side-right-1{transform:translate3d(calc(-50% + 61vw),-50%,0) scale(.84) !important;}
  .feature-card.is-side-left-2{transform:translate3d(calc(-50% - 91vw),-50%,0) scale(.70) !important;}
  .feature-card.is-side-right-2{transform:translate3d(calc(-50% + 91vw),-50%,0) scale(.70) !important;}
}

/* FINAL MOBILE: ONE LARGE CENTER CARD + LAYERED PREVIEWS */
@media (max-width:700px){
  .feature-section{overflow:hidden !important;}
  .feature-slider{position:relative !important;width:100% !important;margin:0 !important;padding:0 !important;}
  .feature-slider-viewport{
    position:relative !important;
    width:100% !important;
    height:clamp(275px,72vw,315px) !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }
  .feature-grid{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
  }
  .feature-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:clamp(250px,74vw,330px) !important;
    height:clamp(275px,72vw,315px) !important;
    margin:0 !important;
    border-radius:16px !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translate3d(-50%,-50%,0) scale(.65) !important;
    z-index:1 !important;
    transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease,filter .45s ease !important;
    will-change:transform,opacity;
  }

  /* ONE and only ONE main card */
  .feature-card.is-center{
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:10 !important;
    filter:none !important;
    transform:translate3d(-50%,-50%,0) scale(1) !important;
  }

  /* layered cards peeking from both sides */
  .feature-card.is-side-left-1,
  .feature-card.is-side-right-1{
    opacity:.70 !important;
    pointer-events:none !important;
    z-index:6 !important;
    filter:brightness(.68) saturate(.85) !important;
  }
  .feature-card.is-side-left-1{
    transform:translate3d(calc(-50% - 52vw),-50%,0) scale(.86) !important;
  }
  .feature-card.is-side-right-1{
    transform:translate3d(calc(-50% + 52vw),-50%,0) scale(.86) !important;
  }

  .feature-card.is-side-left-2,
  .feature-card.is-side-right-2{
    opacity:.38 !important;
    pointer-events:none !important;
    z-index:4 !important;
    filter:brightness(.48) saturate(.65) !important;
  }
  .feature-card.is-side-left-2{
    transform:translate3d(calc(-50% - 78vw),-50%,0) scale(.72) !important;
  }
  .feature-card.is-side-right-2{
    transform:translate3d(calc(-50% + 78vw),-50%,0) scale(.72) !important;
  }

  .feature-card.is-hidden-left{
    opacity:0 !important;
    transform:translate3d(calc(-50% - 115vw),-50%,0) scale(.6) !important;
  }
  .feature-card.is-hidden-right{
    opacity:0 !important;
    transform:translate3d(calc(-50% + 115vw),-50%,0) scale(.6) !important;
  }

  .feature-card:hover{filter:none !important;}
  .feature-card.is-center:hover{
    transform:translate3d(-50%,-50%,0) scale(1.01) !important;
  }

  .feature-number{
    top:13px !important;
    left:13px !important;
    width:48px !important;
    height:48px !important;
    border-radius:13px !important;
    font-size:22px !important;
  }
  .feature-content{
    left:14px !important;
    right:14px !important;
    bottom:15px !important;
    gap:10px !important;
    align-items:flex-end !important;
  }
  .feature-icon{
    flex:0 0 55px !important;
    width:55px !important;
    height:55px !important;
    font-size:27px !important;
  }
  .feature-content h3{font-size:18px !important;line-height:1 !important;}
  .feature-content p{display:block !important;font-size:11px !important;line-height:1.15 !important;margin-top:6px !important;}
  .feature-content::after{bottom:-10px !important;width:32px !important;height:3px !important;}

  .feature-slider-arrow{
    display:grid !important;
    place-items:center !important;
    position:absolute !important;
    top:50% !important;
    z-index:30 !important;
    width:48px !important;
    height:48px !important;
    padding:0 !important;
    transform:translateY(-50%) !important;
    font-size:42px !important;
  }
  .feature-slider-prev{left:4px !important;}
  .feature-slider-next{right:4px !important;}
}

@media (max-width:430px){
  .feature-slider-viewport{height:270px !important;}
  .feature-card{width:74vw !important;height:270px !important;}
  .feature-number{width:43px !important;height:43px !important;font-size:19px !important;}
  .feature-content{left:11px !important;right:11px !important;bottom:11px !important;gap:7px !important;}
  .feature-icon{flex-basis:45px !important;width:45px !important;height:45px !important;font-size:22px !important;}
  .feature-content h3{font-size:14px !important;}
  .feature-content p{font-size:9px !important;}
  .feature-slider-arrow{width:44px !important;height:44px !important;font-size:39px !important;}
}

/* MOBILE: remove the extra purple/pink side panels behind the carousel */
@media (max-width:700px){
  .feature-slider-viewport::before,
  .feature-slider-viewport::after{
    display:none !important;
    content:none !important;
  }
}
@media (max-width:700px){
    .feature-slider-arrow{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 0 4px 0 !important;
        line-height:1 !important;
        text-align:center !important;
    }

    .feature-slider-prev{
        padding-right:2px !important;
    }

    .feature-slider-next{
        padding-left:2px !important;
    }
}

/* =========================================================
   PHẦN 03 — KHÁM PHÁ THẾ GIỚI SAN ANDREAS
   Desktop layout tuned to the supplied reference image.
   ========================================================= */
.explore-section{
    position:relative;
    margin:0 25px;
    padding:40px 0 20px;
    min-height:820px;
    overflow:hidden;

    border-radius:14px;
    background:#07050f;
}

/* BACKGROUND */
.explore-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(5,3,14,.25) 0%,
            rgba(5,3,13,.35) 35%,
            rgba(5,3,13,.88) 75%,
            #06040c 100%
        ),
        url("hero1.png");

    background-size:cover;
    background-position:center 28%;

    /* 4 góc fade */
    -webkit-mask-image:radial-gradient(
        ellipse at center,
        #000 38%,
        rgba(0,0,0,.9) 55%,
        rgba(0,0,0,.5) 75%,
        transparent 100%
    );

    mask-image:radial-gradient(
        ellipse at center,
        #000 38%,
        rgba(0,0,0,.9) 55%,
        rgba(0,0,0,.5) 75%,
        transparent 100%
    );
}

/* NỘI DUNG / CARD */
.explore-section > *{
    position:relative;
    z-index:2;
}
.explore-section::after{
  content:"SAN ANDREAS";
  position:absolute;
  right:48px;top:16px;
  z-index:1;
  font-family:'Anton',Impact,sans-serif;
  font-size:92px;line-height:1;
  letter-spacing:-3px;
     color: rgb(212 187 255 / 42%);
  pointer-events:none;
}
.explore-inner{position:relative;z-index:2;max-width:1432px;margin:0 auto;}
.explore-heading{padding:4px 25px 24px;}
.explore-kicker{
  color:#b94cff;font-size:13px;font-weight:900;letter-spacing:5px;margin-bottom:8px;
}
.explore-title{
  font-family:'Anton',Impact,sans-serif;
  font-size:39px;line-height:1;
  letter-spacing:.6px;color:#fff;
  text-shadow:0 4px 14px #000;
}
.explore-desc{
  margin-top:9px;color:#c2bdc9;font-size:13px;line-height:1.45;max-width:560px;
}
.explore-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.explore-card{
  position:relative;
  height:513px;
  min-height:513px;
  overflow:hidden;
  border-radius:15px;
  border:1px solid rgba(174,76,255,.42);
  background:#08060e;
  box-shadow:0 12px 35px rgba(0,0,0,.62),inset 0 0 30px rgba(130,35,220,.05);
}
.explore-card::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(4,2,10,.02) 0%,rgba(5,3,12,.05) 38%,rgba(5,3,12,.42) 54%,rgba(5,3,12,.96) 70%,#07050d 100%);
}
.explore-image{
  position:absolute;
  left:0;right:0;top:0;
  height:270px;
  background-size:cover;
  background-position:center;
  transform:none;
}
.explore-top{
  position:absolute;left:14px;right:14px;top:14px;z-index:3;
  display:flex;align-items:center;gap:11px;
}
.explore-badge{
  width:54px;height:54px;display:grid;place-items:center;border-radius:13px;
  background:rgba(20,7,35,.82);
  border:1px solid rgba(184,79,255,.78);
  color:#bd54ff;font-size:24px;
  box-shadow:0 0 18px rgba(165,55,255,.16);
  backdrop-filter:blur(7px);
}
.explore-label{font-size:12px;letter-spacing:4px;color:#b85cff;font-weight:900;margin-bottom:2px;}
.explore-card h3{
  margin:0;
  font-family:'Anton',Impact,sans-serif;
  font-size:30px;line-height:.9;color:#fff;
  text-shadow:0 3px 9px #000;
}
.explore-body{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;}
.explore-body p{    color: #ffffff;
    font-size: 14px;line-height:1.3;margin:0 4px 10px;}
.explore-list{display:grid;gap:5px;margin-bottom:10px;}
.explore-item{
  display:flex;align-items:center;gap:9px;
  min-height:40px;padding:5px 9px;border-radius:9px;
  background:rgba(8,6,15,.84);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.explore-item b{
  width:27px;height:27px;display:grid;place-items:center;border-radius:7px;
  color:#c75bff;background:rgba(132,37,201,.17);font-size:14px;flex:none;
}
.explore-item strong{font-size:14px;color:#eee;display:block;line-height:1.05;}
.explore-item span{font-size:11px;color:#888;display:block;margin-top:3px;line-height:1.05;}
.explore-more{color:#9993a1;text-align:center;font-size:11px;margin:7px 0 10px;}
.explore-btn{
  width:100%;height:43px;border:1px solid #ad45ff;border-radius:8px;
  background:linear-gradient(90deg,rgba(74,15,122,.48),rgba(20,9,32,.86));
  color:#fff;font-size:13px;font-weight:900;letter-spacing:1.7px;cursor:pointer;
}
.explore-card.org{border-color:rgba(255,55,145,.52)}
.explore-card.org .explore-label{color:#ff4e9d}.explore-card.org .explore-badge{color:#ff4e9d;border-color:rgba(255,70,153,.72)}
.explore-card.org .explore-item b{color:#ff4e9d;background:rgba(220,25,113,.13)}
.explore-card.org .explore-btn{border-color:#ff3f93}
.explore-card.gang{border-color:rgba(231,177,47,.55)}
.explore-card.gang .explore-label{color:#f2b43a}.explore-card.gang .explore-badge{color:#f2b43a;border-color:rgba(244,184,63,.75)}
.explore-card.gang .explore-item b{color:#f2b43a;background:rgba(210,140,20,.12)}
.explore-card.gang .explore-btn{border-color:#d99d27}
.explore-card.system{border-color:rgba(63,137,255,.55)}
.explore-card.system .explore-label{color:#4da2ff}.explore-card.system .explore-badge{color:#4da2ff;border-color:rgba(77,162,255,.75)}
.explore-card.system .explore-item b{color:#4da2ff;background:rgba(37,106,201,.13)}
.explore-card.system .explore-btn{border-color:#398cff}
.explore-stats{
  margin:28px -9px 0;
  min-height:89px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(167,73,255,.25);
  border-radius:10px;
  background:rgba(8,6,15,.83);
  backdrop-filter:blur(12px);overflow:hidden;
}
.explore-stat{min-height:89px;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;border-right:1px solid rgba(255,255,255,.09)}
.explore-stat:last-child{border-right:0}
.explore-stat-icon{font-size:29px;color:#b953ff}
.explore-stat:nth-child(2) .explore-stat-icon{color:#f044a1}.explore-stat:nth-child(3) .explore-stat-icon{color:#e9b13b}.explore-stat:nth-child(4) .explore-stat-icon{color:#4d9eff}
.explore-stat h4{font-family:'Anton',Impact,sans-serif;font-size:25px;line-height:1;color:#fff}
.explore-stat p{font-size:11px;color:#918b98;margin-top:4px;letter-spacing:1px}
@media(max-width:1100px){
  .explore-inner{max-width:none;margin:0 18px}
  .explore-grid{grid-template-columns:repeat(2,1fr)}
  .explore-card{height:500px;min-height:500px}
  .explore-stats{margin-left:0;margin-right:0;grid-template-columns:repeat(2,1fr)}
  .explore-stat:nth-child(2){border-right:0}.explore-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
}
@media(max-width:700px){
  .explore-section{margin:0 10px;padding:55px 12px 30px}
  .explore-inner{margin:0}
  .explore-heading{padding:0 2px 20px}
  .explore-title{font-size:31px}.explore-desc{font-size:11px}
  .explore-grid{grid-template-columns:1fr;gap:10px}.explore-card{height:470px;min-height:470px}
  .explore-stats{grid-template-columns:repeat(2,1fr);margin-top:18px}.explore-stat{min-height:75px}.explore-stat h4{font-size:20px}.explore-stat-icon{font-size:24px}
  .explore-section::after{font-size:55px;right:15px;top:20px}
}

/* =========================================================
   GTA SAN — PREMIUM ACCOUNT BUTTONS
   ========================================================= */
.account-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px !important;
  width:100%;
  max-width:790px;
  margin:30px auto 0 !important;
}
.account-btn{
  position:relative;
  isolation:isolate;
  height:86px !important;
  min-width:0 !important;
  padding:10px 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(190,83,255,.62) !important;
  overflow:hidden;
  display:grid !important;
  grid-template-columns:58px 1fr 30px;
  align-items:center;
  gap:14px;
  text-align:left;
  background:rgba(10,7,19,.66);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 35px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.account-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(115deg,rgba(153,40,255,.28),rgba(91,20,160,.12) 45%,rgba(255,255,255,.025));
}
.account-btn::after{
  content:"";
  position:absolute;
  width:150px;height:150px;
  left:-55px;top:-80px;
  z-index:-1;
  border-radius:50%;
  background:rgba(215,82,255,.25);
  filter:blur(28px);
  pointer-events:none;
}
.register-btn{
  background:linear-gradient(120deg,rgba(126,26,242,.96),rgba(190,55,255,.88));
  border-color:rgba(220,142,255,.9) !important;
  box-shadow:0 12px 38px rgba(128,25,255,.28),0 0 26px rgba(184,61,255,.2),inset 0 1px 0 rgba(255,255,255,.28);
}
.login-btn{
  background:linear-gradient(120deg,rgba(8,6,18,.88),rgba(28,12,43,.72));
  box-shadow:0 12px 38px rgba(0,0,0,.4),0 0 22px rgba(164,59,255,.08),inset 0 1px 0 rgba(255,255,255,.08);
}
.account-icon{
  position:relative;
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(10,4,23,.24);
  color:#fff;
  font-size:22px;
  box-shadow:inset 0 0 18px rgba(255,255,255,.06),0 0 18px rgba(205,78,255,.18);
}
.login-btn .account-icon{
  background:rgba(162,47,255,.08);
  border-color:rgba(194,92,255,.55);
  color:#d99bff;
}
.account-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.account-copy strong{
  font-size:19px;
  line-height:1.05;
  letter-spacing:1px;
  font-weight:950;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.account-copy small{
  margin-top:7px;
  color:rgba(255,255,255,.72);
  font-size:9px;
  letter-spacing:2px;
  font-weight:700;
  white-space:nowrap;
}
.account-arrow{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:13px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  transition:transform .28s ease,background .28s ease;
}
.account-btn:hover{
  transform:translateY(-4px);
  border-color:rgba(222,136,255,.95) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.42),0 0 34px rgba(172,57,255,.25);
}
.account-btn:hover .account-arrow{
  transform:translateX(4px);
  background:rgba(255,255,255,.14);
}
.register-btn:hover{
  box-shadow:0 18px 48px rgba(117,25,240,.38),0 0 42px rgba(193,62,255,.32);
}
@media(max-width:900px){
  .account-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    margin:0 auto !important;
  }
  .account-btn{
    height:68px !important;
    padding:8px 8px !important;
    grid-template-columns:38px minmax(0,1fr) 20px;
    gap:7px;
    border-radius:12px !important;
  }
  .account-icon{
    width:36px;height:36px;border-radius:10px;font-size:14px;
  }
  .account-copy strong{font-size:14px;letter-spacing:.6px;}
  .account-copy small{font-size:8px;letter-spacing:.8px;margin-top:4px;}
  .account-arrow{width:20px;height:20px;font-size:8px;}
}
@media(max-width:430px){
  .account-actions{gap:8px !important;}
  .account-btn{height:64px !important;padding:7px 6px !important;grid-template-columns:34px minmax(0,1fr) 18px;gap:5px;}
  .account-icon{width:32px;height:32px;font-size:12px;border-radius:9px;}
  .account-copy strong{font-size:14px;}
  .account-copy small{font-size:8px;letter-spacing:.45px;}
  .account-arrow{width:18px;height:18px;font-size:7px;}
}

/* FINAL FIX — tạo khoảng cách giữa nút tài khoản và THỐNG KÊ */
@media (max-width: 900px){
  .account-actions{
    margin-bottom: 22px !important;
  }

  .stats{
    margin-top: 22px !important;
  }
}

@media (max-width: 430px){
  .account-actions{
    margin-bottom: 20px !important;
  }

  .stats{
    margin-top: 20px !important;
  }
}

/* AUTO SLIDER 3S + TOUCH SWIPE — keep account buttons unchanged */
.feature-slider-arrow,.feature-slider-prev,.feature-slider-next{display:none !important;}
@media(max-width:700px){
  .feature-slider-viewport{touch-action:pan-y;cursor:grab;}
  .feature-slider-viewport.is-dragging{cursor:grabbing;}
  .feature-card{-webkit-user-select:none;user-select:none;}
}

/* =========================================================
   GTA AE — ACCOUNT VERSION POPUP
   Designed to closely match the supplied reference image.
   ========================================================= */
.account-version-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.account-version-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.account-version-panel{
  position:relative;
  width:min(100%,1040px);
  max-height:min(94vh,1360px);
  overflow:auto;
  border:2px solid rgba(156,170,190,.48);
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(3,10,15,.84),rgba(3,4,7,.96)),
    url('hero.png') center/cover no-repeat;
  box-shadow:
    0 30px 100px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.035);
  padding:42px 42px 34px;
  scrollbar-width:thin;
  scrollbar-color:rgba(210,170,60,.55) transparent;
}
.account-version-panel::-webkit-scrollbar{width:6px}
.account-version-panel::-webkit-scrollbar-track{background:transparent}
.account-version-panel::-webkit-scrollbar-thumb{background:rgba(210,170,60,.5);border-radius:99px}
.account-version-close{
  position:absolute;
  top:24px;
  right:24px;
  width:70px;
  height:70px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(145deg,rgba(35,35,35,.88),rgba(8,8,8,.96));
  color:#fff;
  font-size:48px;
  line-height:1;
  font-family:Arial,sans-serif;
  font-weight:300;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.account-version-close:hover{transform:scale(1.04);border-color:rgba(255,205,70,.65);background:#171717}
.account-version-head{
  padding:8px 84px 28px 10px;
  text-align:left;
}
.account-version-brand{
  display:block;
  font-family:'Permanent Marker',cursive;
  color:#fff;
  font-size:clamp(34px,5vw,66px);
  line-height:.86;
  text-shadow:2px 3px 0 #111,0 0 18px rgba(255,255,255,.12);
  letter-spacing:-2px;
  margin-bottom:5px;
}
.account-version-brand span{
  display:block;
  font-family:Anton,'Barlow Condensed',sans-serif;
  font-style:italic;
  font-size:.42em;
  line-height:1;
  color:#ff8b00;
  letter-spacing:1px;
  margin-left:4px;
  text-shadow:2px 2px 0 #111;
}
.account-version-title{
  margin:0;
  font-family:Anton,'Barlow Condensed',sans-serif;
  font-size:clamp(38px,6.3vw,78px);
  line-height:.92;
  color:#fff;
  letter-spacing:2px;
  text-transform:uppercase;
  text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 22px rgba(255,255,255,.08);
}
.account-version-subtitle{
  margin:14px 0 0;
  color:#ddd;
  font-family:'Barlow Condensed',Arial,sans-serif;
  font-size:clamp(18px,2.3vw,28px);
  line-height:1.15;
}
.account-version-subtitle strong{color:#92df46}
.account-version-list{display:grid;gap:16px;margin:0 0 22px}
.account-version-card{
  position:relative;
  min-height:158px;
  display:grid;
  grid-template-columns:150px 1fr 145px;
  align-items:center;
  gap:28px;
  padding:20px 24px 20px 30px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
  background:rgba(5,11,14,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 28px rgba(0,0,0,.24);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  cursor:pointer;
}
.account-version-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,transparent 44%,rgba(255,255,255,.025) 62%,transparent 100%);
}
.account-version-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 35px rgba(0,0,0,.34)}
.account-version-card.v1{border-color:rgba(150,232,72,.62);background:linear-gradient(90deg,rgba(19,33,20,.88),rgba(4,12,14,.9)),url('features/feature-01.jpg') center/cover}
.account-version-card.v2{border-color:rgba(255,175,20,.68);background:linear-gradient(90deg,rgba(40,28,8,.86),rgba(8,9,10,.91)),url('features/feature-02.jpg') center/cover}
.account-version-card.v3{border-color:rgba(184,92,255,.72);background:linear-gradient(90deg,rgba(31,14,43,.88),rgba(7,6,12,.92)),url('features/feature-03.jpg') center/cover}
.account-version-card.v4{border-color:rgba(30,176,255,.72);background:linear-gradient(90deg,rgba(7,25,38,.88),rgba(4,8,13,.92)),url('features/feature-04.jpg') center/cover}
.account-version-number{
  width:126px;height:126px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:16px;
  border:1px solid currentColor;
  background:rgba(0,0,0,.34);
  box-shadow:inset 0 0 25px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.32);
  font-family:Anton,'Barlow Condensed',sans-serif;
  font-size:64px;
  line-height:.85;
}
.account-version-number small{font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:1px;margin-top:12px}
.v1 .account-version-number{color:#9be94d}.v2 .account-version-number{color:#ffad16}.v3 .account-version-number{color:#bd73ff}.v4 .account-version-number{color:#37b9ff}
.account-version-copy{min-width:0;border-left:1px solid rgba(255,255,255,.2);padding-left:30px}
.account-version-name{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:10px}
.account-version-name h3{margin:0;color:#fff;font-family:Anton,'Barlow Condensed',sans-serif;font-size:38px;line-height:1;text-transform:uppercase;letter-spacing:.5px}
.account-version-tag{padding:6px 12px;border:1px solid currentColor;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;text-transform:uppercase;background:rgba(0,0,0,.24)}
.v1 .account-version-tag{color:#9be94d}.v2 .account-version-tag{color:#ffad16}.v3 .account-version-tag{color:#bd73ff}.v4 .account-version-tag{color:#37b9ff}
.account-version-copy p{margin:0;color:#e5e5e5;font-family:'Barlow Condensed',Arial,sans-serif;font-size:22px;line-height:1.25}
.account-version-copy .feature-line{margin-top:8px;font-size:18px;color:#cfcfcf}
.feature-line::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:10px;vertical-align:1px}
.v1 .feature-line::before{background:#8edc47}.v2 .feature-line::before{background:#ff9d13}.v3 .feature-line::before{background:#a75bea}.v4 .feature-line::before{background:#3caef0}
.account-version-game-icon{
  width:118px;height:118px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid currentColor;
  background:rgba(0,0,0,.34);
  font-size:56px;
  box-shadow:0 0 26px rgba(255,255,255,.05),inset 0 0 25px rgba(255,255,255,.03);
}
.v1 .account-version-game-icon{color:#9be94d}.v2 .account-version-game-icon{color:#ffad16}.v3 .account-version-game-icon{color:#bd73ff}.v4 .account-version-game-icon{color:#37b9ff}
.account-version-footer{
  min-height:150px;
  display:grid;
  grid-template-columns:150px 1fr auto;
  align-items:center;
  gap:28px;
  padding:22px 24px 22px 30px;
  border-radius:20px;
  border:1px solid rgba(185,145,55,.5);
  background:linear-gradient(90deg,rgba(20,20,18,.9),rgba(7,8,9,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 28px rgba(0,0,0,.25);
}
.account-version-badge{width:112px;height:112px;display:grid;place-items:center;border-radius:22px;border:1px solid rgba(255,190,45,.45);background:rgba(0,0,0,.35);font-family:Anton,'Barlow Condensed',sans-serif;color:#eee;font-size:28px;text-align:center;line-height:.9;text-shadow:0 2px 0 #000}
.account-version-footer-copy{border-left:1px solid rgba(255,255,255,.2);padding-left:28px}
.account-version-footer-copy h4{margin:0 0 9px;font-family:'Barlow Condensed',sans-serif;color:#fff;font-size:25px;text-transform:uppercase}
.account-version-footer-copy h4 strong{color:#ffb522}
.account-version-benefits{display:flex;gap:22px;flex-wrap:wrap;color:#bbb;font-family:'Barlow Condensed',sans-serif;font-size:14px}
.account-version-cta{
  min-width:220px;height:64px;
  border:2px solid #ffcf45;border-radius:11px;
  background:linear-gradient(180deg,#ffc83f,#f39a08);
  color:#171006;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:Anton,'Barlow Condensed',sans-serif;font-size:26px;letter-spacing:.5px;
  box-shadow:0 0 22px rgba(255,178,30,.25),inset 0 2px 0 rgba(255,255,255,.55);
  transition:transform .2s ease,box-shadow .2s ease;
}
.account-version-cta:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(255,178,30,.4),inset 0 2px 0 rgba(255,255,255,.6)}
body.account-popup-open{overflow:hidden}

@media(max-width:760px){
  .account-version-modal{padding:10px}
  .account-version-panel{padding:24px 13px 16px;border-radius:20px;max-height:96vh}
  .account-version-close{top:12px;right:12px;width:48px;height:48px;font-size:34px;border-radius:13px}
  .account-version-head{padding:6px 60px 20px 5px}
  .account-version-brand{font-size:31px}
  .account-version-title{font-size:39px;letter-spacing:1px}
  .account-version-subtitle{font-size:16px;margin-top:9px}
  .account-version-list{gap:10px}
  .account-version-card{min-height:112px;grid-template-columns:68px 1fr;gap:12px;padding:11px}
  .account-version-number{width:66px;height:90px;border-radius:12px;font-size:43px}
  .account-version-number small{font-size:10px;margin-top:8px}
  .account-version-copy{border-left:0;padding-left:0}
  .account-version-name{gap:6px;margin-bottom:5px}
  .account-version-name h3{font-size:23px}
  .account-version-tag{padding:4px 7px;font-size:11px;border-radius:6px}
  .account-version-copy p{font-size:14px}
  .account-version-copy .feature-line{font-size:12px;margin-top:4px}
  .feature-line::before{width:7px;height:7px;margin-right:6px}
  .account-version-game-icon{display:none}
  .account-version-footer{grid-template-columns:58px 1fr;gap:12px;padding:12px;min-height:120px}
  .account-version-badge{width:58px;height:78px;font-size:17px;border-radius:13px}
  .account-version-footer-copy{border-left:0;padding-left:0}
  .account-version-footer-copy h4{font-size:16px;margin-bottom:7px}
  .account-version-benefits{display:none}
  .account-version-cta{grid-column:1 / -1;width:100%;height:52px;min-width:0;font-size:21px}
}

/* ===== ACCOUNT POPUP - FIT CURRENT SCREEN ===== */
.account-version-modal{
  padding:18px !important;
}
.account-version-panel{
  width:min(92vw,920px) !important;
  max-height:88vh !important;
  padding:28px 30px 24px !important;
  border-radius:24px !important;
}
.account-version-close{
  top:16px !important;
  right:16px !important;
  width:54px !important;
  height:54px !important;
  font-size:38px !important;
  border-radius:14px !important;
}
.account-version-head{
  padding:5px 68px 18px 4px !important;
}
.account-version-brand{
  font-size:clamp(28px,4.2vw,52px) !important;
}
.account-version-title{
  font-size:clamp(34px,5.2vw,62px) !important;
}
.account-version-subtitle{
  margin-top:9px !important;
  font-size:clamp(15px,1.8vw,21px) !important;
}
.account-version-list{
  gap:11px !important;
  margin-bottom:15px !important;
}
.account-version-card{
  min-height:116px !important;
  grid-template-columns:104px 1fr 92px !important;
  gap:18px !important;
  padding:14px 18px 14px 20px !important;
  border-radius:17px !important;
}
.account-version-number{
  width:92px !important;
  height:92px !important;
  border-radius:13px !important;
  font-size:50px !important;
}
.account-version-number small{
  font-size:11px !important;
  margin-top:8px !important;
}
.account-version-copy{
  padding-left:18px !important;
}
.account-version-name{
  gap:9px !important;
  margin-bottom:6px !important;
}
.account-version-name h3{
  font-size:28px !important;
}
.account-version-tag{
  padding:4px 8px !important;
  font-size:12px !important;
  border-radius:6px !important;
}
.account-version-copy p{
  font-size:17px !important;
}
.account-version-copy .feature-line{
  margin-top:5px !important;
  font-size:14px !important;
}
.account-version-game-icon{
  width:82px !important;
  height:82px !important;
  font-size:39px !important;
}
.account-version-footer{
  min-height:105px !important;
  grid-template-columns:92px 1fr auto !important;
  gap:16px !important;
  padding:14px 18px !important;
  border-radius:17px !important;
}
.account-version-badge{
  width:78px !important;
  height:78px !important;
  font-size:21px !important;
  border-radius:16px !important;
}
.account-version-footer-copy{
  padding-left:18px !important;
}
.account-version-footer-copy h4{
  font-size:20px !important;
  margin-bottom:6px !important;
}
.account-version-benefits{
  gap:10px 16px !important;
  font-size:12px !important;
}
.account-version-cta{
  min-width:175px !important;
  height:54px !important;
  font-size:22px !important;
  border-radius:10px !important;
}

@media(max-width:760px){
  .account-version-modal{padding:8px !important}
  .account-version-panel{
    width:94vw !important;
    max-height:91vh !important;
    padding:18px 11px 13px !important;
    border-radius:18px !important;
  }
  .account-version-close{
    top:9px !important;right:9px !important;
    width:42px !important;height:42px !important;
    font-size:30px !important;border-radius:11px !important;
  }
  .account-version-head{padding:4px 50px 12px 4px !important}
  .account-version-brand{font-size:26px !important}
  .account-version-title{font-size:32px !important}
  .account-version-subtitle{font-size:14px !important}
  .account-version-list{gap:7px !important;margin-bottom:10px !important}
  .account-version-card{
    min-height:92px !important;
    grid-template-columns:56px 1fr !important;
    gap:9px !important;
    padding:9px !important;
    border-radius:13px !important;
  }
  .account-version-number{
    width:54px !important;height:70px !important;
    border-radius:10px !important;font-size:34px !important;
  }
  .account-version-number small{font-size:8px !important;margin-top:5px !important}
  .account-version-copy{padding-left:0 !important}
  .account-version-name{gap:5px !important;margin-bottom:3px !important}
  .account-version-name h3{font-size:18px !important}
  .account-version-tag{padding:3px 6px !important;font-size:9px !important}
  .account-version-copy p{font-size:12px !important}
  .account-version-copy .feature-line{font-size:10px !important;margin-top:2px !important}
  .account-version-footer{
    grid-template-columns:50px 1fr !important;
    gap:9px !important;padding:9px !important;min-height:82px !important
  }
  .account-version-badge{width:50px !important;height:64px !important;font-size:15px !important}
  .account-version-footer-copy{padding-left:0 !important}
  .account-version-footer-copy h4{font-size:14px !important;margin-bottom:4px !important}
  .account-version-cta{
    grid-column:1 / -1 !important;width:100% !important;height:44px !important;
    font-size:18px !important;min-width:0 !important
  }
}

.community-section{
    position:relative;
    width:100%;
    min-height:720px;
    margin-top:0;
    padding:42px 55px 35px;
    overflow:hidden;

    background:#05030d;
}

/* BACKGROUND */
.community-bg{
    position:absolute;
    inset:0;
    z-index:0;

    background:
        linear-gradient(
            180deg,
            rgba(4,2,13,.20) 0%,
            rgba(4,2,13,.18) 38%,
            rgba(4,2,13,.55) 68%,
            #04030a 100%
        ),
        url("community/community-bg.jpg");

    background-size:cover;
    background-position:center center;

    filter:saturate(1.15);
}

/* màu tím ở giữa */
.community-section::before{
    content:"";
    position:absolute;
    left:50%;
    top:170px;

    width:650px;
    height:420px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(174,55,255,.24),
            transparent 68%
        );

    filter:blur(25px);
    pointer-events:none;
    z-index:1;
}

/* fade 4 phía */
.community-section::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            #04030a 0%,
            transparent 12%,
            transparent 88%,
            #04030a 100%
        ),
        linear-gradient(
            180deg,
            #04030a 0%,
            transparent 12%,
            transparent 84%,
            #04030a 100%
        );

    pointer-events:none;
    z-index:1;
}

/* =========================================================
   HEADER
   ========================================================= */

.community-header{
    position:relative;
    z-index:5;

    text-align:center;

    margin:0 auto 20px;

    max-width:1100px;
}

.community-welcome{
    color:#bd5cff;

    font-size:14px;
    font-weight:700;

    letter-spacing:7px;

    text-transform:uppercase;

    text-shadow:
        0 0 12px rgba(181,71,255,.65);
}

.community-title{
    margin-top:8px;

    font-family:'Anton',Impact,sans-serif;

    font-size:clamp(65px,7vw,110px);

    line-height:.82;

    letter-spacing:3px;

    color:#fff;

    text-transform:uppercase;

    text-shadow:
        0 5px 0 rgba(30,25,40,.9),
        0 12px 35px rgba(0,0,0,.9);
}

.community-subtitle{
    margin-top:13px;

    font-family:'Barlow Condensed',Arial,sans-serif;

    font-size:clamp(35px,4vw,62px);

    font-weight:900;

    font-style:italic;

    line-height:.9;

    letter-spacing:1px;

    color:#b445ff;

    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(179,63,255,.65),
        0 5px 20px rgba(0,0,0,.9);
}

.community-desc{
    max-width:720px;

    margin:18px auto 0;

    color:#e2dce9;

    font-size:16px;

    line-height:1.6;

    text-shadow:0 3px 10px #000;
}


/* =========================================================
   MAIN COMMUNITY AREA
   ========================================================= */

.community-main{
    position:relative;
    z-index:5;

    max-width:1400px;

    min-height:410px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 420px 1fr;

    align-items:center;

    gap:35px;
}


/* =========================================================
   CENTER CHARACTERS
   ========================================================= */

.community-characters{
    position:absolute;

    left:50%;
    bottom:-35px;

width: 737px;
    height:500px;

    transform:translateX(-50%);

    z-index:2;

    pointer-events:none;
}

.community-characters img{
    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center bottom;

    filter:
        drop-shadow(0 20px 35px rgba(0,0,0,.75))
        drop-shadow(0 0 25px rgba(159,48,255,.22));
}


/* =========================================================
   COMMUNITY CARD
   ========================================================= */

.community-card{
    position:relative;

    z-index:8;

    width:100%;

    min-height:340px;

    padding:38px 34px 30px;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(15,8,29,.92),
            rgba(5,7,18,.82)
        );

    backdrop-filter:blur(16px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.62),
        inset 0 0 35px rgba(164,55,255,.035);

    transition:.3s ease;
}

/* FACEBOOK HOVER */
.community-facebook:hover{
    transform:rotate(2.5deg) translateY(-6px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.7),
        0 0 35px rgba(157,48,255,.15);
}


/* DISCORD HOVER */
.community-discord:hover{
    transform:rotate(-2.5deg) translateY(-6px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.7),
        0 0 35px rgba(37,110,255,.18);
}


/* FACEBOOK */

.community-facebook{
    border:1px solid rgba(190,71,255,.75);

    box-shadow:
        0 25px 60px rgba(0,0,0,.62),
        0 0 25px rgba(172,60,255,.08);
    background: #00000000;
    transform:rotate(2.5deg);
}


/* DISCORD */

.community-discord{
    border:1px solid rgba(48,132,255,.75);

    box-shadow:
        0 25px 60px rgba(0,0,0,.62),
        0 0 25px rgba(37,110,255,.08);
    background: #00000000;
    transform:rotate(-2.5deg);
}


/* =========================================================
   ICON
   ========================================================= */

.community-icon{
    width:125px;
    height:125px;

    margin:0 auto 22px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:58px;

    font-weight:900;

    background:
        radial-gradient(
            circle,
            rgba(132,39,202,.30),
            rgba(9,5,20,.88) 68%
        );

    border:2px solid #c051ff;

    color:#c65cff;

    box-shadow:
        0 0 20px rgba(192,81,255,.55),
        inset 0 0 25px rgba(182,66,255,.18);
}

.community-discord .community-icon{
    color:#66a9ff;

    border-color:#368fff;

    background:
        radial-gradient(
            circle,
            rgba(36,103,210,.30),
            rgba(4,9,22,.90) 68%
        );

    box-shadow:
        0 0 20px rgba(49,137,255,.55),
        inset 0 0 25px rgba(45,123,255,.18);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.community-card h3{
    text-align:center;

    font-family:'Anton',Impact,sans-serif;

    font-size:26px;

    line-height:1;

    letter-spacing:.5px;

    margin-bottom:16px;
}

.community-facebook h3{
    color:#c35aff;
}

.community-discord h3{
    color:#4d9cff;
}

.community-card p{
    color:#d2ccd9;

    text-align:center;

    font-size:15px;

    line-height:1.65;

    max-width:330px;

    margin:0 auto 25px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.community-btn{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;

    height:58px;

    border-radius:9px;

    font-size:15px;

    font-weight:900;

    letter-spacing:.5px;

    color:#fff;

    overflow:hidden;

    transition:.25s;
}

.community-facebook .community-btn{
    border:1px solid #b33fff;

    background:
        linear-gradient(
            135deg,
            #6420bd,
            #a837f5
        );

    box-shadow:
        0 0 25px rgba(170,54,255,.28);
}

.community-discord .community-btn{
    border:1px solid #277dff;

    background:
        linear-gradient(
            135deg,
            #1247a0,
            #146eff
        );

    box-shadow:
        0 0 25px rgba(37,113,255,.28);
}

.community-btn:hover{
    transform:translateY(-2px);

    filter:brightness(1.12);
}

.community-btn span{
    margin-left:10px;

    font-size:25px;

    line-height:1;
}


/* =========================================================
   BOTTOM BENEFITS
   ========================================================= */

.community-benefits{
    position:relative;

    z-index:10;

    max-width:1400px;

    margin:5px auto 0;

    min-height:125px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    border-radius:18px;

    background:
        rgba(7,5,17,.90);

    backdrop-filter:blur(18px);

    border:1px solid rgba(174,69,255,.58);

    box-shadow:
        0 20px 50px rgba(0,0,0,.62),
        inset 0 0 25px rgba(142,46,255,.035);

    overflow:hidden;
}

.community-benefit{
    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 28px;

    border-right:1px solid rgba(255,255,255,.09);
}

.community-benefit:last-child{
    border-right:0;
}

.community-benefit-icon{
    flex:0 0 70px;

    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:31px;

    color:#bd5cff;

    border:1px solid rgba(183,72,255,.7);

    background:
        radial-gradient(
            circle,
            rgba(131,41,207,.25),
            rgba(10,7,18,.8)
        );

    box-shadow:
        0 0 20px rgba(177,66,255,.20);
}

.community-benefit:nth-child(2) .community-benefit-icon{
    color:#4b99ff;
    border-color:rgba(60,139,255,.7);
}

.community-benefit:nth-child(3) .community-benefit-icon{
    color:#c45cff;
}

.community-benefit:nth-child(4) .community-benefit-icon{
    color:#579bff;
    border-color:rgba(68,145,255,.7);
}

.community-benefit h4{
    font-family:'Barlow Condensed',Arial,sans-serif;

    font-size:18px;

    line-height:1;

    margin-bottom:9px;

    color:#c25aff;

    text-transform:uppercase;
}

.community-benefit:nth-child(2) h4,
.community-benefit:nth-child(4) h4{
    color:#4d9cff;
}

.community-benefit p{
    color:#bbb4c5;

    font-size:13px;

    line-height:1.45;
}


/* =========================================================
   DESKTOP CENTER CHARACTERS
   ========================================================= */

@media(min-width:901px){

    .community-card:first-child{
        grid-column:1;
    }

    .community-card:last-child{
        grid-column:3;
    }

    .community-main{
        padding-top:0;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .community-section{
        padding-left:25px;
        padding-right:25px;
    }

    .community-main{
        grid-template-columns:1fr 330px 1fr;
        gap:18px;
    }

    .community-characters{
        width:480px;
        height:450px;
    }

    .community-card{
        min-height:320px;
        padding:28px 22px;
    }

    .community-icon{
        width:95px;
        height:95px;
        font-size:45px;
    }

    .community-benefit{
        padding:18px 15px;
        gap:12px;
    }

    .community-benefit-icon{
        flex-basis:55px;
        width:55px;
        height:55px;
        font-size:25px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .community-section{
        min-height:auto;

        margin:0;

        padding:
            70px 14px 35px;

        border-radius:0;
    }

    .community-welcome{
        font-size:10px;
        letter-spacing:4px;
    }

    .community-title{
        font-size:54px;
        letter-spacing:1px;
    }

    .community-subtitle{
        font-size:31px;
    }

    .community-desc{
        font-size:13px;
        line-height:1.55;

        padding:0 8px;
    }

    .community-main{
        display:flex;

        flex-direction:column;

        gap:15px;

        min-height:auto;

        margin-top:20px;
    }

    .community-characters{
        position:relative;

        left:auto;
        bottom:auto;

        order:1;

        width:100%;
        height:300px;

        transform:none;

        margin:-10px auto -15px;
    }

    .community-card{
        order:2;

        min-height:0;

        padding:25px 20px;

        border-radius:18px;
    }

    .community-discord{
        order:3;
    }

    .community-icon{
        width:90px;
        height:90px;

        font-size:42px;

        margin-bottom:18px;
    }

    .community-card h3{
        font-size:24px;
    }

    .community-card p{
        font-size:13px;
        margin-bottom:20px;
    }

    .community-btn{
        height:52px;
        font-size:13px;
    }

    .community-benefits{
        margin-top:18px;

        grid-template-columns:repeat(2,1fr);

        border-radius:18px;
    }

    .community-benefit{
        min-height:125px;

        flex-direction:column;

        justify-content:center;

        text-align:center;

        padding:18px 10px;

        gap:9px;

        border-right:1px solid rgba(255,255,255,.09);
    }

    .community-benefit:nth-child(2){
        border-right:0;
    }

    .community-benefit:nth-child(n+3){
        border-top:1px solid rgba(255,255,255,.09);
    }

    .community-benefit-icon{
        width:52px;
        height:52px;

        flex-basis:52px;

        font-size:24px;
    }

    .community-benefit h4{
        font-size:14px;
        margin-bottom:5px;
    }

    .community-benefit p{
        font-size:10px;
        line-height:1.35;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:430px){

    .community-title{
        font-size:48px;
    }

    .community-subtitle{
        font-size:27px;
    }

    .community-desc{
        font-size:12px;
    }

    .community-characters{
        height:270px;
    }

    .community-card{
        padding:22px 16px;
    }

    .community-icon{
        width:82px;
        height:82px;
        font-size:38px;
    }

    .community-card h3{
        font-size:21px;
    }

    .community-benefit{
        min-height:115px;
    }
}
@media(max-width:900px){

    .community-facebook,
    .community-discord{
        transform:none;
    }

    .community-facebook:hover,
    .community-discord:hover{
        transform:translateY(-6px);
    }

}

/* =====================================================
   STATS ICON - FONT AWESOME
   ===================================================== */

.stats .icon{
  font-size:30px;
  color:#ad4cff;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  min-width:42px;
}

.stats .icon i{
  font-size:30px;
  font-style:normal;
  color:#ad4cff;
  filter:drop-shadow(0 0 8px rgba(173,76,255,.45));
  transition:all .25s ease;
}

.stats .stat:hover .icon i{
  color:#c56aff;
  transform:scale(1.08);
  filter:drop-shadow(0 0 12px rgba(197,106,255,.7));
}

@media(max-width:900px){

  .stats .icon{
    width:auto;
    min-width:0;
    font-size:32px;
  }

  .stats .icon i{
    font-size:32px;
  }

}

@media(max-width:430px){

  .stats .icon{
    font-size:30px;
  }

  .stats .icon i{
    font-size:30px;
  }

}

/* =========================================
   COMMUNITY BENEFIT - FONT AWESOME ICONS
   ========================================= */

.community-benefit-icon i{
    font-size:30px;
    line-height:1;
    font-style:normal;
    display:block;

    filter:drop-shadow(
        0 0 8px rgba(177,66,255,.45)
    );

    transition:
        transform .25s ease,
        filter .25s ease;
}


/* ICON 1 - CỘNG ĐỒNG */

.community-benefit:nth-child(1)
.community-benefit-icon i{
    color:#b14cff;
}


/* ICON 2 - HỖ TRỢ */

.community-benefit:nth-child(2)
.community-benefit-icon i{
    color:#4b99ff;
}


/* ICON 3 - SỰ KIỆN */

.community-benefit:nth-child(3)
.community-benefit-icon i{
    color:#c45cff;
}


/* ICON 4 - MÔI TRƯỜNG */

.community-benefit:nth-child(4)
.community-benefit-icon i{
    color:#579bff;
}


/* HOVER */

.community-benefit:hover
.community-benefit-icon i{
    transform:scale(1.12);

    filter:drop-shadow(
        0 0 14px currentColor
    );
}


/* MOBILE */

@media(max-width:900px){

    .community-benefit-icon i{
        font-size:25px;
    }

}
/* ================================
   LOGO GTA-AE.COM
   ================================ */

.logo{
    display:flex;
    align-items:center;
    width:auto;
    height:58px;
    text-decoration:none;
    overflow:hidden;
}

.logo img{
    display:block;
    width:140px;
    height:auto;

    /* Làm nền đen của ảnh biến mất */
    mix-blend-mode:screen;

    object-fit:contain;
    object-position:center;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.logo:hover img{
    transform:scale(1.04);
    filter:
        drop-shadow(0 0 8px rgba(0,180,255,.45))
        drop-shadow(0 0 18px rgba(0,120,255,.25));
}


/* MOBILE */
@media(max-width:700px){

    .logo{
        height:50px;
    }

    .logo img{
        width:120px;
    }

}
/* =========================================================
   MOBILE LOGO GTA-AE.COM
   ========================================================= */

@media (max-width:900px){

    /* Logo mobile */
    .mobile-logo{
        display:flex !important;
        position:absolute !important;

        left:50% !important;
        top:7px !important;

        transform:translateX(-50%) !important;

        width:190px !important;
        height:64px !important;

        align-items:center !important;
        justify-content:center !important;

        z-index:52 !important;

        text-decoration:none !important;
    }

    /* Ảnh logo */
    .mobile-logo img{
        display:block !important;

        width:150px !important;
        height:58px !important;

        object-fit:contain !important;
        object-position:center !important;

        /* Xóa nền đen của logo */
        mix-blend-mode:screen;

        margin:0 !important;
        padding:0 !important;

        transition:transform .25s ease;
    }

    .mobile-logo:hover img{
        transform:scale(1.03);
    }

    /* Không còn chữ logo cũ */
    .mobile-logo strong,
    .mobile-logo em,
    .mobile-logo small{
        display:none !important;
    }

}


/* =========================================================
   ĐIỆN THOẠI NHỎ
   ========================================================= */

@media (max-width:430px){

    .mobile-logo{
        width:160px !important;
        height:60px !important;
        top:8px !important;
    }

    .mobile-logo img{
        width: 157px !important;
        height: 85px !important;
    }

}

/* =========================================================
   MOBILE HAMBURGER MENU
   ========================================================= */

.mobile-menu-btn{
    display:none;
}

.mobile-menu-panel{
    display:none;
}

@media (max-width:900px){

    /* Không còn thanh menu phía dưới */
    body{
        padding-bottom:0 !important;
    }

    .mobile-bottom-nav{
        display:none !important;
    }

    /* NÚT 3 GẠCH */
    .mobile-menu-btn{
        display:flex !important;
        position:absolute;
        font-family: 'Inter', Arial, sans-serif !important;
        right:16px;
        top:18px;
        width:46px;
        height:46px;
        padding:0;
        border:1px solid rgba(184,80,255,.65);
        border-radius:12px;
        background:rgba(10,7,19,.75);
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        z-index:100;
        box-shadow:
            0 0 18px rgba(157,49,255,.18);
    }

    .mobile-menu-btn span{
        display:block;
        width:21px;
        height:2px;
        border-radius:5px;
        background:#fff;
        box-shadow:0 0 8px rgba(190,90,255,.4);
        transition:.25s ease;
    }

    /* MENU MỞ RA */
    .mobile-menu-panel{
        position:fixed;
        top:76px;
        right:14px;
        width:210px;
        padding:8px;
        display:flex;
        flex-direction:column;
        gap:4px;

        background:rgba(10,7,19,.97);
        border:1px solid rgba(184,80,255,.65);
        border-radius:16px;

        box-shadow:
            0 15px 40px rgba(0,0,0,.6),
            0 0 25px rgba(157,49,255,.15);

        backdrop-filter:blur(18px);

        opacity:0;
        visibility:hidden;
        transform:translateY(-10px) scale(.97);
        transform-origin:top right;

        transition:
            opacity:.22s ease,
            transform:.22s ease,
            visibility:.22s ease;

        z-index:99;
    }

    .mobile-menu-panel a{
        display:flex;
        align-items:center;
        gap:13px;
        height:48px;
        padding:0 14px;
        border-radius:10px;

        color:#aaa;
        font-size:13px;
        font-weight:700;

        transition:.2s ease;
    }

    .mobile-menu-panel a i{
        width:22px;
        text-align:center;
        color:#a94cff;
        font-size:16px;
    }

    .mobile-menu-panel a:hover{
        color:#fff;
        background:rgba(157,49,255,.12);
    }

    .mobile-menu-panel a:hover i{
        color:#c66aff;
    }

    /* KHI MENU ĐANG MỞ */
    .mobile-menu-panel.is-open{
        opacity:1;
        visibility:visible;
        transform:translateY(0) scale(1);
    }

    /* BIẾN ☰ THÀNH X */
    .mobile-menu-btn.is-open span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .mobile-menu-btn.is-open span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-btn.is-open span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }
}
/* =========================================================
   HEADER MOBILE — LOGO TRÁI + ĐĂNG NHẬP + MENU PHẢI
   ========================================================= */

@media (max-width:900px){

    /* Logo nằm góc trái */
    .mobile-logo{
        display:flex !important;
        position:absolute !important;

        left:14px !important;
        top:8px !important;

        transform:none !important;

        width:150px !important;
        height:70px !important;

        align-items:center !important;
        justify-content:flex-start !important;

        z-index:101 !important;
    }

    .mobile-logo img{
        width:135px !important;
        height:58px !important;
        object-fit:contain !important;
        object-position:left center !important;
        margin:0 !important;
    }


    /* NÚT ĐĂNG NHẬP */
    .mobile-login-btn{
        display:flex !important;
        position:absolute !important;
        right:70px !important;
        top:18px !important;

        width:100px !important;
        height:46px !important;

        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        border:1px solid rgba(184,80,255,.65) !important;
        border-radius:12px !important;

        background:rgba(10,7,19,.75) !important;
        color:#fff !important;

        font-size:9px !important;
        font-weight:800 !important;

        box-shadow:
            0 0 18px rgba(157,49,255,.18) !important;

        z-index:101 !important;
    }

    .mobile-login-btn i{
        color:#bd61ff !important;
        font-size:15px !important;
    }

    .mobile-login-btn:hover{
        background:rgba(95,20,160,.25) !important;
        border-color:#c15aff !important;
    }


    /* NÚT 3 GẠCH */
    .mobile-menu-btn{
        display:flex !important;

        position:absolute !important;
        right:14px !important;
        top:18px !important;

        width:46px !important;
        height:46px !important;

        padding:0 !important;

        border:1px solid rgba(184,80,255,.65) !important;
        border-radius:12px !important;

        background:rgba(10,7,19,.75) !important;

        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;
        gap:5px !important;

        cursor:pointer !important;

        z-index:102 !important;

        box-shadow:
            0 0 18px rgba(157,49,255,.18) !important;
    }

    .mobile-menu-btn span{
        display:block !important;
        font-family: 'Inter', Arial, sans-serif !important;

        width:21px !important;
        height:2px !important;

        border-radius:5px !important;

        background:#fff !important;

        box-shadow:0 0 8px rgba(190,90,255,.4) !important;
    }
  }

/* MÁY RẤT NHỎ */
@media (max-width:430px){

    .mobile-logo{
        left:10px !important;
        width:140px !important;
    }

    .mobile-logo img{
        width:125px !important;
        height:70px !important;
    }

    .mobile-login-btn{
        right:65px !important;
        width:120px !important;
        height:46px !important;
        font-size:12px !important;
        padding: 0 10px;
        gap: 6px
    }

    .mobile-menu-btn{
        right:10px !important;
    }

}
/* =========================================================
   PC — ĐĂNG NHẬP NẰM SAU DISCORD
   ========================================================= */

@media (min-width:901px){

    /* Không hiện nút đăng nhập giả bên cạnh logo */
    .header:after{
        display:none !important;
        content:none !important;
    }

    /* Menu PC */
    .nav{
        display:flex !important;
        align-items:center !important;
    }

    /* Thứ tự:
       TRANG CHỦ
       DIỄN ĐÀN
       ĐĂNG KÝ
       DISCORD
       ĐĂNG NHẬP
    */

    .nav a:last-child{
        order:5 !important;
    }

    .nav a:nth-child(4){
        order:4 !important;
    }
}
/* =========================================================
   PC — ẨN NÚT ĐĂNG NHẬP MOBILE BÊN CẠNH LOGO
   ========================================================= */

@media (min-width:901px){

    /* Ẩn nút ĐĂNG NHẬP dành cho mobile */
    .mobile-login-btn{
        display:none !important;
    }

    /* Ẩn luôn login giả nếu còn */
    .header:after{
        display:none !important;
        content:none !important;
    }

    /* Đảm bảo menu PC hiện đúng thứ tự */
    .nav{
        display:flex !important;
    }

    .nav a:nth-child(1){
        order:1;
    }

    .nav a:nth-child(2){
        order:2;
    }

    .nav a:nth-child(3){
        order:3;
    }

    .nav a:nth-child(4){
        order:4;
    }

    .nav a:nth-child(5){
        order:5;
    }
}
/* ===== CENTER HERO TEXT ===== */

@media (min-width:901px){

  .hero{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .hero .content{
    width:100% !important;
    max-width:900px !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  .hero .kicker,
  .hero .title,
  .hero .script,
  .hero .mp,
  .hero .desc,
  .hero .actions{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero .actions{
    justify-content:center !important;
  }
}
/* ===== LOGO TRÊN WELCOME TO ===== */

.hero-logo{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin: 0 auto 0px;
    position:relative;
    z-index:5;
}

.hero-logo img{
    display:block;
    width:120px;
    height:120px;
    object-fit:contain;
    margin:0 auto;
    filter:
        drop-shadow(0 0 8px rgba(168,60,255,.55))
        drop-shadow(0 0 20px rgba(168,60,255,.25));
}

/* khoảng cách WELCOME TO */
.kicker{
    margin-top:0 !important;
}

/* MOBILE */
@media(max-width:900px){
    .hero-logo{
        margin-bottom:12px;
    }

    .hero-logo img{
        width:100px;
        height:100px;
    }
}
.kicker {
    font-family: 'Ethnocentric', sans-serif;
    font-size: 13px;
    letter-spacing: 5px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(180, 70, 255, 0.35);
}
.kicker {
    font-family: 'Ethnocentric', sans-serif !important;
}
@media (max-width: 900px) {
    .kicker {
        font-family: 'Ethnocentric', sans-serif !important;
        font-size: 9px;
        letter-spacing: 3px;
        margin-top: -15px !important;
        margin-bottom: 25px;
        white-space: nowrap;
    }
}
@media (max-width: 900px) {
    .hero .desc {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
.desc-highlight {
    color: #00fff5;
}