<?php
require_once('hethong/ketnoi.php');
if(!isset($_SESSION['session'])) { header('location: /landing-page'); exit(); }
$session = $_SESSION['session'];
$check_user = $ketnoi->query("SELECT * FROM `users` WHERE `session` = '$session' ")->fetch_array();
if(empty($check_user['id'])) { header('location: /landing-page'); exit(); }
$user = $check_user;

$cols = $ketnoi->query("SHOW COLUMNS FROM `users` LIKE 'last_checkin'");
if($cols->num_rows == 0) $ketnoi->query("ALTER TABLE `users` ADD `last_checkin` DATE NULL");
$cols = $ketnoi->query("SHOW COLUMNS FROM `users` LIKE 'checkin_streak'");
if($cols->num_rows == 0) $ketnoi->query("ALTER TABLE `users` ADD `checkin_streak` INT DEFAULT 0");

$user_id      = $user['id'];
$ci           = $ketnoi->query("SELECT last_checkin,checkin_streak FROM `users` WHERE `id`='$user_id'")->fetch_assoc();
$last_checkin = $ci['last_checkin'] ?? null;
$streak       = (int)($ci['checkin_streak'] ?? 0);
$today        = date('Y-m-d');
$can_checkin  = ($last_checkin != $today);
$reward       = 1000;

$web       = (int)mysqli_fetch_assoc($ketnoi->query("SELECT COUNT(*) c FROM `lich_su_tao_web`    WHERE `username`='".$user['username']."'"))['c'];
$code      = (int)mysqli_fetch_assoc($ketnoi->query("SELECT COUNT(*) c FROM `lich_su_mua_code`   WHERE `username`='".$user['username']."'"))['c'];
$logo      = (int)mysqli_fetch_assoc($ketnoi->query("SELECT COUNT(*) c FROM `ls_logo`            WHERE `username`='".$user['username']."'"))['c'];
$domain    = (int)mysqli_fetch_assoc($ketnoi->query("SELECT COUNT(*) c FROM `history_domain`     WHERE `username`='".$user['username']."'"))['c'];
$subdomain = (int)mysqli_fetch_assoc($ketnoi->query("SELECT COUNT(*) c FROM `history_subdomain`  WHERE `username`='".$user['username']."'"))['c'];
$cron      = (int)mysqli_fetch_assoc($ketnoi->query("SELECT COUNT(*) c FROM `list_cron`          WHERE `username`='".$user['username']."'"))['c'];
$hosting   = (int)mysqli_fetch_assoc($ketnoi->query("SELECT COUNT(*) c FROM `lich_su_mua_host`   WHERE `username`='".$user['username']."'"))['c'];
$tongdv    = $web+$code+$logo+$domain+$subdomain+$cron+$hosting;

$money   = (int)$user['money'];
$nap     = (int)$user['tong_nap'];
$spent   = $nap - $money;
$spentPct = $nap > 0 ? round($spent/$nap*100) : 0;
?>
<!DOCTYPE html>
<html lang="vi">
<head>
<?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
<title>Tổng Quan | <?=$lxtdev['ten_web'];?></title>
<?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>

