/* AQ FINAL FIX: ZALO + LOGOUT */
.chat-tools{
  position:relative!important;
  display:block!important;
  min-height:76px!important;
  margin-top:7px!important;
}

.icon-picker{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  padding-right:106px!important;
  align-content:flex-start!important;
}

.image-label{
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:94px!important;
  min-width:94px!important;
  height:33px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.chat-logout-row{
  position:absolute!important;
  right:0!important;
  top:39px!important;
  margin:0!important;
  width:94px!important;
  display:flex!important;
  justify-content:flex-end!important;
}

.chat-logout-row .logout,
.logout{
  width:94px!important;
  min-width:94px!important;
  height:32px!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:12px!important;
  line-height:32px!important;
}

.qr-panel .right-card:nth-of-type(2){
  height:340px!important;
  min-height:340px!important;
  max-height:340px!important;
  padding:14px 12px!important;
  margin-top:12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}

.qr-panel .right-card:nth-of-type(2) h3{
  font-size:17px!important;
  line-height:1.2!important;
  margin:0 0 14px!important;
  text-align:center!important;
}

.qr-panel .right-card:nth-of-type(2) .contact-card,
.qr-panel .right-card:nth-of-type(2) .contact-card:first-of-type,
.qr-panel .right-card:nth-of-type(2) .contact-card:nth-of-type(2){
  display:flex!important;
  width:210px!important;
  max-width:210px!important;
  height:255px!important;
  max-height:255px!important;
  margin:0 auto!important;
  padding:12px!important;
  border-radius:18px!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(0,229,255,.22)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 18px rgba(0,229,255,.08)!important;
}

.qr-panel .right-card:nth-of-type(2) .contact-title{
  font-size:16px!important;
  line-height:1.1!important;
  margin:0 0 10px!important;
  font-weight:900!important;
  text-align:center!important;
}

.qr-panel .right-card:nth-of-type(2) .contact-card img,
.qr-panel .right-card:nth-of-type(2) .contact-card .qr-img{
  width:166px!important;
  height:205px!important;
  max-width:166px!important;
  max-height:205px!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0 auto!important;
  border-radius:14px!important;
}

.qr-panel .right-card:nth-of-type(2) .contact-card.telegram-remove{
  display:none!important;
}

/* FIX DONATE QR NOT CUT */
.qr-panel .right-card:first-of-type{
  height:320px!important;
  min-height:320px!important;
  max-height:320px!important;
  padding:12px 12px 16px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

.qr-panel .right-card:first-of-type h3{
  height:auto!important;
  min-height:42px!important;
  max-height:none!important;
  margin:0 0 10px!important;
  padding:0!important;
  line-height:1.18!important;
  text-align:center!important;
  flex:0 0 auto!important;
}

.qr-panel .right-card:first-of-type img,
.qr-panel .right-card:first-of-type .qr-img{
  width:172px!important;
  height:235px!important;
  max-width:172px!important;
  max-height:235px!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
  border-radius:14px!important;
}

/* Đẩy khung Zalo xuống một chút cho thoáng */
.qr-panel .right-card:nth-of-type(2){
  margin-top:14px!important;
}

/* Màn thấp thì thu nhỏ QR donate, không cắt */
@media(max-height:820px) and (min-width:901px){
  .qr-panel .right-card:first-of-type{
    height:292px!important;
    min-height:292px!important;
    max-height:292px!important;
    padding-top:10px!important;
  }

  .qr-panel .right-card:first-of-type h3{
    min-height:38px!important;
    margin-bottom:8px!important;
    font-size:13px!important;
  }

  .qr-panel .right-card:first-of-type img,
  .qr-panel .right-card:first-of-type .qr-img{
    width:155px!important;
    height:210px!important;
    max-width:155px!important;
    max-height:210px!important;
  }
}

/* AQ QR BALANCE FINAL */
.qr-panel{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  overflow:hidden!important;
}

/* Tiêu đề tim */
.qr-main-title{
  width:100%!important;
  text-align:center!important;
  margin:0 0 10px!important;
  padding:0!important;
  line-height:1!important;
}

/* Hai khung QR dùng chung trục giữa */
.qr-panel .right-card{
  width:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}

/* Khung Donate */
.qr-panel .right-card:first-of-type{
  height:300px!important;
  min-height:300px!important;
  max-height:300px!important;
  padding:12px 12px 14px!important;
  margin:0 0 14px!important;
}

.qr-panel .right-card:first-of-type h3{
  width:100%!important;
  min-height:42px!important;
  margin:0 0 10px!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.18!important;
}

/* Donate QR nằm chính giữa, không crop */
.qr-panel .right-card:first-of-type img,
.qr-panel .right-card:first-of-type .qr-img{
  width:158px!important;
  height:220px!important;
  max-width:158px!important;
  max-height:220px!important;
  min-width:158px!important;
  min-height:220px!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
  transform:none!important;
}

/* Khung Zalo */
.qr-panel .right-card:nth-of-type(2){
  height:300px!important;
  min-height:300px!important;
  max-height:300px!important;
  padding:14px 12px!important;
  margin:0!important;
}

.qr-panel .right-card:nth-of-type(2) h3{
  width:100%!important;
  margin:0 0 12px!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.2!important;
}

/* Card Zalo cân giữa */
.qr-panel .right-card:nth-of-type(2) .contact-card{
  width:178px!important;
  max-width:178px!important;
  min-width:178px!important;
  height:220px!important;
  max-height:220px!important;
  min-height:220px!important;
  margin:0 auto!important;
  padding:10px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  box-sizing:border-box!important;
}

.qr-panel .right-card:nth-of-type(2) .contact-title{
  width:100%!important;
  margin:0 0 8px!important;
  text-align:center!important;
  line-height:1.1!important;
}

/* Zalo QR vừa khung, không bị cắt */
.qr-panel .right-card:nth-of-type(2) .contact-card img,
.qr-panel .right-card:nth-of-type(2) .contact-card .qr-img{
  width:138px!important;
  height:168px!important;
  max-width:138px!important;
  max-height:168px!important;
  min-width:138px!important;
  min-height:168px!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0 auto!important;
  transform:none!important;
}

/* Màn thấp: thu nhẹ để không tràn footer */
@media(max-height:820px) and (min-width:901px){
  .qr-panel .right-card:first-of-type{
    height:278px!important;
    min-height:278px!important;
    max-height:278px!important;
  }

  .qr-panel .right-card:first-of-type img,
  .qr-panel .right-card:first-of-type .qr-img{
    width:145px!important;
    height:200px!important;
    max-width:145px!important;
    max-height:200px!important;
    min-width:145px!important;
    min-height:200px!important;
  }

  .qr-panel .right-card:nth-of-type(2){
    height:278px!important;
    min-height:278px!important;
    max-height:278px!important;
  }

  .qr-panel .right-card:nth-of-type(2) .contact-card{
    width:165px!important;
    max-width:165px!important;
    min-width:165px!important;
    height:205px!important;
    max-height:205px!important;
    min-height:205px!important;
  }

  .qr-panel .right-card:nth-of-type(2) .contact-card img,
  .qr-panel .right-card:nth-of-type(2) .contact-card .qr-img{
    width:128px!important;
    height:155px!important;
    max-width:128px!important;
    max-height:155px!important;
    min-width:128px!important;
    min-height:155px!important;
  }
}


/* AQ_VISUAL_CLEAN_FINAL_START */

/* Title không để chữ lỗi tràn layout */
#titleText{
  display:inline-block!important;
  max-width:340px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  vertical-align:bottom!important;
  font-family:"Segoe UI", Arial, sans-serif!important;
  font-variant-ligatures:none!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
}

/* Ẩn visual cũ nếu còn sót */
#visual3d .aq3d-stage{
  display:none!important;
}

