/* BOTVIET SHOPEE LIVE FUNCTIONAL R5
   Scope: Shopee page content only.
   Sidebar, global topbar and logo are not changed.
*/

/* Full-width fix: fill the whole space to the right of the sidebar. */
@media (min-width:769px){
  body[data-route="shopee"] .content{
    width:calc(100vw - var(--sidebar))!important;
    max-width:none!important;
    margin-left:var(--sidebar)!important;
  }
}
body[data-route="shopee"] .page-head{display:none!important}
body[data-route="shopee"] #page-body{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
body[data-route="shopee"] #page-body>*{
  width:100%!important;
  max-width:none!important;
}

.shopee-r5-dashboard{
  width:100%;
  max-width:none;
  display:grid;
  gap:14px;
  color:#f4f8ff;
}
.shopee-r5-dashboard button{font:inherit;color:inherit}

/* Exact approved horizontal hero + obvious animation layers */
.shopee-r5-hero{
  position:relative;
  display:block;
  width:100%;
  border:1px solid #246bc3;
  border-radius:17px;
  padding:0;
  overflow:hidden;
  background:#081b3a;
  box-shadow:0 14px 34px rgba(0,0,0,.24),0 0 34px rgba(22,119,255,.08);
  cursor:pointer;
}
.shopee-r5-hero img{
  display:block;
  width:100%;
  height:auto;
  transform:scale(1.001);
  animation:r5HeroBreath 7s ease-in-out infinite alternate;
}
.shopee-r5-hero-glow{
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at 62% 46%,rgba(0,221,255,.18),transparent 22%),radial-gradient(circle at 75% 50%,rgba(150,62,255,.18),transparent 24%);
  animation:r5GlowPulse 3.6s ease-in-out infinite;
  pointer-events:none;
}
.shopee-r5-hero-scan{
  position:absolute;
  top:-30%;
  left:-25%;
  width:16%;
  height:170%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  filter:blur(2px);
  animation:r5Scan 3.7s linear infinite;
  pointer-events:none;
}
.shopee-r5-particle{
  position:absolute;
  width:8px;height:8px;border-radius:50%;
  background:#53eaff;
  box-shadow:0 0 12px #53eaff,0 0 24px #5a67ff;
  pointer-events:none;
}
.shopee-r5-particle.p1{left:52%;top:26%;animation:r5P1 3.2s ease-in-out infinite}
.shopee-r5-particle.p2{left:59%;top:68%;background:#b35cff;animation:r5P2 4s ease-in-out infinite}
.shopee-r5-particle.p3{left:72%;top:22%;background:#ff61d8;animation:r5P3 3.5s ease-in-out infinite}
.shopee-r5-particle.p4{left:82%;top:70%;background:#36ffb3;animation:r5P4 4.4s ease-in-out infinite}
@keyframes r5HeroBreath{0%{transform:scale(1.001)}100%{transform:scale(1.025)}}
@keyframes r5GlowPulse{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes r5Scan{0%{transform:translateX(-30%) rotate(18deg)}100%{transform:translateX(850%) rotate(18deg)}}
@keyframes r5P1{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,-13px)}}
@keyframes r5P2{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,12px)}}
@keyframes r5P3{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,8px)}}
@keyframes r5P4{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-10px)}}