/* ══════════════════════════════════════════
   DESIGN TOKENS & RESPONSIVE ROOT
══════════════════════════════════════════ */
:root{
  --bg:        #f0f3f8;
  --surface:   #ffffff;
  --s2:        #f8f9fc;
  --s3:        #eef0f7;
  --border:    rgba(0,0,0,.07);
  --border2:   rgba(0,0,0,.04);

  --h:         #0b0d17;
  --b:         #3d4464;
  --m:         #8891b0;

  --v1:        #5452ee;
  --v2:        #8b5cf6;
  --vg:        linear-gradient(135deg,#5452ee,#8b5cf6);

  --g1:        #059669;
  --g2:        #10b981;
  --gg:        linear-gradient(135deg,#059669,#10b981);

  --a1:        #d97706;
  --a2:        #f59e0b;
  --ag:        linear-gradient(135deg,#d97706,#f59e0b);

  --s1:        #0284c7;
  --s2c:       #0ea5e9;
  --sg:        linear-gradient(135deg,#0284c7,#0ea5e9);

  --r1:        #dc2626;
  --r2:        #ef4444;
  --rg:        linear-gradient(135deg,#dc2626,#ef4444);

  --pk:        linear-gradient(135deg,#db2777,#f472b6);

  --rd:        12px;
  --rdm:       18px;
  --rdl:       24px;
  --rdxl:      32px;

  --sh0:       0 1px 3px rgba(0,0,0,.05);
  --sh1:       0 4px 16px rgba(0,0,0,.06);
  --sh2:       0 8px 32px rgba(0,0,0,.08);
  --shv:       0 8px 28px rgba(84,82,238,.18);

  --ease:      cubic-bezier(.16,1,.3,1);
  
  /* Responsive font scaling */
  --fs-hero-title: clamp(1.5rem, 4vw, 2.6rem);
  --fs-stat-val: clamp(1.2rem, 2.5vw, 1.55rem);
  --fs-section-title: clamp(0.8rem, 2vw, 0.8125rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Be Vietnam Pro',sans-serif;
  background:var(--bg);
  color:var(--b);
  -webkit-font-smoothing:antialiased;
}

/* ══ LAYOUT ══ */
.page{
  padding: clamp(12px, 3vw, 24px) clamp(12px, 3vw, 28px);
  max-width:1380px;
  margin:0 auto;
}

/* ══ HERO ══ */
.hero{
  position:relative;overflow:hidden;
  background:#0b0d17;
  border-radius:var(--rdxl);
  padding: clamp(24px, 5vw, 48px) clamp(18px, 4vw, 52px);
  margin-bottom:clamp(16px, 3vw, 24px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(16px, 3vw, 32px);
  align-items:center;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 65% 80% at 100% -20%,rgba(84,82,238,.5) 0%,transparent 55%),
    radial-gradient(ellipse 50% 60% at -5%  110%,rgba(139,92,246,.3) 0%,transparent 55%),
    radial-gradient(ellipse 35% 40% at 50%   50%,rgba(84,82,238,.06) 0%,transparent 70%);
  z-index:0;
}
.hero-grid{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
}
.hero>*{position:relative;z-index:2}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  border-radius:50px;
  padding:6px 16px;
  font-size:0.65rem;font-weight:700;letter-spacing:1.3px;
  color:rgba(255,255,255,.6);text-transform:uppercase;
  margin-bottom:1rem;
  backdrop-filter:blur(8px);
}
.hero-dot{
  width:7px;height:7px;border-radius:50%;
  background:#10b981;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}
  50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
}

.hero-title{
  font-size:var(--fs-hero-title);font-weight:900;line-height:1.18;
  color:#fff;letter-spacing:-.5px;margin-bottom:10px;
}
.hero-title .grad{
  background:linear-gradient(90deg,#a5b4fc,#c084fc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-sub{
  font-size:0.85rem;color:rgba(255,255,255,.45);
  font-weight:400;margin-bottom:1.5rem;line-height:1.6;
  max-width:480px;
}

.hero-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.8rem;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:6px 13px;
  font-size:0.7rem;font-weight:600;color:rgba(255,255,255,.75);
  cursor:default;
  transition:background .2s,border-color .2s,transform .25s var(--ease);
}
.chip:hover{background:rgba(255,255,255,.10);border-color:rgba(84,82,238,.6);transform:translateY(-2px)}
.chip i{font-size:0.75rem}

.hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--vg);
  color:#fff;font-size:0.85rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;
  padding:clamp(10px, 2vw, 14px) clamp(18px, 3vw, 30px);
  border-radius:var(--rd);
  border:none;cursor:pointer;
  box-shadow:0 8px 28px rgba(84,82,238,.42);
  transition:transform .3s var(--ease),box-shadow .3s;
  position:relative;overflow:hidden;
}
.hero-cta::after{
  content:'';position:absolute;
  top:-60%;left:-80%;width:35%;height:220%;
  background:rgba(255,255,255,.18);
  transform:rotate(25deg);
  animation:sheen 3.5s ease-in-out infinite;
}
@keyframes sheen{0%,100%{left:-80%}40%{left:170%}}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(84,82,238,.55);color:#fff}

/* hero side panel */
.hero-panel{
  display:flex;flex-direction:column;gap:12px;
  min-width:clamp(180px, 25vw, 220px);
}
.h-pill{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rdm);
  padding:clamp(10px, 2vw, 16px) clamp(12px, 2.5vw, 18px);
  display:flex;align-items:center;gap:12px;
  backdrop-filter:blur(12px);
  transition:background .2s,transform .25s var(--ease);
}
.h-pill:hover{background:rgba(255,255,255,.09);transform:translateX(-4px)}
.h-pill-icon{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.h-pill-icon i{font-size:1.1rem;color:#fff}
.h-pill-label{font-size:0.6rem;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:.5px;margin-bottom:2px}
.h-pill-val{font-size:1.05rem;font-weight:800;color:#fff;font-family:'JetBrains Mono',monospace}

/* ══ TICKER ══ */
.ticker{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rdm);
  padding:clamp(8px, 2vw, 11px) clamp(12px, 2vw, 20px);
  margin-bottom:clamp(16px, 3vw, 24px);
  display:flex;align-items:center;gap:clamp(8px, 2vw, 14px);
  overflow:hidden;
  box-shadow:var(--sh0);
}
.ticker-tag{
  flex-shrink:0;
  background:var(--vg);
  color:#fff;font-size:0.65rem;font-weight:800;
  letter-spacing:.9px;text-transform:uppercase;
  padding:5px 13px;border-radius:6px;
  white-space:nowrap;
}
.ticker marquee{font-size:0.75rem;font-weight:500;color:var(--b)}

/* ══ SECTION HEADER ══ */
.sec-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:clamp(12px, 2vw, 16px);
}
.sec-title{
  font-size:var(--fs-section-title);font-weight:800;color:var(--h);
  letter-spacing:.3px;display:flex;align-items:center;gap:8px;
}
.sec-title::before{content:'';display:block;width:3px;height:16px;background:var(--vg);border-radius:2px}
.sec-link{
  font-size:0.75rem;font-weight:700;color:var(--v1);
  display:flex;align-items:center;gap:4px;text-decoration:none;transition:gap .2s;
}
.sec-link:hover{gap:8px}

/* ══ STAT CARDS ══ */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px, 2vw, 16px);
  margin-bottom:clamp(16px, 3vw, 24px);
}

.sc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rdl);
  padding:clamp(14px, 3vw, 22px) clamp(14px, 3vw, 20px) clamp(14px, 3vw, 20px);
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s;
  box-shadow:var(--sh0);
  cursor:default;
}
.sc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
}
.sc:hover{transform:translateY(-5px);box-shadow:var(--sh2)}

.sc.green::before{background:var(--gg)}
.sc.amber::before{background:var(--ag)}
.sc.sky::before  {background:var(--sg)}
.sc.violet::before{background:var(--vg)}

.sc-wm{
  position:absolute;bottom:-10px;right:-10px;
  font-size:clamp(40px, 8vw, 70px);opacity:.04;
  line-height:1;
  transition:opacity .3s;
  pointer-events:none;
}
.sc:hover .sc-wm{opacity:.07}

.sc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:clamp(8px, 2vw, 14px)}
.sc-icon{
  width:clamp(38px, 6vw, 46px);height:clamp(38px, 6vw, 46px);border-radius:13px;
  display:flex;align-items:center;justify-content:center;
}
.sc-icon i{font-size:clamp(16px, 3vw, 20px);color:#fff}
.sc.green  .sc-icon{background:var(--gg)}
.sc.amber  .sc-icon{background:var(--ag)}
.sc.sky    .sc-icon{background:var(--sg)}
.sc.violet .sc-icon{background:var(--vg)}

.sc-badge{
  font-size:0.65rem;font-weight:700;padding:3px 9px;border-radius:20px;
}
.sc.green  .sc-badge{background:rgba(5,150,105,.1);color:var(--g1)}
.sc.amber  .sc-badge{background:rgba(217,119,6,.1);color:var(--a1)}
.sc.sky    .sc-badge{background:rgba(2,132,199,.1);color:var(--s1)}
.sc.violet .sc-badge{background:rgba(84,82,238,.1);color:var(--v1)}

.sc-val{
  font-size:var(--fs-stat-val);font-weight:900;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:-.5px;margin-bottom:2px;
  color:var(--h);
}
.sc-label{font-size:0.7rem;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.7px}

.sc-bar{margin-top:clamp(8px, 2vw, 14px)}
.sc-bar-track{height:4px;background:var(--s3);border-radius:4px;overflow:hidden}
.sc-bar-fill{height:100%;border-radius:4px;transition:width 1s var(--ease)}
.sc.green  .sc-bar-fill{background:var(--gg)}
.sc.amber  .sc-bar-fill{background:var(--ag)}
.sc.sky    .sc-bar-fill{background:var(--sg)}
.sc.violet .sc-bar-fill{background:var(--vg)}
.sc-bar-label{display:flex;justify-content:space-between;margin-top:5px;font-size:0.65rem;color:var(--m);font-weight:500}

/* ══ TWO-COL GRID ══ */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px, 2vw, 20px);
  margin-bottom:clamp(16px, 3vw, 24px);
}