/* Neon spectrum visual mới */
#visual3d{
  width:310px!important;
  height:170px!important;
  margin:18px auto 0!important;
  position:relative!important;
  overflow:visible!important;
  pointer-events:none!important;
  perspective:900px!important;
  transform-style:preserve-3d!important;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.45))!important;
}

#visual3d .aqwave-scene{
  position:absolute!important;
  inset:0!important;
  transform-style:preserve-3d!important;
  animation:aqwaveFloat 4.8s ease-in-out infinite!important;
}

#visual3d .aqwave-glow{
  position:absolute!important;
  left:50%!important;
  top:54%!important;
  width:250px!important;
  height:82px!important;
  transform:translate(-50%,-50%) rotateX(66deg)!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse, rgba(0,229,255,.32), rgba(122,44,255,.16) 45%, rgba(251,44,145,.10) 62%, transparent 76%)!important;
  filter:blur(2px)!important;
  animation:aqwaveGlow 2.6s ease-in-out infinite!important;
}

#visual3d .aqwave-ring{
  position:absolute!important;
  left:50%!important;
  top:53%!important;
  width:214px!important;
  height:78px!important;
  transform:translate(-50%,-50%) rotateX(68deg)!important;
  border-radius:50%!important;
  border:2px solid rgba(0,229,255,.70)!important;
  box-shadow:
    0 0 16px rgba(0,229,255,.75),
    inset 0 0 16px rgba(0,229,255,.22)!important;
  animation:aqwaveSpin 3.2s linear infinite!important;
}

#visual3d .aqwave-ring.r2{
  width:268px!important;
  height:100px!important;
  border-color:rgba(251,44,145,.52)!important;
  animation-duration:5.6s!important;
  animation-direction:reverse!important;
}

#visual3d .aqwave-ring.r3{
  width:142px!important;
  height:52px!important;
  border-color:rgba(255,255,255,.35)!important;
  animation-duration:2.2s!important;
}

#visual3d .aqwave-core{
  position:absolute!important;
  left:50%!important;
  top:42%!important;
  width:58px!important;
  height:58px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 7%, #61f7ff 8% 25%, #7a2cff 50%, #fb2c91 82%)!important;
  box-shadow:
    0 0 18px rgba(0,229,255,.95),
    0 0 36px rgba(251,44,145,.60),
    inset 0 0 16px rgba(255,255,255,.35)!important;
  animation:aqwaveCore 2s ease-in-out infinite!important;
}