.shopee-r5-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}
.r5-kpi{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 15px;
  align-items:center;
  gap:11px;
  min-height:104px;
  padding:14px 15px;
  border:1px solid #2e65b7;
  border-radius:14px;
  background:linear-gradient(180deg,#0b2044,#081733);
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 0 24px rgba(61,114,255,.05);
}
.r5-kpi-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;font-size:21px}
.tone-blue .r5-kpi-icon{background:linear-gradient(135deg,#289cff,#1f50ff)}
.tone-green .r5-kpi-icon{background:linear-gradient(135deg,#29e8a1,#00ad68)}
.tone-orange .r5-kpi-icon{background:linear-gradient(135deg,#ffb531,#ff8215)}
.tone-purple .r5-kpi-icon{background:linear-gradient(135deg,#aa48ff,#6b2bff)}
.r5-kpi-copy small{display:block;font-size:12px}
.r5-kpi-copy b{display:inline-block;margin:5px 7px 0 0;font-size:22px}
.r5-kpi-copy strong{font-size:10px;color:#25ff9e}
.r5-kpi-copy em{display:block;margin-top:7px;font-size:10px;color:#aabbd5}
.r5-kpi-copy em.live{display:inline-block;padding:3px 8px;border-radius:999px;background:#007d5f;color:#76ffd1}
.r5-kpi>i{font-style:normal;color:#bdcbe2;font-size:22px}

.shopee-r5-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}
.r5-action{
  min-height:74px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:none;
  border-radius:14px;
  padding:12px 15px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 11px 23px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.15);
}
.r5-action>span{display:grid;place-items:center;font-size:32px}
.r5-action b{display:block;font-size:15px}
.r5-action small{display:block;margin-top:3px;font-size:10px;color:rgba(255,255,255,.86)}
.action-sync{background:linear-gradient(135deg,#ff8625,#ff4d27)}
.action-product{background:linear-gradient(135deg,#2994ff,#0c69ff)}
.action-orders{background:linear-gradient(135deg,#bd3cff,#7027ff)}
.action-settings{background:linear-gradient(135deg,#18c96d,#00a258)}

.shopee-r5-upper{
  display:grid;
  grid-template-columns:minmax(0,1.47fr) minmax(0,1fr);
  gap:13px;
}
.shopee-r5-lower{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,.98fr) minmax(0,.76fr);
  gap:13px;
  align-items:stretch;
}
.r5-side-stack{display:grid;grid-template-rows:1fr auto;gap:13px}
.r5-card{
  min-width:0;
  border:1px solid #245ca7;
  border-radius:14px;
  background:linear-gradient(180deg,#081d3f,#061730);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
  overflow:hidden;
}
.r5-card>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px 7px;
}
.r5-card>header h3{margin:0;font-size:14px}
.r5-card>header button{border:0;background:transparent;color:#2dcfff;font-size:10px;cursor:pointer}

.r5-order-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:5px 13px 13px}
.r5-order-status button{
  min-height:94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;cursor:pointer
}
.r5-order-status span{font-size:18px}
.r5-order-status small{font-size:10px}
.r5-order-status b{font-size:20px}
.r5-order-status em{font-size:9px;font-style:normal}
.state-red{background:linear-gradient(180deg,rgba(105,20,52,.76),rgba(61,15,37,.76));color:#ff91a8!important}
.state-amber{background:linear-gradient(180deg,rgba(90,54,17,.76),rgba(50,31,12,.76));color:#ffc860!important}
.state-blue{background:linear-gradient(180deg,rgba(17,65,111,.76),rgba(12,42,73,.76));color:#72c0ff!important}
.state-green{background:linear-gradient(180deg,rgba(13,83,70,.76),rgba(8,50,43,.76));color:#63eab0!important}

.r5-chart-card{position:relative}
.r5-chart-card .shopee-chart-wrap{padding:2px 12px 5px}
.r5-chart-card .shopee-line-chart{width:100%;height:128px}
.r5-chart-card .shopee-chart-guides line{stroke:#234a78;stroke-width:1}
.r5-chart-card .shopee-chart-area{fill:rgba(46,127,255,.18)}
.r5-chart-card .shopee-chart-line{fill:none;stroke:#2d8cff;stroke-width:3}
.r5-chart-card .shopee-chart-point{fill:#3e92ff;stroke:#8cc4ff;stroke-width:2}
.r5-chart-card .shopee-chart-label{fill:#93a9c8;font-size:10px}
.r5-chart-card .shopee-chart-empty{min-height:128px;padding:22px;color:#9cb1ce}
.r5-chart-total{padding:0 13px 12px;display:flex;justify-content:flex-end;gap:8px;color:#9eb1cd;font-size:10px}
.r5-chart-total b{color:#fff}

.r5-products,.r5-automation,.r5-customers{padding:0 13px 12px}
.r5-product{
  width:100%;
  min-height:78px;
  display:grid;
  grid-template-columns:78px minmax(0,1fr) auto 13px;
  gap:9px;
  align-items:center;
  padding:7px 0;
  border:0;
  border-top:1px solid rgba(40,92,149,.42);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.r5-product:first-child{border-top:0}
.r5-product-thumb{display:grid;place-items:center;width:78px;height:58px;border-radius:9px;overflow:hidden;background:#fff;color:#0b2245}
.r5-product-thumb img{width:100%;height:100%;object-fit:cover}
.r5-product-info b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r5-product-info strong{display:block;margin:4px 0;color:#ff72cb;font-size:13px}
.r5-product-info small{font-size:9px;color:#a7bad5}
.r5-product mark{padding:4px 8px;border-radius:999px;font-size:9px;white-space:nowrap}
.r5-product mark.live{background:#007b5e;color:#70ffd1}
.r5-product mark.warn{background:#784318;color:#ffd194}
.r5-product>i{font-style:normal;color:#afc3de}

.r5-automation>button{
  width:100%;
  min-height:68px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 24px;
  gap:9px;
  align-items:center;
  padding:7px 0;
  border:0;
  border-top:1px solid rgba(40,92,149,.42);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.r5-automation>button:first-child{border-top:0}
.auto-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;font-size:17px}
.auto-icon.blue{background:#0d72d2}.auto-icon.orange{background:#ed6c20}.auto-icon.red{background:#ef3e55}.auto-icon.gold{background:#f1a51a}
.r5-automation b{display:block;font-size:11px}
.r5-automation small{font-size:9px;color:#9db2cf}
.r5-automation i{justify-self:end;font-style:normal;color:#57aaff}

.r5-customers>button{
  width:100%;
  min-height:54px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:6px 0;
  border:0;
  border-top:1px solid rgba(40,92,149,.4);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.r5-customers>button:first-child{border-top:0}
.r5-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#e4b58d,#81513d);font-size:11px;font-weight:800}
.r5-customers b{display:block;font-size:10px}
.r5-customers small{font-size:8px;color:#9fb4d0}
.r5-customers em{font-style:normal;font-size:8px;color:#b4c2d6;white-space:nowrap}

.r5-promo{
  width:calc(100% - 20px);
  margin:0 10px 10px;
  min-height:78px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:9px;
  border:0;
  border-radius:10px;
  background:#0a2143;
  text-align:left;
  cursor:pointer;
}
.r5-promo>span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#f65a57,#cc2037);font-size:20px}
.r5-promo b{display:block;font-size:10px}
.r5-promo small{display:block;font-size:8px;color:#a4b6cf}
.r5-promo i{display:block;height:6px;margin-top:7px;border-radius:999px;background:#2a4164;overflow:hidden}
.r5-promo i u{display:block;height:100%;background:linear-gradient(90deg,#9547ff,#4e84ff)}
.r5-promo em{padding:3px 7px;border-radius:999px;background:#006a46;color:#6affc2;font-size:8px;font-style:normal}

/* The real, existing BotViet Shopee panels shown after a dashboard click. */
.shopee-r5-functional-shell{
  width:100%;
  max-width:none!important;
  display:grid;
  gap:12px;
}
.shopee-r5-functional-bar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:11px 12px;
  border:1px solid #245b9e;
  border-radius:14px;
  background:#071b39;
}
.shopee-r5-functional-bar>div:nth-child(2){display:flex;flex-direction:column}
.shopee-r5-functional-bar small{font-size:9px;color:#3bdcff;letter-spacing:.1em}
.shopee-r5-functional-bar b{font-size:15px}
.shopee-r5-functional-actions{display:flex;gap:8px}

/* Remove the original 1600px center cap only on Shopee. */
body[data-route="shopee"] .shopee-commerce-center,
body[data-route="shopee"] .shopee-workspace-panel{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media (max-width:1200px){
  .shopee-r5-kpis,.shopee-r5-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shopee-r5-upper{grid-template-columns:1fr}
  .shopee-r5-lower{grid-template-columns:1fr 1fr}
  .r5-side-stack{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}
}
@media (max-width:768px){
  body[data-route="shopee"] .content{width:100%!important}
  .shopee-r5-dashboard{gap:10px}
  .shopee-r5-kpis,.shopee-r5-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .r5-kpi{grid-template-columns:37px minmax(0,1fr);min-height:90px;padding:10px;gap:7px}
  .r5-kpi>i{display:none}
  .r5-kpi-icon{width:34px;height:34px;font-size:16px}
  .r5-kpi-copy b{font-size:17px}
  .r5-action{min-height:62px;grid-template-columns:34px 1fr;padding:9px 10px}
  .r5-action>span{font-size:24px}
  .r5-action b{font-size:12px}
  .r5-action small{font-size:8px}
  .shopee-r5-lower{grid-template-columns:1fr}
  .r5-side-stack{grid-column:auto;grid-template-columns:1fr}
  .r5-order-status{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r5-product{grid-template-columns:62px minmax(0,1fr) auto}
  .r5-product-thumb{width:62px;height:50px}
  .r5-product>i{display:none}
  .shopee-r5-functional-bar{grid-template-columns:1fr}
  .shopee-r5-functional-actions{display:grid;grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .shopee-r5-hero img,.shopee-r5-hero-glow,.shopee-r5-hero-scan,.shopee-r5-particle{animation:none!important}
}