/* ══ CHECK-IN ══ */
.ci-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rdl);
  padding:clamp(16px, 3vw, 24px);
  box-shadow:var(--sh0);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:clamp(12px, 2vw, 20px);
}
.ci-card::before{
  content:'';position:absolute;
  top:-80px;right:-80px;
  width:260px;height:260px;
  background:radial-gradient(circle,rgba(84,82,238,.07) 0%,transparent 65%);
  pointer-events:none;
}
.ci-top{display:flex;align-items:center;gap:clamp(10px, 2vw, 16px)}
.ci-ico{
  width:clamp(42px, 8vw, 52px);height:clamp(42px, 8vw, 52px);border-radius:14px;
  background:var(--vg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ci-ico i{font-size:clamp(18px, 3vw, 22px);color:#fff}
.ci-ttl{font-size:0.7rem;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}
.ci-streak-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ci-num{font-size:var(--fs-stat-val);font-weight:900;color:var(--h);font-family:'JetBrains Mono',monospace}
.ci-reward-badge{
  background:rgba(5,150,105,.1);color:var(--g1);
  border-radius:6px;padding:4px 10px;
  font-size:0.7rem;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;
}

/* 7-day streak */
.streak-days{display:flex;gap:clamp(4px, 1vw, 8px);flex-wrap:wrap;justify-content:space-between}
.streak-day{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
}
.streak-day .d-name{font-size:0.6rem;font-weight:700;color:var(--m);text-transform:uppercase}
.streak-day .d-dot{
  width:clamp(26px, 5vw, 32px);height:clamp(26px, 5vw, 32px);border-radius:50%;
  border:2px solid var(--border);
  background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(10px, 2vw, 12px);
  transition:all .2s;
}
.streak-day.done .d-dot{background:var(--vg);border-color:var(--v1);color:#fff;}
.streak-day.today .d-dot{border-color:var(--v1);border-width:2px;box-shadow:0 0 0 3px rgba(84,82,238,.15)}

.ci-btn{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--vg);
  color:#fff;font-size:0.85rem;font-weight:800;
  padding:clamp(12px, 2vw, 14px);border-radius:var(--rd);
  border:none;cursor:pointer;
  box-shadow:0 6px 22px rgba(84,82,238,.3);
  transition:transform .3s var(--ease),box-shadow .3s,opacity .2s;
  letter-spacing:.3px;
}
.ci-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px rgba(84,82,238,.45)}
.ci-btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.ci-btn.done-btn{background:var(--gg);box-shadow:0 6px 22px rgba(5,150,105,.25)}

/* ══ QUICK ACTIONS ══ */
.qa-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rdl);
  padding:clamp(16px, 3vw, 24px);
  box-shadow:var(--sh0);
}
.qa-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(8px, 1.5vw, 10px);
  margin-top:clamp(12px, 2vw, 16px);
}
.qa-item{
  display:flex;align-items:center;gap:clamp(8px, 1.5vw, 12px);
  padding:clamp(10px, 2vw, 13px) clamp(10px, 2vw, 15px);
  border:1px solid var(--border);
  border-radius:var(--rdm);
  background:var(--s2);
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .25s var(--ease),box-shadow .25s;
  text-decoration:none;
}
.qa-item:hover{
  background:var(--surface);
  border-color:var(--v1);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(84,82,238,.12);
}
.qa-icon{
  width:clamp(32px, 6vw, 38px);height:clamp(32px, 6vw, 38px);border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.qa-icon i{font-size:clamp(14px, 2.5vw, 16px);color:#fff}
.qa-text{flex:1;min-width:0}
.qa-name{
  font-size:0.8rem;font-weight:700;color:var(--h);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qa-desc{font-size:0.65rem;color:var(--m);font-weight:500}
.qa-arrow{color:var(--m);font-size:0.7rem;transition:transform .2s}
.qa-item:hover .qa-arrow{transform:translateX(3px);color:var(--v1)}

/* ══ SERVICE BREAKDOWN ══ */
.sb-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rdl);
  padding:clamp(16px, 3vw, 24px);
  box-shadow:var(--sh0);
  margin-bottom:0;
}
.sb-list{display:flex;flex-direction:column;gap:0;margin-top:clamp(12px, 2vw, 16px)}
.sb-row{
  display:flex;align-items:center;gap:clamp(8px, 2vw, 16px);
  padding:clamp(10px, 2vw, 13px) 0;
  border-bottom:1px solid var(--border2);
  transition:background .15s;
}
.sb-row:last-child{border-bottom:none;padding-bottom:0}
.sb-row:first-child{padding-top:0}
.sb-icon2{
  width:clamp(28px, 5vw, 34px);height:clamp(28px, 5vw, 34px);border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-icon2 i{font-size:clamp(12px, 2vw, 14px);color:#fff}
.sb-name{font-size:0.85rem;font-weight:700;color:var(--h);flex:1}
.sb-cnt{
  font-size:0.85rem;font-weight:800;
  font-family:'JetBrains Mono',monospace;
  min-width:32px;text-align:right;
}
.sb-bar-wrap{width:clamp(60px, 15vw, 100px);flex-shrink:0}
.sb-mini-track{height:5px;background:var(--s3);border-radius:5px;overflow:hidden}
.sb-mini-fill{height:100%;border-radius:5px;transition:width 1s var(--ease)}

/* ══ WALLET CARD ══ */
.wallet-card{
  background:var(--h);
  border-radius:var(--rdl);
  padding:clamp(16px, 3vw, 24px);
  color:#fff;
  position:relative;overflow:hidden;
  box-shadow:0 12px 40px rgba(11,13,23,.25);
  margin-bottom:clamp(12px, 2vw, 20px);
}
.wallet-card::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%,rgba(84,82,238,.45) 0%,transparent 55%),
    radial-gradient(ellipse 40% 50% at 0%  100%,rgba(139,92,246,.25) 0%,transparent 60%);
}
.wallet-card>*{position:relative;z-index:1}
.wallet-label{font-size:0.7rem;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.wallet-amount{font-size:clamp(1.6rem, 4vw, 2.2rem);font-weight:900;font-family:'JetBrains Mono',monospace;letter-spacing:-1px;margin-bottom:20px}
.wallet-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.wallet-mini{flex:1;min-width:60px}
.wallet-mini .lbl{font-size:0.6rem;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:.5px;margin-bottom:4px}
.wallet-mini .val{font-size:0.9rem;font-weight:800;color:rgba(255,255,255,.9);font-family:'JetBrains Mono',monospace}
.wallet-divider{width:1px;background:rgba(255,255,255,.1)}
.wallet-topup{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:0.75rem;font-weight:700;
  padding:clamp(8px, 2vw, 10px) clamp(14px, 3vw, 18px);
  border-radius:9px;
  cursor:pointer;
  transition:background .2s;
  margin-top:clamp(16px, 3vw, 20px);
  width:100%;justify-content:center;
  text-decoration:none;
}
.wallet-topup:hover{background:rgba(255,255,255,.18);color:#fff}

/* ══ ACTIVITY FEED ══ */
.act-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rdl);
  padding:clamp(16px, 3vw, 24px);
  box-shadow:var(--sh0);
  margin-bottom:0;
}
.act-list{display:flex;flex-direction:column;gap:0;margin-top:clamp(12px, 2vw, 16px)}
.act-item{
  display:flex;align-items:flex-start;gap:clamp(8px, 2vw, 14px);
  padding:clamp(10px, 2vw, 12px) 0;
  border-bottom:1px solid var(--border2);
}
.act-item:last-child{border-bottom:none;padding-bottom:0}
.act-item:first-child{padding-top:0}
.act-dot{
  width:clamp(28px, 5vw, 32px);height:clamp(28px, 5vw, 32px);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.act-dot i{font-size:0.8rem;color:#fff}
.act-body{flex:1}
.act-txt{font-size:0.8rem;font-weight:600;color:var(--h);line-height:1.45;margin-bottom:2px}
.act-txt span{color:var(--v1)}
.act-time{font-size:0.7rem;color:var(--m);font-weight:500}
.act-status{
  flex-shrink:0;font-size:0.65rem;font-weight:700;
  padding:3px 9px;border-radius:20px;
}
.st-ok{background:rgba(5,150,105,.1);color:var(--g1)}
.st-pend{background:rgba(245,158,11,.1);color:var(--a1)}
.st-fail{background:rgba(220,38,38,.1);color:var(--r1)}

/* ══ MODAL ══ */
.modal-content{border:none!important;border-radius:var(--rdxl)!important;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.16)!important}
.mo-hd{
  background:var(--h);padding:clamp(16px, 3vw, 24px) clamp(18px, 3vw, 28px);
  display:flex;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
}
.mo-hd::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 110% -20%,rgba(84,82,238,.45) 0%,transparent 55%);
}
.mo-hd>*{position:relative;z-index:1}
.mo-hd h5{font-size:0.95rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px}
.mo-hd h5 i{opacity:.8}
.mo-close{
  background:rgba(255,255,255,.09);border:none;
  border-radius:8px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);font-size:0.8rem;cursor:pointer;
  transition:background .2s;
}
.mo-close:hover{background:rgba(255,255,255,.17);color:#fff}
.mo-body{padding:clamp(16px, 3vw, 28px);background:var(--surface)}
.mo-body-fields{display:flex;flex-direction:column;gap:clamp(12px, 2vw, 18px)}

.field-group label{font-size:0.65rem;font-weight:800;color:var(--m);text-transform:uppercase;letter-spacing:.7px;display:block;margin-bottom:7px}
.dc-input,.dc-select{
  width:100%;background:var(--s2);
  border:1.5px solid var(--border);
  border-radius:var(--rd);padding:clamp(10px, 2vw, 12px) clamp(12px, 2vw, 16px);
  font-size:0.85rem;font-weight:500;color:var(--h);
  font-family:'Be Vietnam Pro',sans-serif;
  outline:none;appearance:none;
  transition:border-color .2s,box-shadow .2s;
}
.dc-input:focus,.dc-select:focus{border-color:var(--v1);box-shadow:0 0 0 3px rgba(84,82,238,.1)}
.input-join{display:flex}
.input-join .dc-input{border-radius:var(--rd) 0 0 var(--rd);border-right:none;flex:1}
.input-suffix{
  background:#1a1d2e;color:rgba(255,255,255,.6);
  border:1.5px solid #1a1d2e;
  border-radius:0 var(--rd) var(--rd) 0;
  padding:clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 16px);
  font-size:0.75rem;font-weight:700;
  white-space:nowrap;display:flex;align-items:center;
}