#visual3d .aqwave-bars{
  position:absolute!important;
  left:50%!important;
  bottom:24px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:7px!important;
}

#visual3d .aqwave-bars i{
  width:8px!important;
  height:24px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#24cfff 0%,#7a2cff 48%,#fb2c91 100%)!important;
  box-shadow:0 0 12px rgba(0,229,255,.55)!important;
  animation:aqwaveBar 1.05s ease-in-out infinite!important;
}

#visual3d .aqwave-bars i:nth-child(2){animation-delay:.08s!important}
#visual3d .aqwave-bars i:nth-child(3){animation-delay:.16s!important}
#visual3d .aqwave-bars i:nth-child(4){animation-delay:.24s!important}
#visual3d .aqwave-bars i:nth-child(5){animation-delay:.32s!important}
#visual3d .aqwave-bars i:nth-child(6){animation-delay:.40s!important}
#visual3d .aqwave-bars i:nth-child(7){animation-delay:.48s!important}
#visual3d .aqwave-bars i:nth-child(8){animation-delay:.56s!important}
#visual3d .aqwave-bars i:nth-child(9){animation-delay:.64s!important}

@keyframes aqwaveFloat{
  0%,100%{transform:translateY(0) rotateZ(-.8deg)}
  50%{transform:translateY(-9px) rotateZ(.8deg)}
}

@keyframes aqwaveSpin{
  from{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(0deg)}
  to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}
}

@keyframes aqwaveGlow{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) rotateX(66deg) scale(.96)}
  50%{opacity:1;transform:translate(-50%,-50%) rotateX(66deg) scale(1.08)}
}

@keyframes aqwaveCore{
  0%,100%{transform:translate(-50%,-50%) scale(.92)}
  50%{transform:translate(-50%,-50%) scale(1.12)}
}

@keyframes aqwaveBar{
  0%,100%{height:18px;opacity:.55}
  50%{height:58px;opacity:1}
}
/* AQ_VISUAL_CLEAN_FINAL_END */


/* AQ_MOBILE_LAYOUT_CLEAN_START */
@media (max-width: 900px){

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:linear-gradient(90deg,#840039,#210026 35%,#061125 62%,#003d4a)!important;
  }

  body{
    display:block!important;
  }

  body:before{
    left:0!important;
    right:0!important;
    width:100vw!important;
  }

  .shell{
    width:min(520px,94vw)!important;
    max-width:94vw!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:10px 0 18px!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  .top-banner{
    width:100%!important;
    max-width:100%!important;
    height:95px!important;
    margin:0 auto 12px!important;
    border-radius:18px!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }

  .grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
    margin:0 auto!important;
    padding:0!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  .center,
  .chat-card,
  .qr-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:13px!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    float:none!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
  }

  .center{
    order:1!important;
  }

  .chat-card{
    order:2!important;
  }

  .qr-panel{
    order:3!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    overflow:hidden!important;
  }

  .center h1{
    font-size:28px!important;
    line-height:1.15!important;
    margin:8px 0 12px!important;
  }

  #titleText{
    max-width:82vw!important;
  }

  #messages{
    height:330px!important;
    min-height:330px!important;
    max-height:330px!important;
    flex:none!important;
  }

  .chat-head{
    width:100%!important;
  }

  .chat-tools{
    min-height:76px!important;
  }

  .qr-main-title{
    width:100%!important;
    text-align:center!important;
    margin:0 0 12px!important;
    padding:0!important;
  }

  .qr-panel .right-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:16px 12px 18px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    overflow:hidden!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }

  .qr-panel .right-card:first-of-type{
    margin-bottom:16px!important;
  }

  .qr-panel .right-card h3{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 0 14px!important;
    padding:0!important;
    text-align:center!important;
    line-height:1.22!important;
  }

  .qr-panel .right-card:first-of-type img,
  .qr-panel .right-card:first-of-type .qr-img{
    width:min(66vw,250px)!important;
    max-width:min(66vw,250px)!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    display:block!important;
    margin:0 auto!important;
    transform:none!important;
  }

  .qr-panel .right-card:nth-of-type(2) .contact-card{
    width:min(72vw,300px)!important;
    max-width:min(72vw,300px)!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:14px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
  }

  .qr-panel .right-card:nth-of-type(2) .contact-card img,
  .qr-panel .right-card:nth-of-type(2) .contact-card .qr-img{
    width:min(60vw,235px)!important;
    max-width:min(60vw,235px)!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    display:block!important;
    margin:0 auto!important;
    transform:none!important;
  }

  .admin-panel{
    right:8px!important;
    top:95px!important;
    max-width:180px!important;
  }

  .site-footer{
    width:100%!important;
    max-width:100%!important;
    margin:18px auto 14px!important;
    padding:8px 12px!important;
    position:static!important;
    text-align:center!important;
    box-sizing:border-box!important;
    background:transparent!important;
  }
}
/* AQ_MOBILE_LAYOUT_CLEAN_END */