/* ============================================================
   BOTVIET SHOPEE CONNECT VIP R38
   Chỉ tác động modal Shopee trên /app/connections.
   Không sửa modal khác / backend / OAuth / database.
   ============================================================ */

#modal-root .modal-backdrop:has(.bv-shopee-connect-vip-r38){
  padding:24px!important;
  background:
    radial-gradient(circle at 50% 30%,rgba(0,94,210,.12),transparent 42%),
    rgba(0,5,16,.78)!important;
  backdrop-filter:blur(13px) saturate(118%)!important;
}

#modal-root .modal.bv-shopee-connect-vip-r38{
  width:min(1548px,96vw)!important;
  max-height:94vh!important;
  overflow:auto!important;
  color:#f7fbff!important;
  border:2px solid #288eff!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 18% 16%,rgba(13,96,199,.18),transparent 27%),
    radial-gradient(circle at 82% 70%,rgba(16,78,196,.10),transparent 29%),
    linear-gradient(145deg,#071a38 0%,#06152e 48%,#061832 100%)!important;
  box-shadow:
    0 0 0 1px rgba(94,193,255,.16) inset,
    0 0 28px rgba(34,142,255,.28),
    0 34px 90px rgba(0,0,0,.62)!important;
}

#modal-root .bv-shopee-connect-vip-r38 .modal-head{
  position:relative!important;
  min-height:158px!important;
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr) 62px!important;
  align-items:center!important;
  gap:28px!important;
  padding:28px 36px!important;
  border-bottom:0!important;
  background:linear-gradient(180deg,rgba(5,28,61,.88),rgba(5,23,50,.22))!important;
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-head-link{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border:1px solid rgba(60,155,255,.44);
  border-radius:25px;
  background:
    radial-gradient(circle at 35% 25%,rgba(86,180,255,.22),transparent 38%),
    linear-gradient(145deg,#0a376b,#08234a);
  color:#8cc8ff;
  box-shadow:
    inset 0 0 26px rgba(32,123,244,.14),
    0 0 26px rgba(29,122,236,.18);
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-head-link svg{
  width:43px;height:43px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
}

#modal-root .bv-shopee-connect-vip-r38 .modal-head h2{
  min-width:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  font-weight:900!important;
  letter-spacing:-1px!important;
}
#modal-root .bv-shopee-connect-vip-r38 .modal-head h2>span{
  font-size:44px!important;
  line-height:1.02!important;
  color:#fff!important;
  text-shadow:0 4px 18px rgba(0,0,0,.28)!important;
}
#modal-root .bv-shopee-connect-vip-r38 .modal-head h2>small{
  color:#a8bdd8!important;
  font-size:22px!important;
  line-height:1.3!important;
  font-weight:500!important;
  letter-spacing:0!important;
}

#modal-root .bv-shopee-connect-vip-r38 .modal-head .icon-btn{
  width:62px!important;
  height:62px!important;
  margin-left:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #2b6ba9!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#0a2c55,#071b38)!important;
  color:#fff!important;
  font-size:38px!important;
  line-height:1!important;
  box-shadow:inset 0 0 18px rgba(80,163,255,.05)!important;
  transition:.18s ease!important;
}
#modal-root .bv-shopee-connect-vip-r38 .modal-head .icon-btn:hover{
  border-color:#53b6ff!important;
  background:#0b386d!important;
  transform:translateY(-1px)!important;
}