.inv-box{
  background:var(--s2);border:1.5px solid var(--border);
  border-radius:var(--rdm);padding:clamp(14px, 2vw, 18px) clamp(14px, 2vw, 20px);
}
.inv-row2{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:0.8rem}
.inv-row2 .k{color:var(--m);font-weight:500}
.inv-row2 .v{font-weight:700;color:var(--h)}
.inv-row2 .v.green{color:var(--g1)}
.inv-row2 .v.red{color:var(--r1)}
.inv-sep{border:none;border-top:1.5px dashed var(--border);margin:8px 0}
.inv-total{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.inv-total .k{font-size:0.9rem;font-weight:800;color:var(--h)}
.inv-total .v{font-size:clamp(1.2rem, 2.5vw, 1.4rem);font-weight:900;color:var(--v1);font-family:'JetBrains Mono',monospace}

.btn-submit{
  width:100%;background:var(--vg);color:#fff;
  font-size:0.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:clamp(14px, 2vw, 16px);border-radius:var(--rd);border:none;cursor:pointer;
  box-shadow:0 8px 24px rgba(84,82,238,.3);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(84,82,238,.45)}

/* announce modal */
.mo-announce .modal-content{border-radius:20px!important}
.mo-announce .mo-body{padding:clamp(16px, 3vw, 22px) clamp(18px, 3vw, 24px);font-size:0.85rem;line-height:1.75;color:var(--b)}
.mo-footer{
  display:flex;gap:10px;padding:clamp(12px, 2vw, 16px) clamp(18px, 3vw, 24px);
  border-top:1px solid var(--border);
}
.btn-ghost{background:var(--s2);border:1.5px solid var(--border);color:var(--b);padding:clamp(7px,1.5vw,9px) clamp(14px,2.5vw,18px);border-radius:9px;font-size:0.8rem;font-weight:600;cursor:pointer;font-family:'Be Vietnam Pro',sans-serif;transition:background .2s}
.btn-ghost:hover{background:var(--s3)}
.btn-main{background:var(--vg);border:none;color:#fff;padding:clamp(7px,1.5vw,9px) clamp(16px,3vw,20px);border-radius:9px;font-size:0.8rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(84,82,238,.22);font-family:'Be Vietnam Pro',sans-serif;transition:box-shadow .2s}
.btn-main:hover{box-shadow:0 6px 20px rgba(84,82,238,.4)}

/* ══ RESPONSIVE BREAKPOINTS ══ */
@media (max-width: 1200px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .hero{grid-template-columns:1fr 1fr;}
}

@media (max-width: 992px){
  .two-col{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .hero-panel{flex-direction:row;flex-wrap:wrap;gap:10px;}
  .h-pill{flex:1 1 calc(50% - 5px); min-width:140px;}
  .qa-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 768px){
  .page{padding:12px;}
  .hero{padding:24px 18px;}
  .hero-title{font-size:1.6rem;}
  .hero-sub{font-size:0.8rem;}
  .hero-panel{flex-direction:column; gap:8px;}
  .h-pill{flex:auto; min-width:auto;}
  .stat-row{grid-template-columns:1fr 1fr; gap:10px;}
  .sc{padding:16px 12px;}
  .sc-val{font-size:1.3rem;}
  .ci-card, .qa-card, .sb-card, .wallet-card, .act-card{padding:16px;}
  .wallet-amount{font-size:1.8rem;}
  .streak-days{justify-content:center;}
  .streak-day .d-dot{width:28px;height:28px;font-size:10px;}
  .sb-bar-wrap{width:60px;}
}

@media (max-width: 576px){
  .stat-row{grid-template-columns:1fr;}
  .qa-grid{grid-template-columns:1fr;}
  .hero-chips{flex-direction:column; align-items:flex-start;}
  .chip{width:100%;}
  .hero-cta{width:100%; justify-content:center;}
  .ci-btn{font-size:0.8rem; padding:12px;}
  .wallet-row{flex-direction:column; gap:12px;}
  .wallet-mini{display:flex; justify-content:space-between; align-items:center;}
  .wallet-divider{display:none;}
  .sb-row{flex-wrap:wrap;}
  .sb-bar-wrap{width:100%; order:3; margin-top:6px;}
  .sb-cnt{order:2; min-width:auto;}
  .ticker{flex-direction:column; align-items:flex-start;}
  .modal-dialog{max-width:calc(100% - 24px) !important; margin:12px auto;}
}

/* ══ ENTRY ANIMATIONS ══ */
.fade-up{opacity:0;transform:translateY(18px);animation:fadeUp .55s var(--ease) forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}
.d5{animation-delay:.25s}.d6{animation-delay:.30s}.d7{animation-delay:.35s}.d8{animation-delay:.40s}
</style>
</head>
<body id="kt_app_body" data-kt-app-layout="light-sidebar" data-kt-app-header-fixed="true"
  data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true"
  data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true"
  data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">

<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
<div class="app-page flex-column flex-column-fluid" id="kt_app_page">
<div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
<?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/sider.php';?>

<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
<div class="d-flex flex-column flex-column-fluid">
<div class="page">

  <!-- ── HERO ───────────────────────────────────────────── -->
  <div class="hero fade-up d1">
    <div class="hero-bg"></div>
    <div class="hero-grid"></div>

    <div class="hero-content">
      <div class="hero-eyebrow"><span class="hero-dot"></span> KhanhCoder Premium · v3.0 Live</div>
      <h1 class="hero-title">
        Nền Tảng Tạo Web Đại Lý<br>
        <span class="grad">Tự Động & Chuyên Nghiệp</span>
      </h1>
      <p class="hero-sub">Hệ thống khởi tạo, quản lý và vận hành website đại lý dịch vụ kỹ thuật số — nhanh chóng, bảo mật và hoàn toàn tự động.</p>
      <div class="hero-chips">
        <span class="chip"><i class="fa-solid fa-fire-flame-curved" style="color:#fb923c"></i> Source Code Độc Quyền</span>
        <span class="chip"><i class="fa-solid fa-cloud-arrow-up" style="color:#38bdf8"></i> Subdomain Auto</span>
        <span class="chip"><i class="fa-solid fa-shield-halved" style="color:#a78bfa"></i> Bảo Mật Cao</span>
        <span class="chip"><i class="fa-solid fa-bolt" style="color:#fbbf24"></i> Triển Khai Nhanh</span>
      </div>
      <button class="hero-cta" data-bs-toggle="modal" data-bs-target="#calcModal">
        <i class="fa-solid fa-wand-magic-sparkles"></i> Khởi Tạo Website Ngay
      </button>
    </div>

    <div class="hero-panel">
      <div class="h-pill">
        <div class="h-pill-icon" style="background:rgba(16,185,129,.2)"><i class="fa-solid fa-wallet" style="color:#10b981"></i></div>
        <div><div class="h-pill-label">Số Dư Ví</div><div class="h-pill-val"><?=tien($money);?>đ</div></div>
      </div>
      <div class="h-pill">
        <div class="h-pill-icon" style="background:rgba(84,82,238,.2)"><i class="fa-solid fa-layer-group" style="color:#818cf8"></i></div>
        <div><div class="h-pill-label">Dịch Vụ Đang Chạy</div><div class="h-pill-val"><?=$tongdv;?> dịch vụ</div></div>
      </div>
      <div class="h-pill">
        <div class="h-pill-icon" style="background:rgba(245,158,11,.2)"><i class="fa-solid fa-fire" style="color:#f59e0b"></i></div>
        <div><div class="h-pill-label">Chuỗi Điểm Danh</div><div class="h-pill-val"><?=$streak;?> ngày 🔥</div></div>
      </div>
    </div>
  </div>

  <!-- ── TICKER ────────────────────────────────────────── -->
  <div class="ticker fade-up d2">
    <span class="ticker-tag">📢 Thông Báo</span>
    <marquee>🎉 Chào mừng bạn đến với KhanhCoder! &nbsp;·&nbsp; Voucher <strong>KHANHCODER20</strong> giảm 20% cho mọi đơn hàng mới &nbsp;·&nbsp; Hệ thống tạo web đại lý #1 Việt Nam — Liên hệ CSKH qua Fanpage để được hỗ trợ nhanh nhất!</marquee>
  </div>

  <!-- ── STAT CARDS ─────────────────────────────────────── -->
  <div class="stat-row fade-up d3">
    <div class="sc green">
      <div class="sc-wm"><i class="fa-solid fa-arrow-trend-up"></i></div>
      <div class="sc-top">
        <div class="sc-icon"><i class="fa-solid fa-arrow-trend-up"></i></div>
        <span class="sc-badge">+<?=$nap>0?round($nap/10000).'k':'0'?></span>
      </div>
      <div class="sc-val"><?=tien($nap);?>đ</div>
      <div class="sc-label">Tổng Tiền Đã Nạp</div>
      <div class="sc-bar">
        <div class="sc-bar-track"><div class="sc-bar-fill" style="width:100%"></div></div>
        <div class="sc-bar-label"><span>Lịch sử nạp</span><span>100%</span></div>
      </div>
    </div>
    <div class="sc amber">
      <div class="sc-wm"><i class="fa-solid fa-bag-shopping"></i></div>
      <div class="sc-top">
        <div class="sc-icon"><i class="fa-solid fa-bag-shopping"></i></div>
        <span class="sc-badge"><?=$spentPct;?>% đã dùng</span>
      </div>
      <div class="sc-val"><?=tien($spent);?>đ</div>
      <div class="sc-label">Tổng Chi Tiêu</div>
      <div class="sc-bar">
        <div class="sc-bar-track"><div class="sc-bar-fill" style="width:<?=$spentPct;?>%"></div></div>
        <div class="sc-bar-label"><span>Chi tiêu / Nạp</span><span><?=$spentPct;?>%</span></div>
      </div>
    </div>
    <div class="sc sky">
      <div class="sc-wm"><i class="fa-solid fa-server"></i></div>
      <div class="sc-top">
        <div class="sc-icon"><i class="fa-solid fa-server"></i></div>
        <span class="sc-badge">Hoạt động</span>
      </div>
      <div class="sc-val"><?=$tongdv;?></div>
      <div class="sc-label">Dịch Vụ Đang Chạy</div>
      <div class="sc-bar">
        <div class="sc-bar-track"><div class="sc-bar-fill" style="width:<?=min(100,$tongdv*10);?>%"></div></div>
        <div class="sc-bar-label"><span>Website + Code + Domain…</span><span><?=$tongdv;?> DV</span></div>
      </div>
    </div>
    <div class="sc violet">
      <div class="sc-wm"><i class="fa-solid fa-wallet"></i></div>
      <div class="sc-top">
        <div class="sc-icon"><i class="fa-solid fa-wallet"></i></div>
        <span class="sc-badge" id="balBadge"><?=$nap>0?round((1-$spentPct/100)*100).'% còn lại':'Khả dụng'?></span>
      </div>
      <div class="sc-val" id="balanceVal"><?=tien($money);?>đ</div>
      <div class="sc-label">Số Dư Khả Dụng</div>
      <div class="sc-bar">
        <div class="sc-bar-track"><div class="sc-bar-fill" style="width:<?=max(0,100-$spentPct);?>%"></div></div>
        <div class="sc-bar-label"><span>Còn lại trong ví</span><span><?=max(0,100-$spentPct);?>%</span></div>
      </div>
    </div>
  </div>

  <!-- ── TWO-COL: CHECK-IN + QUICK ACTIONS ────────────── -->
  <div class="two-col fade-up d4">

    <!-- CHECK-IN -->
    <div class="ci-card">
      <div class="ci-top">
        <div class="ci-ico"><i class="fa-regular fa-calendar-check"></i></div>
        <div>
          <div class="ci-ttl">Điểm Danh Hàng Ngày</div>
          <div class="ci-streak-row">
            <span>🔥</span>
            <span class="ci-num" id="ciNum"><?=$streak;?></span>
            <span style="font-size:0.8rem;font-weight:600;color:var(--b)">ngày liên tiếp</span>
            <span class="ci-reward-badge"><i class="fa-solid fa-coins"></i> +<?=tien($reward);?>đ</span>
          </div>
        </div>
      </div>

      <div>
        <div style="font-size:0.7rem;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px">Tuần này</div>
        <div class="streak-days">
          <?php
          $days   = ['T2','T3','T4','T5','T6','T7','CN'];
          $dow    = (int)date('N');
          for($i=0;$i<7;$i++){
            $dayOffset = $i+1;
            $done = ($streak >= ($dow - $dayOffset + 1)) && ($dayOffset <= $dow);
            $isToday = ($dayOffset == $dow);
            $cls = $done ? 'done' : ($isToday ? 'today' : '');
            echo "<div class='streak-day $cls'>";
            echo "<div class='d-name'>{$days[$i]}</div>";
            echo "<div class='d-dot'>".($done ? '✓' : ($isToday ? '●' : ''))."</div>";
            echo "</div>";
          }
          ?>
        </div>
      </div>

      <button class="ci-btn <?=$can_checkin?'':'done-btn'?>" id="ciBtn" <?=$can_checkin?'':'disabled'?>>
        <?php if($can_checkin):?>
          <i class="fa-regular fa-hand-peace"></i> Điểm Danh & Nhận <?=tien($reward);?>đ
        <?php else:?>
          <i class="fa-solid fa-circle-check"></i> Đã Điểm Danh Hôm Nay
        <?php endif;?>
      </button>
    </div>

    <!-- QUICK ACTIONS -->
    <div class="qa-card">
      <div class="sec-hd" style="margin-bottom:0">
        <span class="sec-title">Truy Cập Nhanh</span>
      </div>
      <div class="qa-grid">
        <a href="/tao-web" class="qa-item">
          <div class="qa-icon" style="background:var(--vg)"><i class="fa-solid fa-globe"></i></div>
          <div class="qa-text"><div class="qa-name">Tạo Website</div><div class="qa-desc">Khởi tạo ngay</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
        <a href="/nap-tien" class="qa-item">
          <div class="qa-icon" style="background:var(--gg)"><i class="fa-solid fa-plus"></i></div>
          <div class="qa-text"><div class="qa-name">Nạp Tiền</div><div class="qa-desc">Cộng số dư ví</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
        <a href="/mua-code" class="qa-item">
          <div class="qa-icon" style="background:var(--sg)"><i class="fa-solid fa-code"></i></div>
          <div class="qa-text"><div class="qa-name">Mua Source Code</div><div class="qa-desc">Giao ngay tức thì</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
        <a href="/ten-mien" class="qa-item">
          <div class="qa-icon" style="background:var(--ag)"><i class="fa-solid fa-at"></i></div>
          <div class="qa-text"><div class="qa-name">Đăng Ký Domain</div><div class="qa-desc">Tên miền quốc tế</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
        <a href="/hosting" class="qa-item">
          <div class="qa-icon" style="background:linear-gradient(135deg,#db2777,#f472b6)"><i class="fa-solid fa-server"></i></div>
          <div class="qa-text"><div class="qa-name">Mua Hosting</div><div class="qa-desc">SSD tốc độ cao</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
        <a href="/subdomain" class="qa-item">
          <div class="qa-icon" style="background:linear-gradient(135deg,#0891b2,#22d3ee)"><i class="fa-solid fa-link"></i></div>
          <div class="qa-text"><div class="qa-name">Tạo Subdomain</div><div class="qa-desc">Miễn phí cho thành viên</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
        <a href="/thiet-ke-logo" class="qa-item">
          <div class="qa-icon" style="background:linear-gradient(135deg,#7c3aed,#c026d3)"><i class="fa-solid fa-palette"></i></div>
          <div class="qa-text"><div class="qa-name">Thiết Kế Logo</div><div class="qa-desc">Chuyên nghiệp</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
        <a href="/cron-job" class="qa-item">
          <div class="qa-icon" style="background:linear-gradient(135deg,#059669,#34d399)"><i class="fa-solid fa-clock-rotate-left"></i></div>
          <div class="qa-text"><div class="qa-name">Cron Job</div><div class="qa-desc">Tác vụ tự động</div></div>
          <i class="fa-solid fa-chevron-right qa-arrow"></i>
        </a>
      </div>
    </div>
  </div>

  <!-- ── TWO-COL: SERVICE BREAKDOWN + WALLET ─────────── -->
  <div class="two-col fade-up d5">

    <!-- SERVICE BREAKDOWN -->
    <div class="sb-card">
      <div class="sec-hd">
        <span class="sec-title">Dịch Vụ Đang Sử Dụng</span>
        <a href="/quan-ly" class="sec-link">Xem tất cả <i class="fa-solid fa-arrow-right" style="font-size:10px"></i></a>
      </div>
      <div class="sb-list">
        <?php
        $svcs=[
          ['Tên miền',$domain,'fa-at','var(--ag)',0],
          ['Website Rent',$web,'fa-globe','var(--vg)',0],
          ['Source Code',$code,'fa-code','var(--sg)',0],
          ['Hosting',$hosting,'fa-server','linear-gradient(135deg,#db2777,#f472b6)',0],
          ['Subdomain',$subdomain,'fa-link','linear-gradient(135deg,#0891b2,#22d3ee)',0],
          ['Cron Job',$cron,'fa-clock-rotate-left','var(--gg)',0],
          ['Logo / Design',$logo,'fa-palette','linear-gradient(135deg,#7c3aed,#c026d3)',0],
        ];
        $max=max(array_column($svcs,1))+1;
        foreach($svcs as $s){
          $pct=$max>0?round($s[1]/$max*100):0;
          echo "<div class='sb-row'>";
          echo "<div class='sb-icon2' style='background:{$s[3]}'><i class='fa-solid {$s[2]}'></i></div>";
          echo "<span class='sb-name'>{$s[0]}</span>";
          echo "<div class='sb-bar-wrap'><div class='sb-mini-track'><div class='sb-mini-fill' style='width:{$pct}%;background:{$s[3]}'></div></div></div>";
          echo "<span class='sb-cnt' style='color:var(--h)'>{$s[1]}</span>";
          echo "</div>";
        }
        ?>
      </div>
    </div>

    <!-- WALLET + ACTIVITY -->
    <div style="display:flex;flex-direction:column;gap:clamp(12px,2vw,20px)">
      <div class="wallet-card">
        <div class="wallet-label">💳 Ví Điện Tử KhanhCoder</div>
        <div class="wallet-amount" id="wAmount"><?=tien($money);?>đ</div>
        <div class="wallet-row">
          <div class="wallet-mini">
            <div class="lbl">TỔNG NẠP</div>
            <div class="val"><?=tien($nap);?>đ</div>
          </div>
          <div class="wallet-divider"></div>
          <div class="wallet-mini">
            <div class="lbl">ĐÃ CHI</div>
            <div class="val"><?=tien($spent);?>đ</div>
          </div>
          <div class="wallet-divider"></div>
          <div class="wallet-mini">
            <div class="lbl">CÒN LẠI</div>
            <div class="val" style="color:#10b981"><?=$nap>0?max(0,100-$spentPct).'%':'—'?></div>
          </div>
        </div>
        <a href="/nap-tien" class="wallet-topup">
          <i class="fa-solid fa-plus-circle"></i> Nạp Tiền Ngay
        </a>
      </div>

      <!-- ACTIVITY FEED -->
      <div class="act-card">
        <div class="sec-hd">
          <span class="sec-title">Hoạt Động Gần Đây</span>
        </div>
        <div class="act-list">
          <div class="act-item">
            <div class="act-dot" style="background:var(--gg)"><i class="fa-solid fa-circle-check"></i></div>
            <div class="act-body">
              <div class="act-txt">Điểm danh <span>+<?=tien($reward);?>đ</span> vào ví</div>
              <div class="act-time"><?=$last_checkin ?? 'Chưa điểm danh lần nào'?></div>
            </div>
            <span class="act-status <?=$last_checkin?'st-ok':'st-pend'?>"><?=$last_checkin?'Thành công':'Chờ'?></span>
          </div>
          <div class="act-item">
            <div class="act-dot" style="background:var(--vg)"><i class="fa-solid fa-globe"></i></div>
            <div class="act-body">
              <div class="act-txt">Hệ thống tạo <span><?=$web;?> website</span> đang hoạt động</div>
              <div class="act-time">Cập nhật thời gian thực</div>
            </div>
            <span class="act-status st-ok">Live</span>
          </div>
          <div class="act-item">
            <div class="act-dot" style="background:var(--sg)"><i class="fa-solid fa-code"></i></div>
            <div class="act-body">
              <div class="act-txt">Đã mua <span><?=$code;?> source code</span></div>
              <div class="act-time">Giao hàng tức thì</div>
            </div>
            <span class="act-status st-ok">Hoàn tất</span>
          </div>
          <div class="act-item">
            <div class="act-dot" style="background:var(--ag)"><i class="fa-solid fa-at"></i></div>
            <div class="act-body">
              <div class="act-txt">Quản lý <span><?=$domain;?> tên miền</span> &amp; <?=$subdomain;?> subdomain</div>
              <div class="act-time">Đang hoạt động</div>
            </div>
            <span class="act-status st-ok">Đang chạy</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</div><!-- /.page -->
</div>
</div>
<?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>
</div><!-- /app-main -->
</div></div></div>

<!-- ══ MODAL TẠO WEB ════════════════════════════════════════ -->
<div class="modal fade" id="calcModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:530px">
    <div class="modal-content">
      <div class="mo-hd">
        <h5><i class="fa-solid fa-wand-magic-sparkles"></i> Cấu Hình Khởi Tạo Website</h5>
        <button class="mo-close" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
      </div>
      <div class="mo-body">
        <div class="mo-body-fields">
          <div class="field-group">
            <label>1 · Chọn Giao Diện Template</label>
            <select class="dc-select" id="wTemplate">
              <option value="50000">Mẫu 01 — Shop Acc Game Đa Năng · 50.000đ/tháng</option>
              <option value="120000">Mẫu 02 — Đại Lý Dịch Vụ Mạng Xã Hội · 120.000đ/tháng</option>
              <option value="250000">Mẫu 03 — Hệ Thống Tạo Web Con Tự Động · 250.000đ/tháng</option>
            </select>
          </div>
          <div class="field-group">
            <label>2 · Tên Subdomain Miễn Phí</label>
            <div class="input-join">
              <input type="text" class="dc-input" id="wSub" placeholder="ten-website-cua-ban">
              <span class="input-suffix">.khanhcoder.site</span>
            </div>
          </div>
          <div class="field-group">
            <label>3 · Thời Gian Duy Trì</label>
            <select class="dc-select" id="wMonths">
              <option value="1"  data-d="0">01 Tháng — Giá gốc</option>
              <option value="3"  data-d="0.1">03 Tháng — Giảm 10%</option>
              <option value="12" data-d="0.25">12 Tháng — Giảm 25%</option>
            </select>
          </div>
          <div class="field-group">
            <label>4 · Mã Voucher Khuyến Mãi</label>
            <input type="text" class="dc-input" id="wPromo" placeholder="Thử: KHANHCODER20">
          </div>
          <div class="inv-box">
            <div class="inv-row2"><span class="k">Chi phí gốc</span><span class="v" id="iBase">—</span></div>
            <div class="inv-row2"><span class="k">Giảm theo thời hạn</span><span class="v green" id="iDisc">−0đ</span></div>
            <div class="inv-row2 d-none" id="iPromoRow"><span class="k" style="color:var(--r1)">Voucher KHANHCODER20 (−20%)</span><span class="v red" id="iPromo">−0đ</span></div>
            <hr class="inv-sep">
            <div class="inv-total"><span class="k">Tổng thanh toán</span><span class="v" id="iTotal">0đ</span></div>
          </div>
          <button class="btn-submit" id="btnOrder">
            <i class="fa-solid fa-rocket" style="margin-right:8px"></i> XÁC NHẬN KHỞI TẠO NGAY
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ══ MODAL THÔNG BÁO ══════════════════════════════════════ -->
<div class="modal fade mo-announce" id="thong_bao" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:470px">
    <div class="modal-content">
      <div class="mo-hd" style="padding:20px 24px">
        <h5><i class="fa-solid fa-bullhorn" style="color:#a5b4fc"></i> Thông Báo Hệ Thống</h5>
        <button class="mo-close" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i></button>
      </div>
      <div class="mo-body"><?=$lxtdev['thongbao'];?></div>
      <div class="mo-footer">
        <button class="btn-ghost" data-bs-dismiss="modal">Bỏ qua</button>
        <button class="btn-main"  data-bs-dismiss="modal">Đã Hiểu &nbsp;<i class="fa-solid fa-check"></i></button>
      </div>
    </div>
  </div>
</div>

<?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/thongbao.php';?>

<script>
$(function(){
  setTimeout(()=>$('#thong_bao').modal('show'),350);

  const f=n=>n.toLocaleString('vi-VN')+'đ';

  function calc(){
    const p=+$('#wTemplate').val();
    const m=+$('#wMonths').val();
    const d=+$('#wMonths').find(':selected').data('d');
    const base=p*m, disc=base*d;
    const code=$('#wPromo').val().trim().toUpperCase();
    let promo=0;
    if(code==='KHANHCODER20'){promo=(base-disc)*.2;$('#iPromoRow').removeClass('d-none');$('#iPromo').text('−'+f(promo));}
    else $('#iPromoRow').addClass('d-none');
    const total=base-disc-promo;
    $('#iBase').text(f(base));
    $('#iDisc').text('−'+f(disc));
    $('#iTotal').text(f(total));
  }
  $('#wTemplate,#wMonths').on('change',calc);
  $('#wPromo').on('input',calc);
  calc();

  $('#btnOrder').on('click',function(){
    const sub=$('#wSub').val().trim();
    if(!sub){
      Swal.fire({icon:'warning',title:'Thiếu thông tin',text:'Nhập tên subdomain trước khi tiếp tục.',confirmButtonColor:'#5452ee',confirmButtonText:'OK'});
      return;
    }
    Swal.fire({
      title:'Xác nhận tạo website?',
      html:`Website <b>${sub}.khanhcoder.site</b> sẽ được khởi tạo tự động. Số dư ví sẽ bị trừ theo hoá đơn đã chọn.`,
      icon:'question',showCancelButton:true,
      confirmButtonText:'Đồng ý khởi tạo',cancelButtonText:'Huỷ',confirmButtonColor:'#5452ee'
    }).then(r=>{
      if(r.isConfirmed){
        Swal.fire({icon:'success',title:'Đang khởi tạo…',text:'Hệ thống đang xử lý yêu cầu của bạn!',timer:2500,showConfirmButton:false});
        $('#calcModal').modal('hide');
      }
    });
  });

  $('#ciBtn').on('click',function(){
    if($(this).prop('disabled')) return;
    Swal.fire({
      title:'Xác nhận điểm danh?',
      html:`Nhận ngay <b>+<?=tien($reward);?></b> vào ví và duy trì chuỗi ngày liên tiếp! 🔥`,
      icon:'question',showCancelButton:true,
      confirmButtonText:'Điểm Danh Ngay',cancelButtonText:'Huỷ',confirmButtonColor:'#5452ee'
    }).then(r=>{
      if(!r.isConfirmed) return;
      const btn=$(this);
      btn.html('<i class="fa-solid fa-spinner fa-spin"></i> Đang xử lý…').prop('disabled',true);
      $.ajax({
        url:'hethong/checkin.php',type:'POST',
        data:{action:'checkin'},dataType:'json',
        success(res){
          if(res.status==='success'){
            Swal.fire({
              icon:'success',title:'🎉 Điểm danh thành công!',
              html:`Nhận <b>+${f(res.reward)}</b> vào ví.<br>Chuỗi liên tiếp: <b>${res.streak}</b> ngày 🔥`,
              timer:3000,showConfirmButton:false
            });
            $('#ciNum').text(res.streak);
            btn.html('<i class="fa-solid fa-circle-check"></i> Đã Điểm Danh Hôm Nay').addClass('done-btn');
            if(res.new_balance){
              const nb=res.new_balance;
              $('#balanceVal,#wAmount').text(f(nb));
            }
          } else {
            Swal.fire({icon:'error',text:res.message||'Có lỗi xảy ra!',confirmButtonColor:'#5452ee'});
            btn.html('<i class="fa-regular fa-hand-peace"></i> Điểm Danh & Nhận <?=tien($reward);?>đ').prop('disabled',false);
          }
        },
        error(){
          Swal.fire({icon:'error',text:'Không thể kết nối máy chủ!',confirmButtonColor:'#5452ee'});
          btn.html('<i class="fa-regular fa-hand-peace"></i> Điểm Danh & Nhận <?=tien($reward);?>đ').prop('disabled',false);
        }
      });
    });
  });

  setTimeout(()=>{
    document.querySelectorAll('.sc-bar-fill,.sb-mini-fill').forEach(el=>{
      const w=el.style.width;el.style.width='0';
      setTimeout(()=>el.style.width=w,80);
    });
  },200);
});
</script>
</body>
</html>