*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cj-orange:#ff7700;
  --cj-orange2:#ff9900;
  --cj-red:#f24724;
  --cj-blue:#2b8fef;
  --page-bg:#f4f5f7;
  --card:#ffffff;
  --text:#1f2329;
  --text2:#5b6069;
  --text3:#9aa0a8;
  --border:#eef0f2;
  --footer-bg:#34373d;
}
html{font-size:14px}
body{
  font-family:-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;cursor:pointer}
b{font-weight:700}
svg{display:block}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;display:inline-block;margin-left:3px}

/* chevrons */
.chev{width:7px;height:7px;border-right:1.6px solid #9aa0a8;border-bottom:1.6px solid #9aa0a8;display:inline-block}
.chev.down{transform:rotate(45deg)}
.chev.up{transform:rotate(-135deg)}
.chev.right{transform:rotate(-45deg)}
.chev.sm{width:6px;height:6px;margin-left:auto}
.chev.w{border-color:#fff}

/* ============ TOP HEADER ============ */
.topbar{
  height:62px;background:#fff;display:flex;align-items:center;
  padding:0 20px;gap:16px;position:sticky;top:0;z-index:100;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.topbar-left{display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:9px}
.logo-mark{
  width:38px;height:38px;border-radius:9px;
  background:linear-gradient(135deg,#ff8a1e,#ff6a00);
  color:#fff;font-family:"Brush Script MT",cursive;font-size:22px;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-style:italic;
  box-shadow:0 2px 6px rgba(255,120,0,.35);
}
.logo-mark span{font-size:18px}
.logo-text b{color:var(--cj-blue);font-size:19px;letter-spacing:.2px;line-height:1;display:block}
.logo-text em{color:#9aa0a8;font-size:9px;font-style:normal;display:block;margin-top:3px}
.menu-btn{
  display:flex;align-items:center;gap:2px;background:#f5f6f8;border:none;
  color:#5b6069;height:34px;padding:0 8px;border-radius:7px;cursor:pointer;
}
.promo{display:flex;align-items:center;background:#2f333b;border-radius:10px;overflow:hidden;height:40px}
.promo span{display:flex;align-items:center;gap:5px;padding:0 12px;color:#fff;font-size:12px;font-weight:600;line-height:1.05;height:100%}
.promo-a b{color:var(--cj-orange2)}
.promo-a{background:#2f333b}
.promo-b{background:#3a3f47;color:#ffb066}
.promo i{font-size:14px;font-style:normal}

.topbar-search{flex:1;max-width:600px;display:flex;align-items:center;
  border:1.5px solid var(--cj-orange);border-radius:8px;height:42px;padding-left:14px;background:#fff}
.topbar-search input{flex:1;border:none;outline:none;font-size:13px;background:transparent}
.topbar-search input::placeholder{color:#b6bbc2}
.cam{border:none;background:transparent;color:#8a8f97;cursor:pointer;padding:0 10px;display:flex;align-items:center}
.search-btn{border:none;background:var(--cj-orange);width:58px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ai-btn{border:none;background:linear-gradient(135deg,#ff9a3d,#ff6a00);color:#fff;width:44px;height:100%;font-size:18px;font-weight:700;cursor:pointer;border-radius:0 7px 7px 0}

.topbar-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.ic-btn{position:relative;background:none;border:none;color:#5b6069;cursor:pointer;display:flex;align-items:center;gap:2px;font-size:13px}
.ic-btn.lang span{color:#3d4148}
.badge{position:absolute;top:-7px;right:-9px;background:#f24724;color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px;line-height:1.3}
.user-chip{
  width:34px;height:34px;border-radius:50%;border:2px solid #ffd9b3;
  background:linear-gradient(135deg,#ffb84d,#ff8a1e);color:#fff;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative
}
.user-chip .caret{position:absolute;right:-10px;color:#9aa0a8}

/* ============ LAYOUT ============ */
.layout{display:flex;align-items:flex-start;max-width:1600px;margin:0 auto}

/* ============ SIDEBAR ============ */
.sidebar{
  width:222px;flex-shrink:0;align-self:stretch;position:relative;
  background:linear-gradient(180deg,#fff1e6 0%,#fde9dc 22%,#fdf3ec 55%,#fdf6f1 100%);
  padding:10px 0 40px;min-height:calc(100vh - 62px);
}
.sidebar nav{display:flex;flex-direction:column}
.nav-item{
  display:flex;align-items:center;gap:12px;height:44px;padding:0 22px;
  color:#3d4148;font-size:14px;cursor:pointer;position:relative
}
.nav-item svg{color:#6b7178;flex-shrink:0}
.nav-item.head .chev{margin-left:auto}
.nav-item.active{color:var(--cj-orange);font-weight:600;background:linear-gradient(90deg,#fff 60%,#fff)}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 3px 3px 0;background:var(--cj-orange)}
.nav-item.active svg{color:var(--cj-orange)}
.nav-item:not(.active):hover{background:rgba(255,255,255,.5)}
.sub{
  display:flex;align-items:center;height:38px;padding:0 22px 0 54px;
  color:#5b6069;font-size:13px;cursor:pointer
}
.sub:hover{color:var(--cj-orange)}
.sidebar-collapse{
  position:absolute;right:-1px;top:340px;width:16px;height:44px;background:#fff;
  border-radius:8px 0 0 8px;display:flex;align-items:center;justify-content:center;
  color:#9aa0a8;box-shadow:-1px 0 4px rgba(0,0,0,.08);cursor:pointer;font-size:13px
}

/* ============ CONTENT ============ */
.content{flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border-radius:10px;padding:20px 22px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card h3{font-size:16px;font-weight:600}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.more-link,.view-more-center a{color:var(--cj-orange);font-size:13px;cursor:pointer}
.view-more-center{text-align:center;margin-top:18px}

/* Check list */
.checklist h3{margin-bottom:16px}
.check-row{display:flex;justify-content:space-between;gap:12px}
.check-item{display:flex;align-items:center;gap:12px;flex:1}
.ci-ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.c-orange{background:#fff1e6}
.c-red{background:#ffeae7}
.c-blue{background:#e8f2fe}
.c-green{background:#e7f7ee}
.c-purple{background:#f0edfd}
.check-item small{color:#8a8f97;font-size:12px;display:block;margin-bottom:3px}
.check-item b{font-size:20px;font-weight:600}

/* Tabs */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--border);margin-bottom:14px}
.tab{background:none;border:none;padding:0 0 12px;font-size:15px;color:#8a8f97;cursor:pointer;position:relative;font-weight:500}
.tab.active{color:var(--cj-orange);font-weight:600}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:2px;background:var(--cj-orange)}
.tab-date{color:#9aa0a8;font-size:13px;margin-bottom:14px}

/* Order analysis */
.analysis{display:flex;gap:16px}
.stat-big{flex:0 0 34%;background:#f7f8fa;border-radius:8px;padding:18px;display:flex;flex-direction:column;position:relative;min-height:170px}
.stat-big small{color:#8a8f97;font-size:13px}
.stat-big b{font-size:26px;margin-top:6px}
.minibars{display:flex;align-items:flex-end;gap:8px;height:70px;margin-top:auto}
.minibars i{flex:1;background:linear-gradient(180deg,#ffd8b0,#ffbe86);border-radius:3px 3px 0 0}
.stat-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-tile{background:#f7f8fa;border-radius:8px;padding:16px 18px;position:relative;overflow:hidden}
.stat-tile small{color:#8a8f97;font-size:13px;display:flex;align-items:center;gap:5px}
.stat-tile b{font-size:22px;display:block;margin-top:10px}
.stat-tile .q{width:14px;height:14px;border-radius:50%;background:#d3d7dd;color:#fff;font-size:10px;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.ln{position:absolute;left:18px;bottom:14px;width:46px;height:3px;border-radius:2px}
.ln.c-orange{background:var(--cj-orange)}
.ln.c-purple{background:#8a6bef}
.ln.c-blue{background:#3d6dff}
.ln.c-green{background:#22b07d}

/* Strategy */
.strategy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.thumb-card{height:150px;border-radius:8px;background:var(--g);position:relative;display:flex;align-items:flex-end;padding:14px;overflow:hidden;cursor:pointer}
.thumb-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.thumb-title{position:relative;z-index:2;color:#fff;font-size:14px;font-weight:600;line-height:1.35}
.thumb-badge{position:absolute;top:12px;left:14px;z-index:2;color:#ffcf6b;font-size:22px;font-weight:800;letter-spacing:1px;opacity:.9}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{background:#f4f5f7;color:#5b6069;font-size:13px;padding:7px 14px;border-radius:16px;cursor:pointer}
.chip:hover{background:#fff1e6;color:var(--cj-orange)}
.chip.more{color:var(--cj-orange);background:transparent}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.prod{border:1px solid #f0f1f3;border-radius:8px;overflow:hidden;cursor:pointer;transition:box-shadow .15s}
.prod:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)}
.prod-img{height:150px;background:var(--pg);position:relative;display:flex;align-items:center;justify-content:center;font-size:44px}
.prod-play{position:absolute;left:8px;bottom:8px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px}
.prod-body{padding:10px}
.prod-title{font-size:13px;line-height:1.35;height:36px;overflow:hidden;color:#2d3138}
.prod-lists{color:#9aa0a8;font-size:12px;margin:8px 0 6px}
.prod-foot{display:flex;align-items:center;justify-content:space-between}
.prod-price{color:var(--cj-orange);font-weight:700;font-size:14px}
.qty{border:1px solid #e3e5e8;border-radius:5px;font-size:11px;color:#5b6069;padding:3px 8px;display:flex;align-items:center;gap:4px}

/* ============ RIGHT COLUMN ============ */
.rightcol{width:340px;flex-shrink:0;padding:16px 16px 16px 0;display:flex;flex-direction:column;gap:16px}

/* Profile */
.profile{padding:0;overflow:hidden}
.profile-top{background:linear-gradient(180deg,#ffe9d5,#fff6ee);padding:20px 22px 16px;display:flex;align-items:center;gap:14px}
.avatar-lg{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ffb84d,#ff8a1e);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center}
.profile-name b{font-size:17px;display:flex;align-items:center;gap:6px}
.vip-tag{color:var(--cj-orange);font-size:12px}
.profile-name small{color:#8a8f97;font-size:12px}
.levels{display:flex;justify-content:space-between;padding:16px 22px 6px;font-size:11px;color:#b0b5bc}
.levels .lv.on{color:var(--cj-orange);font-weight:700}
.level-bar{height:6px;margin:0 22px;border-radius:4px;background:#eef0f2;overflow:hidden}
.level-bar i{display:block;width:16%;height:100%;background:linear-gradient(90deg,#ffb84d,#ff7700)}
.profile-stats{display:flex;padding:18px 22px;gap:8px}
.profile-stats>div{flex:1;text-align:left}
.profile-stats small{color:#9aa0a8;font-size:12px;display:block;margin-bottom:6px}
.profile-stats b{font-size:16px}
.coupon-btn{margin:0 22px 20px;width:calc(100% - 44px);background:#fff7f0;border:1px solid #ffe3c9;border-radius:8px;height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;color:#3d4148;font-size:14px;font-weight:500;cursor:pointer}
.coupon-btn .coin{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ffcf6b,#ff9a1e);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.coupon-btn .chev{margin-left:auto}

/* Agent */
.agent-card{border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#3d6dff,#6a5cff 60%,#7b5cf5);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.agent-tab{background:#dfe7ff;color:#3d5bd6;font-weight:700;font-size:14px;display:inline-block;padding:9px 20px;border-radius:0 0 12px 0}
.agent-body{padding:14px 18px 20px;color:#fff;position:relative}
.agent-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.agent-photo{width:44px;height:44px;border-radius:50%;background:#fff;color:#6a5cff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:18px}
.agent-head b{font-size:16px;display:flex;align-items:center;gap:6px}
.agent-body p{font-size:12.5px;line-height:1.6;opacity:.95}
.agent-free{display:block;font-size:20px;margin:12px 0 10px}
.agent-up{font-size:12px;opacity:.9}
.agent-up a{text-decoration:underline;font-weight:600}
.agent-headset{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:16px}

/* Hot ads */
.hot-ads .refresh{color:#9aa0a8;cursor:pointer;font-size:16px}
.ad{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f4f5f7}
.ad:last-child{border-bottom:none}
.ad-thumb{width:48px;height:48px;border-radius:8px;background:var(--ag);flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;font-size:22px}
.ad-plat{position:absolute;top:-5px;left:-5px;font-size:10px;background:#111;color:#fff;padding:1px 4px;border-radius:4px}
.ad-info{flex:1;min-width:0}
.ad-info b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-info small{color:#9aa0a8;font-size:12px}
.ad-stats{text-align:right;font-size:11px;color:#8a8f97;white-space:nowrap}
.ad-stats span{display:block}

/* ============ FOOTER ============ */
.footer{background:var(--footer-bg);color:#c8ccd2;margin-top:20px}
.footer-cols{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1.1fr 1.4fr;gap:30px;padding:44px 40px 30px}
.fcol h4{color:#fff;font-size:15px;font-weight:600;margin-bottom:16px;position:relative;padding-bottom:8px}
.fcol h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:#5a5e66}
.fcol h4.mt{margin-top:26px}
.fcol a{display:block;font-size:13px;color:#a2a7ae;margin-bottom:11px;line-height:1.4}
.fcol a:hover{color:#fff}
.qr h4::after{display:none}
.qr-box{width:110px;height:110px;background:#fff;color:#333;font-size:80px;display:flex;align-items:center;justify-content:center;border-radius:6px;margin:6px 0 18px;overflow:hidden}
.soc-h{color:#fff;font-size:13px;margin:14px 0 10px;font-weight:500}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials i{width:26px;height:26px;border-radius:50%;background:#4a4e56;color:#c8ccd2;display:flex;align-items:center;justify-content:center;font-size:12px;font-style:normal;cursor:pointer}
.socials i:hover{background:var(--cj-orange);color:#fff}
.pays{display:flex;gap:6px;flex-wrap:wrap}
.pays i{background:#fff;color:#333;font-size:9px;font-weight:700;font-style:normal;padding:4px 6px;border-radius:4px;min-width:34px;text-align:center}
.footer-bottom{border-top:1px solid #44474e;text-align:center;padding:18px;font-size:12px;color:#8b9098}

/* Floating widgets */
.float-alpha{position:fixed;right:0;top:46%;background:linear-gradient(135deg,#8a6bef,#6a5cff);color:#fff;width:40px;height:34px;border-radius:10px 0 0 10px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;z-index:90;cursor:pointer;box-shadow:-2px 2px 8px rgba(0,0,0,.15)}
.float-ai{position:fixed;right:22px;bottom:34px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ff9a3d,#ff6a00);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;z-index:90;cursor:pointer;box-shadow:0 4px 14px rgba(255,120,0,.4)}

/* Responsive */
@media(max-width:1240px){
  .rightcol{display:none}
  .product-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .sidebar{display:none}
  .strategy-grid,.footer-cols{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .analysis{flex-direction:column}
  .stat-big{flex:none}
}