#modal-root .bv-shopee-connect-vip-r38 .modal-body{
  padding:0 36px 20px!important;
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-stage{
  display:grid;
  gap:24px;
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-card{
  padding:46px 52px 36px;
  border:1.5px solid #228fe9;
  border-radius:24px;
  background:
    radial-gradient(circle at 15% 30%,rgba(36,126,255,.18),transparent 26%),
    radial-gradient(circle at 75% 65%,rgba(29,98,215,.13),transparent 36%),
    linear-gradient(145deg,#08264f 0%,#061e42 55%,#071c3b 100%);
  box-shadow:
    inset 0 0 34px rgba(29,116,225,.12),
    0 0 30px rgba(27,119,230,.13);
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-hero{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  align-items:center;
  gap:42px;
  min-height:250px;
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo{
  position:relative;
  width:220px;
  height:220px;
  margin:auto;
  display:grid;
  place-items:center;
  isolation:isolate;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo>span{
  position:relative;
  z-index:4;
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
  border-radius:30px;
  background:
    radial-gradient(circle at 45% 25%,rgba(255,255,255,.14),transparent 32%),
    linear-gradient(145deg,#ff7d57,#ff4f27);
  box-shadow:
    0 0 0 1px rgba(255,166,137,.45) inset,
    0 0 32px rgba(255,80,39,.46),
    0 26px 42px rgba(13,21,46,.40);
  transform:rotate(-1deg);
  animation:bvShopeeFloatR38 4.6s ease-in-out infinite;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo>span svg{
  width:118px;height:118px;filter:drop-shadow(0 8px 12px rgba(83,19,0,.22));
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-orbit{
  position:absolute;
  inset:16px;
  z-index:1;
  border:2px solid rgba(36,121,255,.55);
  border-radius:50%;
  box-shadow:0 0 22px rgba(32,130,255,.28);
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-orbit.orbit-a{
  transform:rotate(18deg) scaleY(.56);
  animation:bvShopeeOrbitA 7s linear infinite;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-orbit.orbit-b{
  transform:rotate(-24deg) scaleY(.46);
  border-color:rgba(87,96,255,.58);
  animation:bvShopeeOrbitB 8.5s linear infinite reverse;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo .spark{
  position:absolute;z-index:5;width:6px;height:6px;border-radius:50%;
  background:#61e9ff;box-shadow:0 0 12px #2fcfff,0 0 24px #3a73ff;
  animation:bvShopeeSparkR38 2.3s ease-in-out infinite;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo .s1{left:15px;top:105px}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo .s2{right:5px;top:45px;animation-delay:.4s}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo .s3{right:18px;bottom:40px;animation-delay:.8s}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo .s4{left:35px;bottom:16px;animation-delay:1.2s}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-copy h3{
  margin:0 0 18px!important;
  color:#f9fbff!important;
  font-size:36px!important;
  line-height:1.18!important;
  font-weight:900!important;
  letter-spacing:-.6px!important;
  text-shadow:0 4px 20px rgba(0,0,0,.30)!important;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-copy p{
  max-width:1040px;
  margin:0!important;
  color:#a9bdd8!important;
  font-size:21px!important;
  line-height:1.52!important;
  font-weight:500!important;
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:28px;
  padding-top:12px;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article{
  min-height:104px;
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:10px 32px 10px 0;
  position:relative;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article+article{
  padding-left:42px;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article+article::before{
  content:"";
  position:absolute;
  left:0;top:10px;bottom:10px;width:1px;
  background:linear-gradient(transparent,#2d6cac 22%,#2d6cac 78%,transparent);
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-benefit-icon{
  width:76px;height:76px;display:grid;place-items:center;border-radius:50%;
  color:#b8dcff;
  background:
    radial-gradient(circle at 35% 25%,rgba(122,190,255,.23),transparent 32%),
    linear-gradient(145deg,#0e5cb2,#18245f);
  border:1px solid #2c89ef;
  box-shadow:0 0 26px rgba(42,122,244,.25),inset 0 0 20px rgba(73,150,255,.13);
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-benefit-icon svg{
  width:43px;height:43px;fill:none;stroke:currentColor;stroke-width:3.1;
  stroke-linecap:round;stroke-linejoin:round;
}
#modal-root .bv-shopee-connect-vip-r38 article:nth-child(3) .bv-shopee-benefit-icon svg{
  fill:currentColor;stroke:none;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits b{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:23px;
  line-height:1.2;
  font-weight:900;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits small{
  display:block;
  color:#a3b8d3;
  font-size:17px;
  line-height:1.42;
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security{
  min-height:82px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:14px 28px;
  border:1px solid #00a994;
  border-radius:18px;
  background:
    radial-gradient(circle at 8% 50%,rgba(0,200,160,.16),transparent 18%),
    linear-gradient(90deg,rgba(0,87,91,.48),rgba(4,46,73,.56));
  color:#72f1d4;
  box-shadow:inset 0 0 24px rgba(0,205,177,.05),0 0 22px rgba(0,160,145,.08);
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security>span{
  width:55px;height:55px;flex:0 0 55px;display:grid;place-items:center;
  border-right:1px solid rgba(56,224,201,.72);
  padding-right:18px;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security svg{
  width:39px;height:39px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security b{
  font-size:19px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.05px;
}

#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-admin-note{
  padding:15px 18px;
  border:1px solid #896c25;
  border-radius:13px;
  background:rgba(128,91,19,.11);
  color:#f2d58b;
  font-size:14px;
  line-height:1.45;
}

#modal-root .bv-shopee-connect-vip-r38 .modal-foot{
  min-height:132px!important;
  padding:24px 36px 30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:22px!important;
  border-top:0!important;
  background:linear-gradient(180deg,rgba(4,18,40,.10),rgba(4,18,40,.72))!important;
}
#modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn{
  min-width:202px!important;
  height:76px!important;
  margin:0!important;
  padding:0 34px!important;
  border:1px solid #336fa9!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#0a294d,#071c38)!important;
  color:#fff!important;
  font-size:22px!important;
  font-weight:850!important;
  box-shadow:inset 0 0 18px rgba(67,156,255,.04)!important;
  transition:.18s ease!important;
}
#modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn:hover{
  border-color:#58b8ff!important;
  transform:translateY(-1px)!important;
}
#modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn.primary{
  min-width:470px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  border-color:#28d6ff!important;
  background:linear-gradient(100deg,#126dff 0%,#0b8cff 55%,#1ad3ed 100%)!important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.14),
    0 0 22px rgba(27,175,255,.45),
    0 11px 28px rgba(0,79,210,.24)!important;
}
#modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn.primary:hover{
  filter:brightness(1.08)!important;
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.16),
    0 0 32px rgba(25,190,255,.58),
    0 14px 32px rgba(0,79,210,.28)!important;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-primary-link{
  width:34px;height:34px;display:grid;place-items:center;
}
#modal-root .bv-shopee-connect-vip-r38 .bv-shopee-primary-link svg{
  width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
}

@keyframes bvShopeeFloatR38{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-8px) rotate(1deg)}
}
@keyframes bvShopeeOrbitA{
  from{transform:rotate(18deg) scaleY(.56)}
  to{transform:rotate(378deg) scaleY(.56)}
}
@keyframes bvShopeeOrbitB{
  from{transform:rotate(-24deg) scaleY(.46)}
  to{transform:rotate(336deg) scaleY(.46)}
}
@keyframes bvShopeeSparkR38{
  0%,100%{opacity:.34;transform:scale(.68)}
  50%{opacity:1;transform:scale(1.35)}
}

@media (prefers-reduced-motion:reduce){
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo>span,
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-orbit,
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo .spark{
    animation:none!important;
  }
}

/* Tablet */
@media (max-width:1100px){
  #modal-root .modal.bv-shopee-connect-vip-r38{width:min(960px,96vw)!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-head{
    min-height:126px!important;
    grid-template-columns:68px minmax(0,1fr) 52px!important;
    gap:18px!important;
    padding:22px 24px!important;
  }
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-head-link{width:62px;height:62px;border-radius:20px}
  #modal-root .bv-shopee-connect-vip-r38 .modal-head h2>span{font-size:32px!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-head h2>small{font-size:16px!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-body{padding:0 24px 18px!important}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-card{padding:30px 28px 24px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-hero{grid-template-columns:190px minmax(0,1fr);gap:24px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo{width:170px;height:170px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo>span{width:110px;height:110px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo>span svg{width:91px;height:91px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-copy h3{font-size:27px!important}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-copy p{font-size:16px!important}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article{grid-template-columns:64px minmax(0,1fr);padding-right:20px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article+article{padding-left:24px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-benefit-icon{width:58px;height:58px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-benefit-icon svg{width:32px;height:32px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits b{font-size:17px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits small{font-size:13px}
  #modal-root .bv-shopee-connect-vip-r38 .modal-foot{min-height:100px!important;padding:20px 24px!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn{height:60px!important;font-size:17px!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn.primary{min-width:360px!important}
}

/* Mobile: giữ tinh thần VIP nhưng xếp gọn, không tràn */
@media (max-width:720px){
  #modal-root .modal-backdrop:has(.bv-shopee-connect-vip-r38){padding:8px!important}
  #modal-root .modal.bv-shopee-connect-vip-r38{
    width:100%!important;
    max-height:96vh!important;
    border-radius:22px!important;
  }
  #modal-root .bv-shopee-connect-vip-r38 .modal-head{
    min-height:94px!important;
    grid-template-columns:50px minmax(0,1fr) 42px!important;
    gap:12px!important;
    padding:16px!important;
  }
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-head-link{width:46px;height:46px;border-radius:15px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-head-link svg{width:28px;height:28px}
  #modal-root .bv-shopee-connect-vip-r38 .modal-head h2>span{font-size:22px!important;letter-spacing:-.4px!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-head h2>small{font-size:11px!important;line-height:1.3!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-head .icon-btn{width:40px!important;height:40px!important;border-radius:12px!important;font-size:26px!important}
  #modal-root .bv-shopee-connect-vip-r38 .modal-body{padding:0 12px 12px!important}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-stage{gap:12px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-card{padding:18px 15px;border-radius:18px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-hero{grid-template-columns:1fr;gap:12px;min-height:auto}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo{width:122px;height:122px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo>span{width:78px;height:78px;border-radius:20px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-logo>span svg{width:64px;height:64px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-copy{text-align:center}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-copy h3{font-size:20px!important;margin-bottom:10px!important}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-copy p{font-size:12px!important;line-height:1.5!important}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits{grid-template-columns:1fr;gap:8px;margin-top:18px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article,
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article+article{
    min-height:66px;grid-template-columns:50px minmax(0,1fr);gap:12px;padding:8px 0!important;
  }
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits article+article::before{display:none}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-benefit-icon{width:46px;height:46px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-benefit-icon svg{width:25px;height:25px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits b{font-size:14px;margin-bottom:3px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-benefits small{font-size:10px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security{min-height:62px;gap:11px;padding:10px 12px;border-radius:14px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security>span{width:39px;height:39px;flex-basis:39px;padding-right:10px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security svg{width:25px;height:25px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-vip-security b{font-size:10px;line-height:1.4}
  #modal-root .bv-shopee-connect-vip-r38 .modal-foot{
    min-height:auto!important;
    padding:12px!important;
    gap:9px!important;
    display:grid!important;
    grid-template-columns:.72fr 1.5fr!important;
  }
  #modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn,
  #modal-root .bv-shopee-connect-vip-r38 .modal-foot .btn.primary{
    min-width:0!important;
    width:100%!important;
    height:50px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-primary-link{width:22px;height:22px}
  #modal-root .bv-shopee-connect-vip-r38 .bv-shopee-primary-link svg{width:22px;height:22px}
}