/* GBVIET UserCP — theme nhẹ, responsive */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1e293b;background:#f1f5f9;line-height:1.55;font-size:15px;display:flex;flex-direction:column;min-height:100vh}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* Header / nav */
.site-header{background:linear-gradient(120deg,#0f172a,#1e3a8a);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.header-in{display:flex;align-items:center;gap:16px;height:60px}
.brand{color:#fff;font-weight:800;font-size:22px;letter-spacing:.5px;text-decoration:none;white-space:nowrap}
.brand-dot{color:#38bdf8}
.mainnav{display:flex;align-items:center;gap:6px;margin-left:auto}
.mainnav>a{color:#cbd5e1;padding:8px 12px;border-radius:8px;font-weight:600;text-decoration:none;font-size:14px}
.mainnav>a:hover{background:rgba(255,255,255,.08);color:#fff}
.mainnav>a.active{background:rgba(56,189,248,.18);color:#fff}
.nav-auth{display:flex;align-items:center;gap:8px;margin-left:10px}
.btn-ghost{color:#e2e8f0;border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:8px;font-weight:600;font-size:14px}
.btn-ghost:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
.btn-cta{background:#38bdf8;color:#0f172a;padding:7px 16px;border-radius:8px;font-weight:700;font-size:14px}
.btn-cta:hover{background:#0ea5e9;text-decoration:none;color:#082f49}
.btn-user{background:rgba(56,189,248,.2);color:#fff;padding:7px 14px;border-radius:8px;font-weight:700;font-size:14px}
.btn-user:hover{text-decoration:none;background:rgba(56,189,248,.32)}
.navtoggle,.navburger{display:none}

/* Main */
.main{padding:24px 16px 40px;flex:1 0 auto;width:100%}
.panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:18px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.panel-head{padding:14px 18px;font-weight:700;border-bottom:1px solid #eef2f7;font-size:16px}
.panel-body{padding:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* Hero */
.hero{background:linear-gradient(120deg,#1e3a8a,#0ea5e9);color:#fff;border-radius:16px;padding:36px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.hero h1{margin:0 0 8px;font-size:32px;font-weight:800}
.hero p{margin:0 0 18px;color:#dbeafe;font-size:16px;max-width:620px}
.hero .btn-cta{font-size:16px;padding:12px 24px}

/* Buttons / forms */
.btn{display:inline-block;background:#e2e8f0;color:#0f172a;border:none;padding:9px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px;text-decoration:none}
.btn:hover{background:#cbd5e1;text-decoration:none}
.btn-primary{background:#2563eb;color:#fff}
.btn-primary:hover{background:#1d4ed8;color:#fff}
.btn-block{display:block;width:100%;text-align:center}
.btn-lg{padding:12px 20px;font-size:16px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-weight:600;margin-bottom:6px;font-size:14px;color:#334155}
.form-control{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:15px;background:#fff}
.form-control:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.hint{color:#64748b;font-size:12px;margin-top:4px}

/* Auth box */
.auth-wrap{max-width:420px;margin:20px auto}
.auth-wrap .panel-head{text-align:center;font-size:20px}
.auth-alt{text-align:center;margin-top:14px;font-size:14px;color:#64748b}

/* Alerts */
.alert{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:14px}
.alert-success{background:#dcfce7;color:#166534}
.alert-error{background:#fee2e2;color:#991b1b}
.alert-info{background:#dbeafe;color:#1e40af}

/* News */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.news-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.news-card .nc-body{padding:14px 16px}
.news-card h3{margin:0 0 6px;font-size:17px}
.news-card h3 a{color:#0f172a}
.news-meta{color:#94a3b8;font-size:12px;margin-bottom:8px}
.news-excerpt{color:#475569;font-size:14px}
.news-list-item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #eef2f7}
.news-list-item:last-child{border-bottom:none}
.news-content{font-size:15px;line-height:1.7}
.news-content img{border-radius:8px;height:auto}
.news-content h1,.news-content h2,.news-content h3{line-height:1.3}

/* Tables (ranking) */
.data{width:100%;border-collapse:collapse;font-size:14px}
.data th,.data td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef2f7}
.data th{background:#f8fafc;color:#475569;font-weight:600;font-size:13px}
.data tbody tr:hover{background:#f8fafc}
.rank-medal{font-weight:800;text-align:center;width:52px}
.rank-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rank-tabs a{padding:8px 16px;border-radius:20px;background:#e2e8f0;color:#334155;font-weight:600;font-size:14px}
.rank-tabs a.active{background:#2563eb;color:#fff}
.rank-tabs a:hover{text-decoration:none}

/* News tabs (3 mục rõ ràng) */
.news-tabs{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.news-tab{flex:1;min-width:130px;text-align:center;padding:12px 16px;border-radius:10px;background:#fff;border:2px solid #e2e8f0;color:#475569;font-weight:700;font-size:15px}
.news-tab:hover{border-color:var(--tc,#2563eb);color:var(--tc,#2563eb);text-decoration:none}
.news-tab.active{background:var(--tc,#2563eb);border-color:var(--tc,#2563eb);color:#fff}
.nt-count{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:rgba(0,0,0,.08);font-size:12px;margin-left:2px}
.news-tab.active .nt-count{background:rgba(255,255,255,.28)}

/* Tab tin tức trên trang chủ (bấm chuyển tại chỗ) */
.home-news-tabs{display:flex;gap:6px;flex-wrap:wrap}
.hnt{background:#f1f5f9;border:1px solid #e2e8f0;color:#475569;font-weight:700;font-size:14px;padding:7px 14px;border-radius:8px;cursor:pointer}
.hnt:hover{border-color:var(--tc,#2563eb);color:var(--tc,#2563eb)}
.hnt.active{background:var(--tc,#2563eb);border-color:var(--tc,#2563eb);color:#fff}

/* Account */
.acc-grid{display:grid;grid-template-columns:220px 1fr;gap:18px}
.acc-side{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;height:fit-content}
.acc-side a{display:block;padding:12px 16px;color:#334155;font-weight:600;border-bottom:1px solid #f1f5f9}
.acc-side a:hover{background:#f8fafc;text-decoration:none}
.acc-side a.active{background:#eff6ff;color:#1d4ed8;border-left:3px solid #2563eb}
.stat-row{display:flex;flex-wrap:wrap;gap:14px}
.stat-box{flex:1;min-width:150px;background:#f8fafc;border-radius:10px;padding:14px}
.stat-box .sv{font-size:22px;font-weight:800;color:#1d4ed8}
.stat-box .sl{color:#64748b;font-size:13px}
.rank-ico{vertical-align:middle;margin-right:4px}

/* Footer */
.site-footer{background:#0f172a;color:#94a3b8;padding:22px 0;font-size:14px;flex-shrink:0}
.footer-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.foot-links a{color:#cbd5e1;margin-left:16px}

/* Responsive */
@media (max-width:820px){
  .navburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;margin-left:auto;cursor:pointer}
  .navburger span{display:block;height:3px;background:#fff;border-radius:2px}
  .mainnav{position:fixed;top:60px;left:0;right:0;background:#0f172a;flex-direction:column;align-items:stretch;gap:0;padding:8px 0;transform:translateY(-140%);transition:transform .25s;max-height:calc(100vh - 60px);overflow:auto}
  .navtoggle:checked ~ .mainnav{transform:translateY(0)}
  .mainnav>a{padding:14px 20px;border-radius:0}
  .nav-auth{margin:8px 16px 4px;justify-content:flex-start}
  .grid2,.grid3{grid-template-columns:1fr}
  .acc-grid{grid-template-columns:1fr}
  .hero h1{font-size:26px}
}

/* ── Cửa hàng (shop) ── */
.shop{padding:22px 0}
.shop .page-title{font-size:24px;font-weight:800;margin:0 0 16px}
.shop-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.shop-tabs{display:flex;gap:8px;flex-wrap:wrap}
.shop-tab{background:#fff;border:1px solid #e2e8f0;color:#0f172a;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none}
.shop-tab:hover{border-color:#38bdf8;color:#0ea5e9;text-decoration:none}
.shop-tab.active{background:#38bdf8;border-color:#38bdf8;color:#082f49}
.shop-balance{background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:8px 16px;font-size:14px}
.shop-tip{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;padding:10px 14px;color:#475569;font-size:13.5px;margin-bottom:16px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.shop-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;gap:8px}
.shop-card:hover{border-color:#38bdf8;box-shadow:0 4px 14px rgba(56,189,248,.18)}
.shop-badge{position:absolute;top:10px;left:10px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.shop-card-img{height:120px;display:flex;align-items:center;justify-content:center}
.shop-card-img img{max-height:120px;max-width:100%;object-fit:contain}
.shop-card-name{font-weight:800;font-size:16px}
.shop-card-unit{color:#64748b;font-size:13px}
.shop-card-price{font-size:15px;margin:2px 0 6px}
.shop-card .btn,.shop-card form{width:100%}
.shop-card .btn{width:100%;text-align:center}

/* ── Popup xác nhận (modal) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-card{background:#fff;border-radius:16px;max-width:400px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;transform:translateY(12px) scale(.97);transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.modal-overlay.open .modal-card{transform:translateY(0) scale(1)}
.modal-top{padding:22px 24px 8px;text-align:center}
.modal-ico{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#2563eb);display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff}
.modal-title{font-size:19px;font-weight:800;color:#0f172a;margin:0 0 6px}
.modal-msg{font-size:14.5px;color:#475569;line-height:1.55;padding:0 24px 4px;text-align:center}
.modal-actions{display:flex;gap:10px;padding:18px 24px 22px}
.modal-btn{flex:1;padding:11px 14px;border-radius:10px;font-weight:700;font-size:14.5px;cursor:pointer;border:none;text-align:center;transition:filter .12s ease}
.modal-btn:hover{filter:brightness(.96)}
.modal-cancel{background:#e2e8f0;color:#334155}
.modal-ok{background:#38bdf8;color:#082f49}

/* ── Shop Avatar ── */
.shop-search{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.shop-search .form-control{max-width:320px}
.shop-back{display:inline-block;margin-bottom:14px;color:#0ea5e9;font-weight:600;text-decoration:none}
.shop-back:hover{text-decoration:underline}
.av-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.av-card{cursor:pointer}
.av-card .shop-card-img{height:96px}
.av-card .shop-card-img img{max-height:96px}
.av-detail{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.av-detail-img{flex:0 0 240px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;text-align:center;min-height:180px;display:flex;align-items:center;justify-content:center}
.av-detail-img img{max-width:100%;max-height:220px}
.av-detail-info{flex:1;min-width:280px}
.av-detail-info h2{margin:0 0 6px;font-size:22px;font-weight:800}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:22px}
.pager .pg{min-width:38px;text-align:center;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#0f172a;font-weight:700;font-size:14px;text-decoration:none}
.pager .pg:hover{border-color:#38bdf8;color:#0ea5e9}
.pager .pg.active{background:#38bdf8;border-color:#38bdf8;color:#082f49}
.pager .pg.disabled{opacity:.4;pointer-events:none}
.pager .pg-info{margin-left:8px;color:#64748b;font-size:13px}

/* Nền placeholder khi ảnh avatar đang tải (server ảnh chậm) */
.av-card .shop-card-img{background:#f1f5f9;border-radius:8px}

/* ── Popup thông báo (flash success/error) ── */
.flash-pop-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1100;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.flash-pop-overlay.open{opacity:1;visibility:visible}
.flash-pop-card{position:relative;background:#fff;border-radius:16px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:24px 44px 24px 22px;display:flex;gap:16px;align-items:center;transform:translateY(14px) scale(.96);transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
.flash-pop-overlay.open .flash-pop-card{transform:translateY(0) scale(1)}
.flash-pop-card+.flash-pop-card{margin-top:12px}
.fp-ico{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff}
.fp-success .fp-ico{background:linear-gradient(135deg,#34d399,#059669)}
.fp-error .fp-ico{background:linear-gradient(135deg,#fb7185,#e11d48)}
.fp-body{flex:1;min-width:0}
.fp-title{font-size:17px;font-weight:800;color:#0f172a;margin-bottom:3px}
.fp-success .fp-title{color:#047857}
.fp-error .fp-title{color:#be123c}
.fp-msg{font-size:14.5px;color:#475569;line-height:1.5;word-wrap:break-word}
.fp-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:26px;line-height:1;color:#94a3b8;cursor:pointer;padding:0 4px}
.fp-close:hover{color:#334155}

/* ── Menu con danh mục avatar ── */
.av-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.av-cat{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e2e8f0;color:#334155;padding:7px 13px;border-radius:999px;font-weight:700;font-size:13.5px;text-decoration:none}
.av-cat:hover{border-color:#38bdf8;color:#0ea5e9;text-decoration:none}
.av-cat.active{background:#0f172a;border-color:#0f172a;color:#fff}
.av-cat-n{background:#e2e8f0;color:#475569;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700}
.av-cat.active .av-cat-n{background:rgba(255,255,255,.22);color:#fff}

/* ── Clan ── */
.clanpage{padding:22px 0}
.clanpage .page-title{font-size:24px;font-weight:800;margin:0 0 16px}
.clan-badge{position:relative;width:64px;height:64px;border-radius:50%;background:#eef2f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 8.5 8 10 4.6-1.5 8-5 8-10V5l-8-3z'/%3E%3C/svg%3E") center/48% no-repeat;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.clan-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clan-badge.sm{width:44px;height:44px}
.clan-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 4px}
.clan-pod{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.clan-pod:hover{border-color:#38bdf8;box-shadow:0 6px 18px rgba(56,189,248,.16);text-decoration:none}
.clan-pod-gold{border-color:#f5c451;background:linear-gradient(180deg,#fffbeb,#fff)}
.clan-pod-silver{border-color:#cbd5e1;background:linear-gradient(180deg,#f8fafc,#fff)}
.clan-pod-bronze{border-color:#e6b088;background:linear-gradient(180deg,#fdf3ec,#fff)}
.clan-pod-rank{font-size:30px;line-height:1}
.clan-pod-name{font-weight:800;font-size:17px}
.clan-pod-mem{color:#334155;font-size:14px}
.clan-pod-gp{color:#b45309;font-size:13.5px;font-weight:600}
.clan-pod-master{color:#64748b;font-size:12.5px}
.clan-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.clan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:6px}
.clan-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px;text-decoration:none;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:8px}
.clan-card:hover{border-color:#38bdf8;box-shadow:0 4px 14px rgba(56,189,248,.16);text-decoration:none}
.clan-card-head{display:flex;align-items:center;gap:10px}
.clan-card-name{font-weight:800;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clan-card-mem{background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700}
.clan-card-desc{color:#64748b;font-size:13px;min-height:34px}
.clan-detail-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.clan-detail-meta h1{margin:0;font-size:24px;font-weight:800}
.clan-detail-sub{color:#475569;font-size:14px;margin-top:4px}
.clan-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.clan-info-grid{grid-template-columns:1fr}.clan-podium{grid-template-columns:1fr}}
.clan-members{width:100%;border-collapse:collapse;font-size:14px}
.clan-members th,.clan-members td{padding:9px 12px;border-bottom:1px solid #eef2f7;text-align:left}
.clan-members th{background:#f8fafc;font-weight:700;color:#334155}
.clan-master-tag{background:#fef3c7;color:#b45309;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;margin-left:4px}
.info-line{padding:4px 0;font-size:14.5px}
.btn-sm{padding:5px 10px;font-size:13px}

/* ── Thông tin Mobiles (trang chủ) ── */
.mob-panel{margin-top:22px}
.mob-wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.mob-preview{display:flex;gap:16px;align-items:center;flex:0 0 320px;background:#f1f5f9;border-radius:12px;padding:16px}
.mob-img{width:120px;height:110px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mob-img img{max-width:110px;max-height:100px}
.mob-name{font-weight:800;color:#b45309;font-size:16px;margin-bottom:6px}
.mob-attr{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:12px}
.mob-attr-lb{width:64px;color:#475569}
.mob-bar{display:inline-flex;gap:2px}
.mob-bar i{width:14px;height:11px;border-radius:2px;background:#e2e8f0;display:inline-block}
.mob-bar i.on{background:var(--ac,#64748b)}
.mob-right{flex:1;min-width:280px}
.mob-title{font-size:26px;font-weight:800;color:#0f172a;margin:0 0 12px;letter-spacing:.5px}
.mob-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.mob-ico{background:#fff;border:2px solid #e2e8f0;border-radius:50%;aspect-ratio:1/1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;transition:border-color .12s}
.mob-ico img{max-width:72%;max-height:72%;object-fit:contain}
.mob-ico:hover{border-color:#94a3b8}
.mob-ico.on{border-color:#dc2626;background:#fef2f2}
@media(max-width:560px){.mob-grid{grid-template-columns:repeat(5,1fr)}.mob-preview{flex:1 1 100%}}

/* ── 3 card (Ranking / Top Cash / New Member) ── */
.home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media(max-width:820px){.home-cards{grid-template-columns:1fr}}
.hc{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.hc-head{font-size:22px;font-weight:800;color:#0f172a;border-bottom:2px solid #f1f5f9;padding-bottom:8px;margin-bottom:10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hc-sub{font-size:13px;font-weight:600}
.hc-sub a{color:#94a3b8}
.hc-sub a.on{color:#dc2626}
.hc-rank{list-style:none;margin:0;padding:0}
.hc-rk{display:flex;align-items:center;gap:10px;background:#2b2b33;color:#fff;border-radius:8px;padding:6px 11px;margin-bottom:5px}
.hc-rk .hc-pos{font-size:16px;font-weight:800;width:22px;text-align:center;color:#cbd5e1}
.hc-rk-1{background:linear-gradient(90deg,#3a2f12,#2b2b33)}
.hc-rk-1 .hc-pos{color:#f5c451}
.hc-rk-2 .hc-pos{color:#cbd5e1}
.hc-rk-3 .hc-pos{color:#e6a066}
.hc-list{list-style:none;margin:0;padding:0}
.hc-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 6px;border-bottom:1px solid #f1f5f9;font-size:14px}
.hc-list li:last-child{border-bottom:none}
.hc-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hc-date{color:#94a3b8;font-size:11.5px;white-space:nowrap}
.hc-empty{color:#94a3b8;padding:10px 4px;font-size:14px}

/* ── BXH đầy đủ (như web gốc) ── */
.rank-full td{vertical-align:middle}
.rk-rank{white-space:nowrap}
.rk-gender{width:22px;height:23px;vertical-align:middle;margin-right:4px}
.rk-pos{display:inline-block;font-size:11px;font-weight:700;color:#685AB2;background:#F1EBFA;border-radius:5px;padding:2px 6px;margin-right:4px}
.st-on{display:inline-block;font-size:10px;font-weight:800;color:#fff;background:#16a34a;border-radius:4px;padding:2px 6px;letter-spacing:.3px}
.st-off{display:inline-block;font-size:10px;font-weight:800;color:#fff;background:#dc2626;border-radius:4px;padding:2px 6px;letter-spacing:.3px}
.rk-id b{font-weight:700}
.rk-gp{font-weight:700}
.rk-vip{color:#a638de;font-size:11px;font-weight:700}
.rk-today{color:#1d4ed8;font-weight:700}
.rk-flag{width:20px;height:auto;vertical-align:middle;margin-right:6px;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,.3)}
.rk-nation{white-space:nowrap}

/* ── Nav dropdown (Sự kiện) ── */
.nav-dd{position:relative;display:inline-block}
.nav-dd-toggle{color:#cbd5e1;padding:8px 12px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;display:inline-block}
.nav-dd-toggle:hover,.nav-dd:hover .nav-dd-toggle{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav-dd-toggle.active{background:rgba(56,189,248,.18);color:#fff}
.dd-caret{font-size:10px;opacity:.8}
.nav-dd-menu{position:absolute;top:100%;left:0;min-width:180px;background:#0f172a;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:60}
.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(2px)}
.nav-dd-menu a{display:block;color:#cbd5e1;padding:9px 12px;border-radius:7px;font-weight:600;font-size:14px}
.nav-dd-menu a:hover{background:rgba(56,189,248,.16);color:#fff;text-decoration:none}

/* ── Trang Sự kiện (chung) ── */
.event-page{padding:22px 0}
.ev-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ev-tab{background:#fff;border:1px solid #e2e8f0;color:#334155;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none}
.ev-tab:hover{border-color:#38bdf8;color:#0ea5e9;text-decoration:none}
.ev-tab.active{background:#0f172a;border-color:#0f172a;color:#fff}
.ev-hero{display:flex;align-items:center;gap:18px;color:#fff;border-radius:16px;padding:24px 26px;margin-bottom:20px}
.ev-hero h1{margin:0;font-size:26px;font-weight:800}
.ev-hero p{margin:4px 0 0;opacity:.92;font-size:15px}
.ev-hero-ico{font-size:44px;line-height:1}
.ev-hero-event{background:linear-gradient(120deg,#7c3aed,#2563eb)}
.ev-hero-gift{background:linear-gradient(120deg,#e11d48,#f59e0b)}
.ev-hero-month{background:linear-gradient(120deg,#0891b2,#22c55e)}
.ev-hero-wheel{background:linear-gradient(120deg,#db2777,#8b5cf6)}
.ev-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
@media(max-width:640px){.ev-quick{grid-template-columns:1fr}}
.ev-quick-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center;text-decoration:none;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:2px}
.ev-quick-card:hover{border-color:#38bdf8;box-shadow:0 6px 18px rgba(56,189,248,.16);text-decoration:none}
.ev-quick-card span{font-size:30px}
.ev-quick-card b{font-size:16px}
.ev-quick-card small{color:#64748b}

/* Nav dropdown trên mobile (menu dọc) */
@media(max-width:820px){
  .nav-dd{display:block}
  .nav-dd-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;padding:0 0 0 12px}
  .nav-dd:hover .nav-dd-menu{transform:none}
}

/* ── Sự kiện: section + Event 1 ── */
.ev-section{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ev-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ev-num{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#be1000;color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ev-sec-head h2{margin:0;font-size:20px;font-weight:800}
.ev-sec-head p{margin:3px 0 0;color:#64748b;font-size:13.5px}
.ev-checkin{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#f8fafc;border-radius:10px;padding:12px 16px;margin-bottom:16px}
.ev-marks{font-size:15px}
.ev-marks b{color:#be1000;font-size:20px}
.ev-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ev-card{flex:0 0 auto;width:180px;border:1px solid #e2e8f0;border-radius:12px;padding:12px;text-align:center;display:flex;flex-direction:column;gap:8px;background:#fff}
@media(max-width:400px){.ev-card{width:100%}}
.ev-card-ready{border-color:#22c55e;box-shadow:0 4px 14px rgba(34,197,94,.18)}
.ev-card-title{font-weight:700;font-size:14px;min-height:34px;display:flex;align-items:center;justify-content:center}
.ev-card-img{height:80px;display:flex;align-items:center;justify-content:center}
.ev-card-img img{max-height:80px;max-width:100%}
.ev-card-need{font-weight:800;color:#be1000;background:#fff1f0;border-radius:999px;padding:3px 10px;font-size:13px;align-self:center}

/* Event 2 nhiệm vụ */
.ev-loading{text-align:center;color:#64748b;padding:20px}
.ev-mission-type{font-weight:800;color:#be1000;margin:16px 0 8px;font-size:15px;border-left:3px solid #be1000;padding-left:8px}
.ev-prog{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:4px 0}
.ev-prog-bar{height:100%;background:linear-gradient(90deg,#f59e0b,#22c55e);border-radius:999px}
.ev-prog-txt{font-size:12px;color:#64748b;margin-bottom:6px}

/* Event 1 layout web gốc */
.ev-btn-off{opacity:.55;cursor:not-allowed;background:#e2e8f0;color:#475569;font-weight:700}
.ev-checkin-bottom{text-align:center;margin-top:24px;padding-top:16px;border-top:1px dashed #e2e8f0}
.ev-marks{font-weight:800;font-size:15px;color:#0f172a;margin-bottom:12px;letter-spacing:.5px}
.ev-marks-box{display:inline-block;background:#0f172a;color:#fff;border-radius:5px;padding:2px 12px;font-size:18px;margin:0 4px}
.ev-btn-big{font-size:16px;font-weight:800;padding:12px 40px;background:#be1000;color:#fff;letter-spacing:1px}
.ev-btn-big:hover{background:#9a0d00;color:#fff}
.ev-card .ev-card-title{min-height:auto}

/* Event 2 tabs */
.ev2-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0 18px}
.ev2-tab{background:#be1000;color:#fff;border:none;border-radius:6px;padding:7px 18px;font-weight:700;font-size:14px;cursor:pointer}
.ev2-tab:hover{background:#e39035}
.ev2-tab.active{background:#e39035}
.ev2-pane{display:none}
.ev2-pane.active{display:block}
.ev2-card{border-top:4px solid #be1000;text-align:left}
.ev2-h{font-weight:800;font-size:15px;color:#0f172a;margin-bottom:8px}
.ev2-req{font-weight:700;color:#334155;font-size:13px;margin-bottom:6px}
.ev2-reqv{font-weight:400;color:#94a3b8}
.ev2-prize{font-weight:700;color:#2563eb}
.ev2-card .ev-card-img{height:90px}

/* Trong tab (Event 2/4): mỗi hàng 3 card, canh giữa */
.ev2-pane .ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:720px;margin:0 auto;justify-content:center}
.ev2-pane .ev-card{width:auto}
@media(max-width:640px){.ev2-pane .ev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.ev2-pane .ev-grid{grid-template-columns:1fr}}

/* Event 4: thời gian + top 5 nạp */
.ev-time{text-align:center;color:#475569;font-size:13.5px;background:#f8fafc;border-radius:8px;padding:8px 12px;margin-bottom:12px}
.ev-top5{max-width:520px;margin:0 auto 6px}
.ev-top5-h{font-weight:800;text-align:center;color:#b45309;margin-bottom:8px}
.ev-top5 .data{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}

/* ── Event 5: pane + badge ── */
.ev5-pane{display:none}
.ev5-pane.active{display:block}
.ev-badge-off{display:inline-block;background:#e2e8f0;color:#475569;border-radius:6px;padding:3px 10px;font-size:12.5px;font-weight:600}

/* ── Thẻ tháng ── */
.bm-buy{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:16px 18px;margin-bottom:18px;text-align:center}
.bm-buy p{margin:0 0 12px;color:#475569}
.bm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:900px){.bm-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.bm-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.bm-grid{grid-template-columns:repeat(2,1fr)}}
.bm-card{border:1px solid #e2e8f0;border-top:4px solid #be1000;border-radius:10px;background:#fff;padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:6px}
.bm-day{font-weight:800;font-size:13px;color:#0f172a}
.bm-img{height:64px;display:flex;align-items:center;justify-content:center}
.bm-img img{max-height:64px;max-width:100%}
.bm-name{font-size:12px;font-weight:700;color:#334155;min-height:16px}
.bm-reward{font-size:11.5px;color:#64748b;line-height:1.35}
.bm-card .btn{font-size:12.5px;padding:7px 0}
.bm-claim{border-top-color:#22c55e;box-shadow:0 4px 14px rgba(34,197,94,.18)}
.bm-got{opacity:.7}
.bm-expired{opacity:.55}
.bm-preview{border-top-color:#94a3b8}

/* ── Vòng quay ── */
.vq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:20px;align-items:start}
@media(max-width:820px){.vq-wrap{grid-template-columns:1fr}}
.vq-left{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;text-align:center}
.vq-canvas-box{display:flex;justify-content:center}
.vq-canvas-box canvas{max-width:100%;height:auto}
.vq-controls{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.vq-turn{font-size:14px;color:#334155}
.vq-turn b{color:#be1000;font-size:18px}
.vq-result{margin:12px auto 0;max-width:420px;background:#ecfdf5;border:1px solid #86efac;color:#065f46;border-radius:10px;padding:12px 14px;font-weight:700}
.vq-result img{max-height:48px;vertical-align:middle}
.vq-log{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto}
.vq-log li{padding:7px 0;border-bottom:1px dashed #eef2f7;font-size:13px;color:#334155}
.vq-log li:last-child{border-bottom:none}
.vq-win{color:#16a34a;font-weight:700}
.vq-t{color:#94a3b8;font-size:11.5px;margin-left:4px}
.vq-empty{color:#94a3b8;text-align:center}
.vq-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.vq-modal-box{background:#fff;border-radius:14px;width:100%;max-width:380px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.vq-modal-head{background:#be1000;color:#fff;font-weight:800;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.vq-close{cursor:pointer;font-size:22px;line-height:1}
.vq-modal-body{padding:16px}
.vq-msg{min-height:18px;font-size:13px;margin:6px 0;font-weight:600}
.vq-ok{color:#16a34a}
.vq-err{color:#dc2626}

/* ── Mở Box ── */
.ev-hero-box{background:linear-gradient(120deg,#b45309,#be1000)}
.bx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.bx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.bx-grid{grid-template-columns:1fr}}
.bx-card{background:#fff;border:1px solid #e2e8f0;border-top:4px solid #be1000;border-radius:12px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:8px}
.bx-title{font-weight:800;font-size:16px}
.bx-img{height:120px;display:flex;align-items:center;justify-content:center}
.bx-img img{max-height:120px;max-width:100%}
.bx-cost{font-weight:700;color:#be1000;background:#fff1f0;border-radius:999px;padding:3px 10px;font-size:13px;align-self:center}
.bx-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.bx-open{display:flex;gap:6px}
.bx-open .bx-times{width:70px;text-align:center}
.bx-open .btn{flex:1}
/* Popup mở box: nội dung cuộn nếu nhiều item */
#bxModalBody{max-height:calc(80vh - 120px);overflow-y:auto;padding-right:2px}
.bx-detail-grid,.bx-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:4px}
@media(max-width:560px){.bx-detail-grid,.bx-result-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:400px){.bx-detail-grid,.bx-result-grid{grid-template-columns:repeat(2,1fr)}}
.bx-ditem{border:2px solid #e2e8f0;border-radius:12px;padding:12px 8px;text-align:center;background:#f8fafc;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;transition:transform .12s ease,box-shadow .12s ease}
.bx-ditem:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1)}
.bx-ditem img{height:64px;max-width:100%;object-fit:contain}
.bx-dt{font-size:12.5px;font-weight:700;color:#1e293b;line-height:1.3}
/* Độ hiếm: viền + nền + ánh sáng đồng bộ */
.bx-v0{background:#f8fafc;border-color:#e2e8f0}
.bx-v1{background:linear-gradient(180deg,#fff0f6,#ffe4ef);border-color:#f472b6;box-shadow:0 0 0 3px rgba(244,114,182,.12)}
.bx-v2{background:linear-gradient(180deg,#fff7ed,#ffedd5);border-color:#fb923c;box-shadow:0 0 0 3px rgba(251,146,60,.14)}
.bx-v3{background:linear-gradient(180deg,#fefce8,#fef9c3);border-color:#facc15;box-shadow:0 0 0 3px rgba(250,204,21,.18)}
/* Kết quả mở box: hiệu ứng xuất hiện */
.bx-result-grid .bx-ditem{animation:bxPop .28s ease both}
@keyframes bxPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.vq-modal-head{gap:10px}

/* Popup xác nhận mở box */
.bx-confirm-msg{text-align:center;font-size:15px;color:#1e293b;line-height:1.6;margin-bottom:16px}
.bx-confirm-msg b{color:#be1000}
.bx-confirm-actions{display:flex;gap:10px}
.bx-confirm-actions .btn{flex:1}

/* Lịch sử mở box */
.bx-history{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media(max-width:760px){.bx-history{grid-template-columns:1fr}}
.bx-history .vq-log{max-height:320px}
.vq-win.bxl-v1{color:#db2777}
.vq-win.bxl-v2{color:#ea580c}
.vq-win.bxl-v3{color:#ca8a04;font-weight:800}

/* Kết hôn (couple) */
.cp-pane{display:none}
.cp-pane.active{display:block}
.cp-ring{border-top:4px solid #ec4899}
.cp-ring-owned{opacity:.75;border-top-color:#22c55e}

/* Chợ Mua/Bán GP */
.sg-rules{margin:0 0 14px;padding-left:18px;color:#475569;font-size:13.5px;line-height:1.7}
.sg-rules b{color:#be1000}
.sg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.sg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.sg-grid{grid-template-columns:1fr}}
.sg-card{border:1px solid #e2e8f0;border-top:4px solid #2563eb;border-radius:12px;padding:14px;text-align:center;background:#fff;display:flex;flex-direction:column;gap:6px}
.sg-mine{border-top-color:#f59e0b;background:#fffbeb}
.sg-seller{font-weight:700;font-size:14px}
.sg-gp{font-weight:800;font-size:18px;color:#16a34a}
.sg-cash{font-weight:700;color:#be1000}
.sg-card form{margin-top:auto}

/* Liên hệ nổi (Facebook/Discord/Zalo) */
.float-contact{position:fixed;right:14px;bottom:96px;z-index:900;display:flex;flex-direction:column;gap:10px}
.float-contact a{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.28);transition:transform .15s}
.float-contact a:hover{transform:scale(1.12)}
.float-contact img{width:44px;height:44px;display:block;object-fit:cover}
@media(max-width:600px){.float-contact{right:10px;bottom:82px}.float-contact a,.float-contact img{width:40px;height:40px}}

/* Logo clan cỡ nhỏ (card Top clan trang chủ) — mặc định hiện khiên khi chưa có logo */
.clan-badge.xs{width:24px;height:24px;display:inline-flex;vertical-align:middle;margin-right:6px}