:root{
  --tim-dam:#5b21b6;
  --tim:#7c3aed;
  --tim-nhat:#ede9fe;
  --trang:#ffffff;
  --xam-chu:#1f2937;
  --xam-vien:#e5e7eb;
  --do:#dc2626;
  --xanh:#16a34a;
  --nen:#f6f5fb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--xam-chu);
  background:var(--nen);
  line-height:1.5;
}
a{color:var(--tim);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Trang đăng nhập ===== */
.trang-giua{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--tim-nhat),var(--nen));
}
.the-dang-nhap{
  background:var(--trang);border:1px solid var(--xam-vien);border-radius:14px;
  padding:32px;width:360px;max-width:92vw;box-shadow:0 8px 30px rgba(91,33,182,.12);
}
.tieu-de{margin:0 0 4px;color:var(--tim-dam);font-size:22px}
.phu-de{margin:0 0 18px;color:#6b7280;font-size:14px}
form label{display:block;font-size:13px;margin:12px 0 6px;color:#374151}
form input,form select{
  width:100%;padding:11px 12px;border:1px solid var(--xam-vien);border-radius:9px;
  font-size:15px;outline:none;background:#fff;
}
form input:focus,form select:focus{border-color:var(--tim);box-shadow:0 0 0 3px var(--tim-nhat)}
.nut-chinh{
  width:100%;margin-top:18px;padding:12px;background:var(--tim-dam);color:#fff;border:0;
  border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;
}
.nut-chinh:hover{background:var(--tim)}
.loi{color:var(--do);font-size:13px;margin-top:10px;min-height:18px}
.ok{color:var(--xanh);font-size:13px;margin-top:10px;min-height:18px}

/* ===== Bố cục ứng dụng ===== */
.thanh-tren{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--tim-dam);color:#fff;padding:14px 22px;
}
.thanh-tren .logo{font-weight:700;font-size:17px}
.dieu-huong a{color:#e9d5ff;margin-left:18px;font-size:15px}
.dieu-huong a.dang-chon,.dieu-huong a:hover{color:#fff;text-decoration:none}
.noi-dung{max-width:1000px;margin:26px auto;padding:0 18px}
.noi-dung h1{color:var(--tim-dam);font-size:22px;margin:0 0 18px}

.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.khoi{background:var(--trang);border:1px solid var(--xam-vien);border-radius:12px;padding:18px}
.khoi .nhan{font-size:13px;color:#6b7280}
.khoi .gia-tri{font-size:20px;font-weight:700;color:var(--tim-dam);margin-top:6px}
.ghi-chu{color:#6b7280;font-size:14px;margin-top:22px}

.bang{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--xam-vien);
  border-radius:12px;overflow:hidden;margin-top:8px}
.bang th,.bang td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--xam-vien);font-size:14px}
.bang th{background:var(--tim-nhat);color:var(--tim-dam);font-weight:600}
.bang tr:last-child td{border-bottom:0}

.nut{padding:8px 14px;border-radius:8px;border:1px solid var(--tim);background:#fff;
  color:var(--tim);cursor:pointer;font-size:14px}
.nut:hover{background:var(--tim-nhat)}
.nut-dac{background:var(--tim-dam);color:#fff;border-color:var(--tim-dam)}
.nut-dac:hover{background:var(--tim);color:#fff}

/* Header trái: hamburger + logo */
.thanh-tren .trai{display:flex;align-items:center;gap:12px}
.nut-icon{display:inline-flex;align-items:center;justify-content:center;background:transparent;
  border:0;color:#fff;cursor:pointer;padding:4px;border-radius:8px}
.nut-icon:hover{background:rgba(255,255,255,.15)}
/* Hamburger luôn hiện (PC + mobile), bấm mới mở drawer */
#nut-menu{display:inline-flex}
.nut-icon-tim{color:var(--tim);border:1px solid var(--xam-vien);background:#fff;vertical-align:middle}
.nut-icon-tim:hover{background:var(--tim-nhat)}

/* Drawer menu (ẩn mặc định mọi màn hình, bấm hamburger mới trượt ra) */
.dieu-huong{position:fixed;top:0;left:0;height:100%;width:250px;max-width:82vw;
  background:var(--tim-dam);transform:translateX(-100%);transition:transform .25s ease;
  z-index:200;display:flex;flex-direction:column;padding-top:6px;box-shadow:2px 0 18px rgba(0,0,0,.25)}
.dieu-huong.mo{transform:translateX(0)}
.dieu-huong .tieude-menu{color:#fff;font-weight:700;font-size:16px;padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.15)}
.dieu-huong a{color:#e9d5ff;margin:0;padding:13px 20px;font-size:15px;display:block;border-bottom:1px solid rgba(255,255,255,.06)}
.dieu-huong a:hover,.dieu-huong a.dang-chon{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.dieu-huong a.muc-admin{color:#fde68a}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150;display:none}
.overlay.mo{display:block}

/* Nút copy */
.nut-copy{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;
  border:1px solid var(--tim);background:#fff;color:var(--tim);cursor:pointer;font-size:13px}
.nut-copy:hover{background:var(--tim-nhat)}
.ket-noi-copy{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Modal quản lý */
.modal-nen{position:fixed;inset:0;background:rgba(31,41,55,.5);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:16px}
.modal-hop{background:#fff;border-radius:14px;padding:26px;width:480px;max-width:94vw;
  max-height:88vh;overflow:auto;box-shadow:0 16px 50px rgba(91,33,182,.25)}
.modal-hop h2{color:var(--tim-dam);margin:0 0 8px;font-size:20px}
.modal-hop h3{color:var(--tim-dam);font-size:15px;margin:14px 0 6px}
.hang{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hang input{flex:1;padding:10px 12px;border:1px solid var(--xam-vien);border-radius:9px;font-size:15px}
.hang input:focus{border-color:var(--tim);box-shadow:0 0 0 3px var(--tim-nhat);outline:none}

/* ============ NÂNG CẤP GIAO DIỆN (đẹp, hiện đại) ============ */
.noi-dung section{animation:fadeIn .28s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.khoi{transition:transform .2s, box-shadow .2s}
.khoi:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(91,33,182,.12)}
.gia-tri{font-size:24px!important}
.nut-chinh{background:linear-gradient(135deg,#7c3aed,#5b21b6)!important}
.nut-chinh:hover{filter:brightness(1.08)}
.bang tr:hover td{background:var(--tim-nhat)}
form input:focus,form select:focus{box-shadow:0 0 0 4px var(--tim-nhat)}

/* Hero giới thiệu */
.hero{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;border-radius:18px;
  padding:34px 28px;margin-bottom:22px;box-shadow:0 16px 42px rgba(91,33,182,.28)}
.hero h2{margin:0 0 8px;font-size:26px;line-height:1.25}
.hero p{margin:0 0 18px;opacity:.92;font-size:15px;max-width:680px}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap}
.stat-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600}

/* Lưới tính năng */
.tinh-nang{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:6px 0 28px}
.tn-o{background:#fff;border:1px solid var(--xam-vien);border-radius:14px;padding:20px;transition:.2s}
.tn-o:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(91,33,182,.1);border-color:var(--tim-nhat)}
.tn-icon{width:44px;height:44px;border-radius:11px;background:var(--tim-nhat);color:var(--tim-dam);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.tn-o h4{margin:0 0 6px;color:var(--tim-dam);font-size:16px}
.tn-o p{margin:0;color:#6b7280;font-size:13px;line-height:1.55}

/* Thẻ giá (pricing cards) */
.bang-gia{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:6px}
.the-gia{background:#fff;border:1px solid var(--xam-vien);border-radius:18px;padding:28px 22px;
  text-align:center;position:relative;transition:.22s;display:flex;flex-direction:column}
.the-gia:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(91,33,182,.16)}
.the-gia.noi-bat{border:2px solid var(--tim);box-shadow:0 20px 46px rgba(124,58,237,.2)}
.the-gia .ten-goi{font-size:14px;color:#6b7280;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.the-gia .gia{font-size:32px;font-weight:800;color:var(--tim-dam);margin:10px 0 2px}
.the-gia .gia small{font-size:14px;color:#9ca3af;font-weight:500}
.gia-gach{color:#9ca3af;font-size:20px;font-weight:600;text-decoration:line-through}
.mien-phi{display:inline-block;background:#dcfce7;color:#15803d;font-size:14px;font-weight:700;
  padding:2px 10px;border-radius:999px;margin-left:6px;vertical-align:middle}

/* Bảng tự cuộn ngang trong khung (không kéo cả trang) */
#bang-server,#bang-donhang-ls,#bang-lichsu,#bang-users,#bang-servers,#bang-tx{overflow-x:auto}

/* Danh sách server dạng thẻ (thay bảng - gọn, responsive) */
.ds-server{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.the-server{background:#fff;border:1px solid var(--xam-vien);border-radius:14px;padding:16px 18px;transition:.2s}
.the-server:hover{box-shadow:0 10px 28px rgba(91,33,182,.1);transform:translateY(-2px)}
.ts-dau{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ts-ketnoi{font-weight:700;color:var(--tim-dam);font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:break-all}
.ts-han{background:var(--tim-nhat);color:var(--tim-dam);padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.ts-han.het{background:#fee2e2;color:#dc2626}
.ts-ip{color:#6b7280;font-size:14px;margin:9px 0 14px;word-break:break-all}
.ts-nut{display:flex;gap:8px;flex-wrap:wrap}
.ts-nut .nut,.ts-nut .nut-dac{flex:1;min-width:78px;text-align:center}

/* Bảng dstat (PPS + băng thông live) */
.dstat{font-family:ui-monospace,Menlo,Consolas,monospace;overflow-x:auto}
.dstat-head{color:var(--tim-dam);font-weight:600;margin-bottom:8px;font-family:system-ui,sans-serif}
.dstat-bang{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid var(--xam-vien);border-radius:10px;overflow:hidden}
.dstat-bang th{background:var(--tim-dam);color:#fff;padding:9px 12px;text-align:right;font-weight:600}
.dstat-bang th:first-child{text-align:left}
.dstat-bang td{padding:6px 12px;text-align:right;border-bottom:1px solid #f0eef8;font-variant-numeric:tabular-nums}
.dstat-bang td:first-child{text-align:left;color:#6b7280}
.dstat-bang tr:nth-child(2) td{font-weight:700;color:var(--tim-dam);background:var(--tim-nhat)}

/* Biểu đồ thanh (live, kiểu dstat) */
.bieu-do{width:100%;height:230px;display:block;background:#141a35;border:1px solid #141a35;border-radius:10px}
.bd-chu{font-size:12.5px;color:#6b7280;margin-bottom:7px}
.bd-recv{color:#7c3aed;font-size:15px}
.bd-send{color:#c4b5fd;font-size:15px}
.the-gia .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:999px;box-shadow:0 5px 14px rgba(245,158,11,.45)}
.the-gia ul{list-style:none;padding:0;margin:16px 0;text-align:left;flex:1}
.the-gia li{padding:7px 0;font-size:14px;color:#374151;display:flex;align-items:center;gap:8px}
.the-gia li svg{color:var(--xanh);flex-shrink:0}
.the-gia .nut-mua{width:100%;padding:12px;border:0;border-radius:10px;font-size:15px;font-weight:700;
  cursor:pointer;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;transition:.2s}
.the-gia .nut-mua:hover{filter:brightness(1.1);transform:translateY(-2px)}
.modal-hop label{display:block;font-size:13px;margin:12px 0 6px;color:#374151}
.modal-hop input{width:100%;padding:11px 12px;border:1px solid var(--xam-vien);border-radius:9px;font-size:15px;outline:none}
.modal-hop input:focus{border-color:var(--tim);box-shadow:0 0 0 3px var(--tim-nhat)}

/* Toast thông báo */
#toast-area{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:500;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;padding:14px 22px;border-radius:12px;
  font-size:15px;font-weight:600;box-shadow:0 12px 34px rgba(22,163,74,.35);opacity:0;
  transform:translateY(20px);transition:opacity .3s, transform .3s;max-width:90vw;text-align:center}
.toast.hien{opacity:1;transform:none}

/* Trang giới thiệu (landing) */
.canh-giua{text-align:center}
.landing-top{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;padding-bottom:8px}
.landing-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 26px;max-width:1100px;margin:0 auto}
.landing-nav .logo{font-weight:800;font-size:19px;color:#fff}
.landing-nav-nut{display:flex;gap:10px}
.nut-header{color:#fff;border:1px solid rgba(255,255,255,.45);padding:9px 18px;border-radius:9px;font-size:14px;font-weight:600}
.nut-header:hover{background:rgba(255,255,255,.15);text-decoration:none}
.nut-header-dac{background:#fff;color:var(--tim-dam);border-color:#fff}
.nut-header-dac:hover{background:var(--tim-nhat);text-decoration:none}
.hero-lon{text-align:center;padding:54px 24px 64px;max-width:760px;margin:0 auto}
.hero-lon h1{font-size:34px;margin:0 0 14px;color:#fff;line-height:1.2}
.hero-lon p{margin:0 auto 22px;max-width:620px;opacity:.93;font-size:16px}
.hero-lon .hero-stats{justify-content:center;margin-bottom:28px}
.nut-kham-pha{display:inline-block;background:#fff;color:var(--tim-dam);font-weight:800;font-size:16px;
  padding:15px 36px;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);transition:.2s}
.nut-kham-pha:hover{transform:translateY(-3px);text-decoration:none;box-shadow:0 16px 40px rgba(0,0,0,.3)}
@media (max-width:560px){ .hero-lon h1{font-size:26px} }

/* ===================================================================== */
/* ====== APP SHELL chuyên nghiệp: sidebar (PC) + drawer (mobile) ====== */
/* ===================================================================== */
.topbar{display:flex;align-items:center;gap:12px;background:var(--tim-dam);color:#fff;
  padding:12px 20px;position:sticky;top:0;z-index:120;box-shadow:0 2px 14px rgba(0,0,0,.12)}
.topbar .logo{font-weight:800;font-size:17px;letter-spacing:.2px}
.topbar .topbar-phai{margin-left:auto;display:flex;align-items:center;gap:10px}
.user-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:600}
.user-chip b{color:#fff}
.app-body{display:block}
.app-body .noi-dung{max-width:1040px;margin:24px auto;padding:0 18px}
/* PC: sidebar cố định */
@media(min-width:900px){
  .app-body{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:start}
  .app-body .dieu-huong{position:sticky;top:54px;transform:none!important;height:calc(100vh - 54px);
    width:auto;box-shadow:none;border-right:1px solid rgba(255,255,255,.08)}
  .app-body .noi-dung{margin:24px;max-width:none}
  #nut-menu{display:none!important}
  .overlay{display:none!important}
}
.dieu-huong .tieude-menu .phu{display:block;font-weight:500;font-size:12px;opacity:.7;margin-top:2px}

/* ===== CTV THEME: vàng-kim (remap biến + override gradient cứng) ===== */
:root{ --vang-dam:#b45309; --vang:#d97706; --vang-nhat:#fef3c7; }
body.theme-ctv{ --tim-dam:#b45309; --tim:#d97706; --tim-nhat:#fef3c7; }
body.theme-ctv .nut-chinh,
body.theme-ctv .the-gia .nut-mua{background:linear-gradient(135deg,#f59e0b,#b45309)!important}
body.theme-ctv .hero,
body.theme-ctv .tile-noibat{background:linear-gradient(135deg,#f59e0b,#b45309)!important;
  box-shadow:0 16px 42px rgba(180,83,9,.30)!important}
body.theme-ctv .dieu-huong a.muc-admin{color:#fff}

/* Huy hiệu hạng CTV */
.huy-hieu-ctv{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fbbf24,#b45309);
  color:#fff;border-radius:999px;padding:7px 16px;font-weight:800;font-size:14px;
  box-shadow:0 8px 22px rgba(180,83,9,.4)}
.huy-hieu-ctv svg{flex-shrink:0}

/* ===== DASHBOARD (Tổng quan) ===== */
.tong-quan{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tile{background:#fff;border:1px solid var(--xam-vien);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:6px;transition:.2s}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(91,33,182,.12)}
.tile .tile-nhan{font-size:13px;color:#6b7280;display:flex;align-items:center;gap:8px}
.tile .tile-so{font-size:28px;font-weight:800;color:var(--tim-dam);line-height:1.1}
.tile .tile-phu{font-size:13px;color:#6b7280}
.tile-icon{width:38px;height:38px;border-radius:11px;background:var(--tim-nhat);color:var(--tim-dam);
  display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.tile-noibat{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;border:0;
  box-shadow:0 16px 40px rgba(91,33,182,.28)}
.tile-noibat .tile-nhan,.tile-noibat .tile-so,.tile-noibat .tile-phu{color:#fff}
.tile-noibat .tile-icon{background:rgba(255,255,255,.2);color:#fff}
.tq-hang{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* Vòng slot (gauge SVG) */
.vong-slot{display:flex;align-items:center;gap:18px}
.vong-slot svg{transform:rotate(-90deg);flex-shrink:0}
.vong-slot .vong-bg{fill:none;stroke:var(--xam-vien);stroke-width:12}
.vong-slot .vong-fg{fill:none;stroke:var(--vang);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.vong-slot .vong-txt{font-size:22px;font-weight:800;fill:var(--vang-dam);transform:rotate(90deg);transform-origin:center}
.vong-slot .vong-mota .a{font-size:24px;font-weight:800;color:var(--vang-dam)}
.vong-slot .vong-mota .b{font-size:13px;color:#6b7280}

/* Thanh ngày còn lại + chấm trạng thái */
.thanh-ngay{height:7px;background:var(--xam-vien);border-radius:999px;overflow:hidden;margin:10px 0 12px}
.thanh-ngay > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#16a34a,#22c55e)}
.thanh-ngay.canh > i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.thanh-ngay.het > i{background:#dc2626}
.cham-tt{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;background:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.cham-tt.canh{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.cham-tt.het{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.18)}

/* Panel quyền lợi + lộ trình hạng (CTV) */
.panel{background:#fff;border:1px solid var(--xam-vien);border-radius:16px;padding:22px;margin-top:16px}
.panel h3{margin:0 0 14px;color:var(--tim-dam);font-size:16px}
.ql-ds{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ql-ds li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#374151}
.ql-ds li svg{color:var(--vang);flex-shrink:0}
.lo-trinh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lt-buoc{flex:1;min-width:120px;text-align:center;border:1px solid var(--xam-vien);border-radius:12px;padding:14px 10px}
.lt-buoc.dat{border-color:var(--vang);background:var(--vang-nhat)}
.lt-buoc .lt-ten{font-weight:800;color:var(--vang-dam);font-size:15px}
.lt-buoc .lt-so{font-size:12.5px;color:#6b7280;margin-top:3px}
.lt-mui{color:#9ca3af;font-weight:700}

/* Hộp thoại xác nhận (thay confirm/alert) */
.cf-hop{max-width:420px;text-align:center}
.cf-hop p{color:#4b5563;font-size:14.5px;margin:6px 0 0}
.cf-hop .hang{justify-content:center;margin-top:20px}
.nut-nguy{background:var(--do)!important;border-color:var(--do)!important;color:#fff!important}
.nut-nguy:hover{filter:brightness(1.08)}

/* Empty state */
.rong-o{text-align:center;padding:46px 20px;color:#6b7280;background:#fff;border:1px dashed var(--xam-vien);border-radius:16px}
.rong-o .rong-icon{width:54px;height:54px;border-radius:14px;background:var(--tim-nhat);color:var(--tim-dam);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.rong-o b{display:block;color:var(--xam-chu);font-size:15px;margin-bottom:4px}

/* Lưới thao tác nhanh */
.thao-tac{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:6px}
.tt-nut{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--xam-vien);
  border-radius:14px;padding:16px;cursor:pointer;transition:.2s;color:var(--xam-chu);font-weight:700;font-size:14.5px}
.tt-nut:hover{border-color:var(--tim);background:var(--tim-nhat);text-decoration:none;transform:translateY(-2px)}
.tt-nut .tile-icon{margin:0}

/* Toast success/error styles */
.toast-success{background:linear-gradient(135deg,#059669,#10b981)!important;color:#fff!important;border-left:5px solid #047857!important}
.toast-error{background:linear-gradient(135deg,#dc2626,#ef4444)!important;color:#fff!important;border-left:5px solid #b91c1c!important}
.toast-icon{font-weight:900;font-size:16px;margin-right:6px}
.toast-success .toast-icon{color:#d1fae5}
.toast-error .toast-icon{color:#fecaca}

/* ===== Logo thương hiệu (SVG inline, tự canh với text) ===== */
.thuong-hieu{display:inline-flex;align-items:center;gap:10px;font-weight:800}
.thuong-hieu .logo-svg{width:30px;height:30px;flex-shrink:0}
.landing-nav .thuong-hieu{font-size:19px;color:#fff}
.topbar .thuong-hieu{font-size:17px;color:#fff}

/* ===== Nền hero cao cấp: mesh gradient + lưới chấm (thuần CSS, 0 ảnh) ===== */
.landing-top,.hero,.tile-noibat,.hero-lon{position:relative;isolation:isolate}
.landing-top{
  background:
    radial-gradient(680px 300px at 12% -10%,rgba(167,139,250,.55),transparent 60%),
    radial-gradient(560px 320px at 88% 8%,rgba(217,70,239,.38),transparent 55%),
    linear-gradient(135deg,#4c1d95,#5b21b6 45%,#7c3aed);
  overflow:hidden}
.landing-top::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
/* Vệt sáng chéo tinh tế trên hero card dashboard */
.hero::after,.tile-noibat::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(420px 180px at 85% -20%,rgba(255,255,255,.18),transparent 60%)}

/* Nút gạt bật/tắt (dùng cho "Chặn proxy / VPN" trong modal quản lý FW).
   Phải dùng selector `label.gat` (0,1,1) chứ không phải `.gat` (0,1,0): trong modal có
   `.modal-hop label{display:block}` sẽ đè mất display:inline-flex -> span .gat-nut không
   được blockify -> width bị bỏ qua -> cục tròn ::after đè lên chữ. Tương tự `.hang input`
   đặt flex:1 + padding + border nên ô checkbox ẩn vẫn chiếm chỗ, phải triệt bằng
   `label.gat input` (0,1,2). */
label.gat{display:inline-flex;align-items:center;gap:12px;margin:0;cursor:pointer;
  user-select:none;font-size:15px;font-weight:600;color:#2a2140;padding:11px 16px;
  border:1px solid var(--xam-vien,#e5e7eb);border-radius:12px;background:#fff;
  transition:border-color .18s,box-shadow .18s}
label.gat:hover{border-color:var(--tim,#7c3aed);box-shadow:0 2px 10px rgba(124,58,237,.12)}
label.gat input{position:absolute;opacity:0;width:0;height:0;flex:none;padding:0;border:0;margin:0}
label.gat .gat-nut{display:inline-block;position:relative;flex:0 0 46px;width:46px;height:26px;
  border-radius:999px;background:#cbd5e1;transition:background .18s}
label.gat .gat-nut::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s}
label.gat input:checked ~ .gat-nut{background:var(--tim,#7c3aed)}
label.gat input:checked ~ .gat-nut::after{transform:translateX(20px)}
label.gat input:checked ~ .gat-nhan{color:var(--tim,#7c3aed)}
label.gat input:focus-visible ~ .gat-nut{outline:2px solid var(--tim,#7c3aed);outline-offset:2px}

/* Khung nhỏ cuộn được - dùng cho blacklist/whitelist trong modal quản lý FW */
.khung-nho{max-height:190px;overflow-y:auto;border:1px solid var(--xam-vien,#e5e7eb);
  border-radius:10px;padding:6px 8px;margin-top:8px;background:#fafafa;font-size:13px}
.khung-nho .dong{display:flex;align-items:center;gap:8px;padding:6px 4px;
  border-bottom:1px solid #eee;flex-wrap:wrap}
.khung-nho .dong:last-child{border-bottom:none}
.khung-nho .ip{font-weight:700;color:#2a2140;min-width:120px}
.khung-nho .meta{color:#6b7280;flex:1;min-width:140px;font-size:12px}
.khung-nho .nut{padding:5px 11px;font-size:12px}
.khung-nho .trong{color:#6b7280;padding:8px 4px}
.the-cc{display:inline-block;padding:1px 7px;border-radius:999px;background:#ede9fe;
  color:#5b21b6;font-weight:700;font-size:11px}

/* ========================================================================== */
/* CYBER SECURITY UI 2026 - dark glass system                                 */
/* ========================================================================== */
:root{
  color-scheme:dark;
  --tim-dam:#8170f2;
  --tim:#9485ff;
  --tim-nhat:rgba(148,133,255,.16);
  --trang:rgba(19,31,55,.84);
  --xam-chu:#f0f5ff;
  --xam-vien:rgba(151,183,230,.20);
  --do:#ff5f7a;
  --xanh:#38e6ad;
  --nen:#0a1020;
  --cyan:#62e8ff;
  --cyan-soft:rgba(98,232,255,.14);
  --panel:#111d35;
  --panel-2:#162441;
  --muted:#9ba9c2;
  --line:rgba(143,178,228,.20);
  --shadow:0 24px 70px rgba(0,5,18,.30);
  --glow:0 0 38px rgba(98,232,255,.12);
}
html{scroll-behavior:smooth;background:var(--nen)}
body{
  min-height:100vh;color:var(--xam-chu);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(900px 520px at 4% -8%,rgba(54,126,255,.23),transparent 62%),
    radial-gradient(780px 520px at 100% 15%,rgba(139,102,255,.19),transparent 60%),
    linear-gradient(180deg,#0b1224 0%,#0d162a 48%,#09101f 100%);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:linear-gradient(rgba(98,232,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(98,232,255,.045) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}
body.modal-open{overflow:hidden}
a{color:var(--cyan)}
h1,h2,h3,h4,.logo,.tieu-de{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.025em}

/* request loading */
#request-loader{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1000;opacity:0;pointer-events:none;transition:.2s}
#request-loader.active{opacity:1}
#request-loader i{display:block;height:100%;width:34%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--cyan),#8b7cff,transparent);filter:drop-shadow(0 0 8px var(--cyan));animation:requestRun 1.05s linear infinite}
@keyframes requestRun{from{transform:translateX(-110%)}to{transform:translateX(310%)}}

/* shared glass */
.khoi,.tile,.panel,.the-gia,.the-server,.tn-o,.modal-hop,.rong-o,.tt-nut{
  background:linear-gradient(145deg,rgba(24,39,68,.94),rgba(13,23,43,.86));
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 50px rgba(0,5,18,.15);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.khoi,.panel{border-radius:18px}.khoi:hover,.panel:hover{border-color:rgba(77,228,255,.28);box-shadow:var(--glow),0 22px 60px rgba(0,0,0,.2)}
.noi-dung{color:var(--xam-chu)}
.noi-dung h1{color:#f2f7ff;font-size:clamp(22px,2.2vw,30px)}
.ghi-chu,.tile .tile-phu,.tile .tile-nhan,.tn-o p,.phu-de{color:var(--muted)}

/* inputs */
form label,.modal-hop label{color:#aab8d1;font-weight:600;letter-spacing:.01em}
form input,form select,.modal-hop input,.hang input,.modal-hop select{
  background:rgba(8,17,34,.76);border:1px solid rgba(148,183,232,.27);color:#f2f7ff;border-radius:12px;
}
form input::placeholder,.modal-hop input::placeholder,.hang input::placeholder{color:#596984}
form input:focus,form select:focus,.modal-hop input:focus,.hang input:focus{
  border-color:var(--cyan);box-shadow:0 0 0 3px rgba(77,228,255,.12),0 0 28px rgba(77,228,255,.08);outline:none
}

/* buttons */
.nut,.nut-chinh,.the-gia .nut-mua,.nut-kham-pha,.nut-header{
  position:relative;overflow:hidden;isolation:isolate;text-decoration:none!important;transition:transform .2s,border-color .2s,box-shadow .2s,filter .2s;
}
.nut{background:rgba(77,228,255,.06);border-color:rgba(77,228,255,.30);color:#bff7ff;border-radius:10px}
.nut:hover{background:rgba(77,228,255,.12);border-color:var(--cyan);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(77,228,255,.12)}
.nut-dac,.nut-chinh,.the-gia .nut-mua{
  color:#07121d!important;border-color:transparent!important;background:linear-gradient(135deg,#4de4ff,#6c88ff 58%,#9478ff)!important;
  box-shadow:0 10px 30px rgba(77,178,255,.18);font-weight:800;
}
.nut-dac:hover,.nut-chinh:hover,.the-gia .nut-mua:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 34px rgba(77,210,255,.26)}
.nut-nguy{background:linear-gradient(135deg,#ff4567,#ff784f)!important}
.nut-copy{background:rgba(77,228,255,.06);border-color:rgba(77,228,255,.26);color:#9ef2ff;border-radius:8px}
.nut-copy:hover{background:rgba(77,228,255,.14)}

/* shell */
.topbar{min-height:66px;padding:12px 22px;background:rgba(9,17,34,.84);border-bottom:1px solid var(--line);box-shadow:0 12px 42px rgba(0,5,18,.16);backdrop-filter:blur(20px)}
.topbar .logo{font-size:17px}.topbar .logo-svg{filter:drop-shadow(0 0 10px rgba(77,228,255,.42))}
.user-chip{background:rgba(77,228,255,.07);border-color:rgba(77,228,255,.2);color:#b6c5df}
.user-chip b{color:var(--cyan)}
.dieu-huong{background:linear-gradient(180deg,rgba(15,27,50,.98),rgba(9,17,34,.98));border-right:1px solid var(--line);box-shadow:18px 0 55px rgba(0,5,18,.24)}
.dieu-huong::after{content:"SECURE CONNECTION";margin:auto 18px 18px;padding:11px 12px;border:1px solid rgba(39,224,163,.18);border-radius:12px;color:#65e6b9;background:rgba(39,224,163,.055);font-size:10px;font-weight:800;letter-spacing:.13em;text-align:center}
.dieu-huong .tieude-menu{color:#f4f8ff;border-color:var(--line);padding:21px 20px}
.dieu-huong a{position:relative;color:#93a3c0;border:0;margin:4px 10px;padding:12px 14px;border-radius:10px;font-weight:600;font-size:14px}
.dieu-huong a::before{content:"";width:5px;height:5px;border-radius:50%;background:#50617e;box-shadow:0 0 0 4px rgba(80,97,126,.08);margin-right:10px;display:inline-block;vertical-align:2px;transition:.2s}
.dieu-huong a:hover,.dieu-huong a.dang-chon{background:linear-gradient(90deg,rgba(77,228,255,.12),rgba(124,108,255,.06));color:#ebfaff}
.dieu-huong a:hover::before,.dieu-huong a.dang-chon::before{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.dieu-huong a.muc-admin{color:#d7c9ff}
.overlay{background:rgba(0,4,13,.72);backdrop-filter:blur(4px)}
.app-body .noi-dung{padding-bottom:28px}
@media(min-width:900px){.app-body{grid-template-columns:270px minmax(0,1fr)}.app-body .dieu-huong{top:66px;height:calc(100vh - 66px)}.app-body .noi-dung{margin:30px;max-width:1440px}}

/* dashboard hero + metrics */
.dashboard-hero{position:relative;overflow:hidden;border:1px solid rgba(77,228,255,.18);border-radius:24px;padding:30px;margin-bottom:24px;background:
  radial-gradient(520px 240px at 88% 0%,rgba(98,232,255,.22),transparent 65%),
  linear-gradient(135deg,rgba(25,46,80,.96),rgba(15,27,53,.95));box-shadow:var(--shadow)}
.dashboard-hero::after{content:"";position:absolute;width:310px;height:310px;border:1px solid rgba(77,228,255,.12);border-radius:50%;right:-110px;top:-150px;box-shadow:0 0 0 34px rgba(77,228,255,.025),0 0 0 68px rgba(124,108,255,.025)}
.dashboard-hero .hero-copy{position:relative;z-index:1;max-width:760px}.dashboard-hero h1{margin:7px 0 8px;font-size:clamp(25px,3vw,38px)}
.dashboard-hero p{color:#a9b8d0;margin:0;max-width:650px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--xanh);box-shadow:0 0 0 0 rgba(39,224,163,.6);animation:pulseDot 2s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 9px rgba(39,224,163,0)}100%{box-shadow:0 0 0 0 rgba(39,224,163,0)}}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.metric-grid,.tong-quan{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.metric-card,.tile{position:relative;overflow:hidden;min-height:142px;border-radius:18px;padding:18px;background:linear-gradient(145deg,rgba(23,39,69,.96),rgba(13,24,45,.92));border:1px solid var(--line)}
.metric-card::after,.tile::after{content:"";position:absolute;right:-28px;bottom:-36px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(77,228,255,.10),transparent 68%)}
.metric-card:hover,.tile:hover{transform:translateY(-4px);border-color:rgba(77,228,255,.32);box-shadow:0 18px 48px rgba(0,0,0,.26),0 0 30px rgba(77,228,255,.06)}
.metric-icon,.tile-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,rgba(77,228,255,.14),rgba(124,108,255,.12));color:var(--cyan);border:1px solid rgba(77,228,255,.14)}
.metric-label,.tile .tile-nhan{margin-top:12px;color:#8392ae;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.metric-value,.tile .tile-so{margin-top:5px;color:#f3f8ff;font-family:"Space Grotesk",sans-serif;font-size:27px;font-weight:700}
.metric-sub,.tile .tile-phu{font-size:12px;color:#73829e;margin-top:4px}.metric-sub.live{color:#5be7b7}
.tile-noibat{background:linear-gradient(145deg,rgba(26,78,98,.94),rgba(29,42,83,.96))!important;border:1px solid rgba(98,232,255,.32);box-shadow:0 18px 50px rgba(0,5,18,.22)!important}
.tile-noibat .tile-icon{background:rgba(77,228,255,.13);color:var(--cyan)}

/* pricing */
.bang-gia{gap:16px}.the-gia{border-radius:20px;padding:28px 22px;text-align:left}
.the-gia:hover{border-color:rgba(77,228,255,.34);box-shadow:0 22px 58px rgba(0,0,0,.3),0 0 34px rgba(77,228,255,.05)}
.the-gia.noi-bat{border:1px solid rgba(77,228,255,.6);box-shadow:0 0 0 1px rgba(77,228,255,.12),0 24px 60px rgba(0,0,0,.34)}
.the-gia .ten-goi{color:#8291ad;font-size:12px;letter-spacing:.11em}.the-gia .gia{color:#f4f8ff;font-family:"Space Grotesk",sans-serif;font-size:30px}
.the-gia .gia small{color:#6f819f}.the-gia li{color:#aebbd0;border-bottom:1px solid rgba(125,160,211,.08)}
.the-gia li:last-child{border:0}.the-gia li svg{color:var(--xanh)}
.the-gia .badge{top:-12px;background:linear-gradient(135deg,#4de4ff,#7c6cff);color:#07101d;box-shadow:0 8px 24px rgba(77,228,255,.22)}
.gia-gach{color:#667590}.mien-phi{background:rgba(39,224,163,.12);color:#67efbd}

/* cards, tables, states */
.bang{background:rgba(9,15,29,.72);border-color:var(--line);border-radius:16px}.bang th{background:rgba(77,228,255,.07);color:#b9f6ff;border-color:var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.055em}
.bang td{color:#b8c4d8;border-color:rgba(125,160,211,.09)}.bang tr:hover td{background:rgba(77,228,255,.04)}
.the-server{border-radius:18px}.the-server:hover{border-color:rgba(77,228,255,.3);box-shadow:0 18px 44px rgba(0,0,0,.25)}
.ts-ketnoi{color:#dffbff}.ts-han{background:rgba(77,228,255,.1);color:#9ff1ff}.ts-han.het{background:rgba(255,95,122,.1);color:#ff8ba0}.ts-ip{color:#8190aa}
.thanh-ngay{background:rgba(125,160,211,.12)}.thanh-ngay>i{background:linear-gradient(90deg,#27e0a3,#4de4ff)}
.rong-o{color:#8190aa;border-style:dashed}.rong-o b{color:#dce6f5}.rong-o .rong-icon{background:var(--cyan-soft);color:var(--cyan)}
.tt-nut{color:#d6dfef}.tt-nut:hover{background:rgba(77,228,255,.08);border-color:rgba(77,228,255,.34);color:#fff}
.panel h3{color:#e5efff}.ql-ds li{color:#a9b7cc}.lt-buoc{border-color:var(--line);background:rgba(6,10,22,.42)}.lt-buoc.dat{border-color:rgba(77,228,255,.42);background:rgba(77,228,255,.07)}

/* modal */
.modal-nen{background:rgba(1,5,14,.78);backdrop-filter:blur(12px);z-index:600;animation:modalFade .2s ease}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal-hop{position:relative;background:linear-gradient(145deg,rgba(25,42,72,.98),rgba(11,21,41,.98));border:1px solid rgba(98,232,255,.24);border-radius:22px;box-shadow:0 34px 100px rgba(0,5,18,.5),0 0 50px rgba(98,232,255,.07);animation:modalRise .25s ease}
@keyframes modalRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.modal-hop h2,.modal-hop h3{color:#eef7ff}.modal-hop p{color:#9cabc2}.modal-close{position:absolute;right:18px;top:16px;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);color:#9faec6;font-size:22px;cursor:pointer}.modal-close:hover{color:#fff;border-color:var(--cyan)}
.cf-hop p{color:#9dabc0}

/* auth */
.trang-giua{position:relative;padding:26px;background:radial-gradient(700px 420px at 20% 10%,rgba(98,232,255,.21),transparent 62%),radial-gradient(600px 420px at 90% 80%,rgba(148,133,255,.22),transparent 64%),#0a1020}
.trang-giua::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(77,228,255,.12) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(110deg,#000,transparent 70%)}
.auth-page{display:grid;grid-template-rows:minmax(0,1fr) auto}.auth-main{width:100%}
.the-dang-nhap{position:relative;z-index:1;width:430px;padding:38px;background:linear-gradient(145deg,rgba(24,40,70,.93),rgba(12,22,43,.91));border:1px solid rgba(98,232,255,.25);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(24px)}
.tieu-de{color:#f0f7ff;font-size:27px}.phu-de{color:#8998b3}.nut-google{background:rgba(255,255,255,.97)!important;border:0!important;color:#182033!important;border-radius:13px!important}.nut-google:hover{box-shadow:0 14px 34px rgba(77,228,255,.14)!important}

/* TestFlight */
.testflight-section{animation:fadeIn .28s ease}.testflight-public{display:block!important;margin-top:70px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading h1{margin:8px 0 7px}.section-heading p{max-width:720px;color:#8e9db8;margin:0}
.ios-orbit{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:22px;background:linear-gradient(145deg,rgba(77,228,255,.14),rgba(124,108,255,.14));border:1px solid rgba(77,228,255,.2);color:#eaf8ff;box-shadow:0 0 34px rgba(77,228,255,.09)}
.ios-orbit svg{width:34px;height:34px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.game-card{display:flex;align-items:center;gap:13px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(16,26,48,.86),rgba(8,14,29,.8));color:#eaf1ff;cursor:pointer;transition:.22s;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.game-card:hover{transform:translateY(-4px);border-color:rgba(77,228,255,.38);box-shadow:0 18px 46px rgba(0,0,0,.26),0 0 26px rgba(77,228,255,.06)}
.game-card img{width:62px;height:62px;object-fit:cover;border-radius:15px;border:1px solid rgba(255,255,255,.13);box-shadow:0 9px 24px rgba(0,0,0,.34)}
.game-card span{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.game-card strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-card small{color:#7787a3}.game-card i{font-style:normal;color:var(--cyan);font-size:20px;transition:.2s}.game-card:hover i{transform:translateX(4px)}
.testflight-note{display:flex;align-items:center;gap:9px;margin-top:15px;color:#8291aa;font-size:13px}.status-led{width:7px;height:7px;border-radius:50%;background:var(--xanh);box-shadow:0 0 10px var(--xanh)}
.testflight-modal{width:760px}.tf-lead{margin:8px 0 20px}.tf-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tf-plan{position:relative;padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(4,9,20,.42)}
.tf-plan.featured{border-color:rgba(77,228,255,.36);background:linear-gradient(145deg,rgba(77,228,255,.08),rgba(124,108,255,.07))}.plan-badge{position:absolute;right:14px;top:-10px;padding:4px 10px;border-radius:999px;background:var(--cyan);color:#07111b;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.tf-plan-top{display:flex;flex-direction:column;gap:5px}.tf-plan-top span{color:#93a2bb;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.tf-plan-top strong{font:700 28px "Space Grotesk";color:#f3f8ff}.tf-plan-top small{font-size:13px;color:#74839e}
.tf-plan ul{list-style:none;padding:0;margin:15px 0 0}.tf-plan li{padding:7px 0;color:#aebbd0;font-size:13px}.tf-plan li::before{content:"✓";margin-right:9px;color:var(--xanh);font-weight:800}.tf-contact{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;flex-wrap:wrap}.nut-zalo{background:linear-gradient(135deg,#168cff,#4b75ff)!important;border-color:#319aff!important;color:#fff!important;box-shadow:0 10px 28px rgba(22,140,255,.22)}

/* footer */
.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--line);background:rgba(8,16,32,.82);backdrop-filter:blur(20px)}
.footer-glow{position:absolute;width:460px;height:170px;left:50%;bottom:-150px;transform:translateX(-50%);background:var(--cyan);filter:blur(110px);opacity:.12}
.footer-inner{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;max-width:1500px;margin:0 auto;padding:26px 34px}.footer-brand{display:flex;align-items:center;gap:11px}.footer-brand>div{display:flex;flex-direction:column}.footer-brand span,.footer-copy span,.footer-copy small{color:#74839f;font-size:11px}.footer-brand strong{font-family:"Space Grotesk";letter-spacing:.08em;color:#eaf5ff}
.footer-mark{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:var(--cyan);background:var(--cyan-soft);border:1px solid rgba(77,228,255,.18)}.footer-mark svg{width:22px;height:22px}.footer-copy{text-align:center;display:flex;flex-direction:column;gap:3px}.footer-copy strong{font-size:13px}.footer-social{display:flex;justify-content:flex-end;gap:9px}.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#9cacc4}.footer-social a:hover{color:var(--cyan);border-color:rgba(77,228,255,.4);transform:translateY(-2px)}.footer-social svg{width:18px;height:18px}.social-z{font-weight:900;color:#39a7ff}
@media(min-width:900px){.app-footer{margin-left:270px}}

/* landing */
.landing-body{overflow-x:hidden}.landing-top{min-height:760px;padding-bottom:60px;background:radial-gradient(750px 520px at 18% 0%,rgba(98,232,255,.24),transparent 65%),radial-gradient(800px 520px at 88% 10%,rgba(148,133,255,.29),transparent 68%),linear-gradient(160deg,#0a1020,#101c36 70%,#09101f)}
.landing-top::before{opacity:.32;background-image:linear-gradient(rgba(77,228,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,228,255,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 50% 20%,#000,transparent 72%)}
.landing-nav{max-width:1240px;padding:20px 28px}.landing-nav .logo{font-size:18px}.landing-nav-nut{align-items:center}.nut-header{border-color:rgba(173,215,255,.18);background:rgba(255,255,255,.035);color:#c9d6e8;border-radius:11px}.nut-header:hover{background:rgba(77,228,255,.08);border-color:rgba(77,228,255,.36)}.nut-header-dac{background:linear-gradient(135deg,#4de4ff,#8390ff);color:#06111d;border:0}
.hero-lon{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);align-items:center;gap:60px;text-align:left;max-width:1240px;padding:100px 28px 86px}.hero-lon h1{font-size:clamp(42px,5.6vw,74px);line-height:1.03;letter-spacing:-.055em}.hero-lon h1 span{background:linear-gradient(90deg,#4de4ff,#a795ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lon p{margin:22px 0 26px;color:#a2b0c8;font-size:17px;line-height:1.75}.hero-lon .hero-stats{justify-content:flex-start;margin:0 0 28px}.stat-chip{background:rgba(77,228,255,.05);border-color:rgba(77,228,255,.16);color:#9fabc0;padding:7px 12px;font-size:11px;letter-spacing:.05em}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.nut-kham-pha{padding:14px 23px;background:linear-gradient(135deg,#4de4ff,#7d8fff);color:#06121d;border-radius:12px;box-shadow:0 15px 38px rgba(77,210,255,.2)}.hero-secondary{display:inline-flex;align-items:center;padding:14px 23px;border:1px solid rgba(173,215,255,.18);border-radius:12px;color:#dce6f3;background:rgba(255,255,255,.035);font-weight:700}.hero-secondary:hover{border-color:var(--cyan);text-decoration:none;transform:translateY(-2px)}
.hero-visual{position:relative;min-height:420px}.security-orb{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);border:1px solid rgba(77,228,255,.3);border-radius:50%;box-shadow:0 0 80px rgba(77,228,255,.08),inset 0 0 60px rgba(77,228,255,.06)}.security-orb::before,.security-orb::after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(124,108,255,.3);inset:-42px;animation:orbitSpin 18s linear infinite}.security-orb::after{inset:38px;border-style:solid;border-color:rgba(77,228,255,.12);animation-direction:reverse;animation-duration:11s}@keyframes orbitSpin{to{transform:rotate(360deg)}}
.shield-core{position:absolute;inset:72px;display:flex;align-items:center;justify-content:center;border-radius:34%;background:linear-gradient(145deg,rgba(77,228,255,.17),rgba(124,108,255,.13));border:1px solid rgba(77,228,255,.28);box-shadow:inset 0 0 42px rgba(77,228,255,.09),0 0 45px rgba(77,228,255,.12);transform:rotate(45deg)}.shield-core svg{width:88px;height:88px;color:#9cf4ff;transform:rotate(-45deg);filter:drop-shadow(0 0 16px rgba(77,228,255,.46))}
.orbit-label{position:absolute;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:rgba(9,15,31,.88);color:#b7c5da;font-size:11px;font-weight:800;letter-spacing:.08em;box-shadow:0 10px 30px rgba(0,0,0,.3)}.orbit-label::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--xanh);box-shadow:0 0 8px var(--xanh);margin-right:7px}.ol-1{left:0;top:48px}.ol-2{right:-3px;top:105px}.ol-3{left:22px;bottom:58px}.ol-4{right:5px;bottom:38px}
.landing-main{max-width:1240px;margin:0 auto;padding:0 28px 80px}.landing-section{padding-top:78px}.landing-section .section-heading{align-items:flex-start}.landing-section .section-heading h2{font-size:clamp(28px,4vw,44px);margin:8px 0;color:#f2f7ff}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(23,39,68,.9),rgba(13,24,45,.82));transition:.22s}.feature-card:hover{transform:translateY(-5px);border-color:rgba(98,232,255,.38)}.feature-card .metric-icon{margin-bottom:16px}.feature-card h3{font-size:16px;margin:0 0 8px}.feature-card p{color:#91a1ba;font-size:13px;line-height:1.65;margin:0}

/* CTV dark theme */
body.theme-ctv{--tim-dam:#a887ff;--tim:#9b7cff;--tim-nhat:rgba(155,124,255,.13);--vang:#4de4ff;--vang-dam:#8eefff;--vang-nhat:rgba(77,228,255,.09)}
body.theme-ctv .nut-chinh,body.theme-ctv .the-gia .nut-mua{background:linear-gradient(135deg,#4de4ff,#9579ff)!important}
body.theme-ctv .hero,body.theme-ctv .tile-noibat{background:linear-gradient(145deg,rgba(31,38,77,.94),rgba(12,25,48,.95))!important;box-shadow:0 18px 50px rgba(0,0,0,.24)!important}
.huy-hieu-ctv{background:linear-gradient(135deg,rgba(77,228,255,.17),rgba(155,124,255,.18));border:1px solid rgba(77,228,255,.24);color:#dffaff;box-shadow:0 10px 32px rgba(0,0,0,.24)}
.vong-slot .vong-bg{stroke:rgba(125,160,211,.13)}.vong-slot .vong-fg{stroke:var(--cyan);filter:drop-shadow(0 0 4px rgba(77,228,255,.4))}.vong-slot .vong-mota .a{color:#eaf8ff}.lt-buoc .lt-ten{color:#dce6fa}.lt-buoc .lt-so{color:#7888a4}

/* Admin */
.admin-body .noi-dung{max-width:none}.admin-command{margin-bottom:22px}.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:13px;margin-bottom:24px}.admin-stat{padding:17px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(16,26,48,.88),rgba(8,14,29,.8))}.admin-stat span{color:#7888a4;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.admin-stat strong{display:block;margin-top:7px;font:700 25px "Space Grotesk";color:#edf6ff}.admin-stat small{color:#5f708d}.admin-stat.live strong{color:var(--xanh)}

/* responsive */
@media(max-width:1050px){.hero-lon{grid-template-columns:1fr;text-align:center;padding-top:70px}.hero-lon p{margin-left:auto;margin-right:auto}.hero-lon .hero-stats,.hero-buttons{justify-content:center}.hero-visual{min-height:390px}.feature-grid{grid-template-columns:repeat(2,1fr)}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.topbar{padding:10px 14px;min-height:60px}.topbar .logo{font-size:14px}.thuong-hieu .logo-svg{width:26px;height:26px}.user-chip{max-width:48vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:5px 10px}.app-body .noi-dung{margin:20px auto;padding:0 13px 24px}.dashboard-hero{padding:22px;border-radius:19px}.metric-grid,.tong-quan{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card,.tile{min-height:125px;padding:14px}.metric-value,.tile .tile-so{font-size:22px}.game-grid,.tf-plans,.feature-grid{grid-template-columns:1fr}.game-card img{width:54px;height:54px}.section-heading{align-items:flex-start}.ios-orbit{width:56px;height:56px;flex:none}.footer-inner{grid-template-columns:1fr;text-align:center;padding:24px 18px}.footer-brand,.footer-social{justify-content:center}.landing-nav{padding:16px}.landing-nav .logo{font-size:14px}.landing-nav-nut .nut-header:not(.nut-header-dac){display:none}.hero-lon{padding:60px 18px}.hero-lon h1{font-size:40px}.hero-visual{transform:scale(.84);margin:-30px -30px}.landing-main{padding:0 16px 60px}.tf-contact .nut{flex:1;text-align:center}.admin-stats{grid-template-columns:1fr 1fr}.bieu-do{height:190px}}
@media(max-width:430px){.metric-grid,.tong-quan{grid-template-columns:1fr}.hero-lon h1{font-size:35px}.hero-visual{transform:scale(.72);margin:-70px -60px}.landing-nav-nut{gap:6px}.nut-header{padding:8px 11px;font-size:12px}.admin-stats{grid-template-columns:1fr}.section-heading{display:block}.ios-orbit{margin-top:16px}}
/* Chuyển động nhẹ: chỉ dùng transform/opacity để tận dụng GPU, không animate layout. */
@keyframes softRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes haloFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(-16px,12px,0)}}
@keyframes gentleFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
@media(prefers-reduced-motion:no-preference){
  .dashboard-hero .hero-copy,.section-heading{animation:softRise .5s cubic-bezier(.2,.75,.25,1) both}
  .metric-card,.tile,.feature-card,.game-card,.the-gia,.the-server{animation:softRise .44s cubic-bezier(.2,.75,.25,1) both}
  .metric-card:nth-child(2),.tile:nth-child(2),.feature-card:nth-child(2),.game-card:nth-child(2),.the-gia:nth-child(2),.the-server:nth-child(2){animation-delay:45ms}
  .metric-card:nth-child(3),.tile:nth-child(3),.feature-card:nth-child(3),.game-card:nth-child(3),.the-gia:nth-child(3),.the-server:nth-child(3){animation-delay:90ms}
  .metric-card:nth-child(4),.tile:nth-child(4),.feature-card:nth-child(4),.game-card:nth-child(4),.the-server:nth-child(4){animation-delay:135ms}
  .dashboard-hero::after{animation:haloFloat 9s ease-in-out infinite alternate;will-change:transform}
  .ios-orbit{animation:gentleFloat 6s ease-in-out infinite;will-change:transform}
  .nut:active,.nut-chinh:active,.nut-mua:active,.nut-kham-pha:active{transform:translateY(0) scale(.98)}
}
@media(max-width:700px){body{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ========================================================================== */
/* ENTERPRISE CLOUD UI - light cyber security                                 */
/* ========================================================================== */
:root{
  color-scheme:light;
  --tim-dam:#1d4ed8;
  --tim:#4f46e5;
  --tim-nhat:rgba(79,70,229,.09);
  --trang:rgba(255,255,255,.9);
  --xam-chu:#142b47;
  --xam-vien:rgba(57,104,151,.17);
  --do:#dc3655;
  --xanh:#079669;
  --nen:#edf7ff;
  --cyan:#087fa4;
  --cyan-soft:rgba(20,184,216,.11);
  --panel:#fff;
  --panel-2:#f3f8fc;
  --muted:#64778e;
  --line:rgba(48,100,151,.16);
  --gold-line:rgba(185,139,48,.26);
  --gold-hover:rgba(209,161,57,.58);
  --shadow:0 24px 65px rgba(40,91,139,.13);
  --glow:0 0 34px rgba(14,165,233,.12);
}
html{background:var(--nen)}
body{
  color:var(--xam-chu);
  background:
    radial-gradient(800px 480px at 3% -5%,rgba(56,189,248,.19),transparent 62%),
    radial-gradient(740px 500px at 100% 12%,rgba(129,140,248,.15),transparent 60%),
    linear-gradient(180deg,#f8fcff 0%,#edf7ff 50%,#f8fbff 100%);
}
body::before{opacity:.55;background-image:linear-gradient(rgba(14,116,144,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(14,116,144,.045) 1px,transparent 1px)}
a{color:#087da4}
.noi-dung{color:var(--xam-chu)}
.noi-dung h1,.tieu-de,.modal-hop h2,.modal-hop h3{color:#12345c}
.ghi-chu,.tile .tile-phu,.tile .tile-nhan,.tn-o p,.phu-de,.section-heading p{color:var(--muted)}

/* panels */
.khoi,.tile,.panel,.the-gia,.the-server,.tn-o,.modal-hop,.rong-o,.tt-nut{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,247,254,.9));
  border-color:var(--line);box-shadow:inset 0 1px 0 #fff,0 18px 48px rgba(46,94,139,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.khoi:hover,.panel:hover{border-color:rgba(14,165,233,.32);box-shadow:var(--glow),0 22px 52px rgba(46,94,139,.12)}
.panel h3,.rong-o b{color:#173c68}.ql-ds li{color:#3f5873}
.tt-nut{color:#244966}.tt-nut:hover{background:#effaff;border-color:rgba(14,165,233,.38);color:#0b6084}
.rong-o{color:#6d8197}.rong-o .rong-icon{background:var(--cyan-soft);color:#0787a8}

/* inputs */
form label,.modal-hop label{color:#365773}
form input,form select,form textarea,.modal-hop input,.hang input,.modal-hop select,.source-form textarea{
  background:rgba(255,255,255,.94);border-color:rgba(51,104,151,.23);color:#173651;
}
form input::placeholder,.modal-hop input::placeholder,.hang input::placeholder,form textarea::placeholder{color:#91a2b3}
form input:focus,form select:focus,form textarea:focus,.modal-hop input:focus,.hang input:focus{
  border-color:#0ea5c7;box-shadow:0 0 0 3px rgba(14,165,199,.12),0 8px 24px rgba(14,116,144,.08);outline:none
}
label.gat{color:#24415e;background:#fff;border-color:var(--line)}
.khung-nho{background:#f8fbfe;border-color:var(--line)}.khung-nho .ip{color:#173c60}.khung-nho .meta,.khung-nho .trong{color:#6a7d91}.khung-nho .dong{border-color:#e5eef5}

/* buttons */
.nut{background:rgba(255,255,255,.82);border-color:rgba(8,145,178,.32);color:#087b9b}
.nut:hover{background:#e9faff;border-color:#0ea5c7;color:#075f7b;box-shadow:0 10px 25px rgba(14,116,144,.13)}
.nut-dac,.nut-chinh,.the-gia .nut-mua{
  color:#fff!important;background:linear-gradient(135deg,#0ea5c7,#2879d8 58%,#6558df)!important;
  box-shadow:0 11px 28px rgba(33,116,190,.22);
}
.nut-dac:hover,.nut-chinh:hover,.the-gia .nut-mua:hover{box-shadow:0 15px 34px rgba(33,116,190,.28)}
.nut-copy{background:#f4fbff;border-color:rgba(8,145,178,.28);color:#087b9b}.nut-copy:hover{background:#e6f9ff}
.nut-zalo{background:linear-gradient(135deg,#0b91e5,#3267dc)!important;border-color:#178eda!important;color:#fff!important}

/* app shell */
.topbar{background:linear-gradient(115deg,#28a7ca,#438fd7 58%,#6d7fdd);border-bottom-color:rgba(255,255,255,.36);box-shadow:0 12px 34px rgba(43,112,165,.2)}
.topbar .logo,.topbar .thuong-hieu{color:#fff}.topbar .logo-svg{filter:drop-shadow(0 0 10px rgba(153,246,255,.5))}
.user-chip{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#e7f8ff}.user-chip b{color:#fff}
.dieu-huong{background:linear-gradient(180deg,#258db7,#377fc1 58%,#5874c4);border-right-color:rgba(255,255,255,.24);box-shadow:18px 0 50px rgba(40,91,139,.16)}
.dieu-huong .tieude-menu{color:#fff;border-color:rgba(255,255,255,.16)}
.dieu-huong a{color:#c9e7f6}.dieu-huong a::before{background:#7db6d2;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.dieu-huong a:hover,.dieu-huong a.dang-chon{background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(111,224,255,.08));color:#fff}
.dieu-huong a:hover::before,.dieu-huong a.dang-chon::before{background:#78efff;box-shadow:0 0 12px rgba(120,239,255,.9)}
.dieu-huong::after{color:#d7fff3;background:rgba(20,224,164,.12);border-color:rgba(164,255,229,.26)}
.overlay{background:rgba(15,42,68,.42)}

/* dashboard */
.dashboard-hero{border-color:rgba(30,143,191,.2);background:radial-gradient(520px 240px at 88% 0%,rgba(34,211,238,.2),transparent 65%),linear-gradient(135deg,rgba(255,255,255,.98),rgba(222,243,255,.96));box-shadow:var(--shadow)}
.dashboard-hero::after{border-color:rgba(14,165,233,.18);box-shadow:0 0 0 34px rgba(14,165,233,.035),0 0 0 68px rgba(99,102,241,.03)}
.dashboard-hero h1{color:#12345c}.dashboard-hero p{color:#61768c}.eyebrow{color:#087f9e}
.pulse-dot,.status-led{background:#08a978;box-shadow:0 0 0 0 rgba(8,169,120,.46)}
.metric-card,.tile{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,246,253,.95));border-color:var(--line)}
.metric-card::after,.tile::after{background:radial-gradient(circle,rgba(14,165,233,.12),transparent 68%)}
.metric-card:hover,.tile:hover{border-color:rgba(14,165,233,.35);box-shadow:0 18px 42px rgba(41,89,132,.13),0 0 28px rgba(14,165,233,.07)}
.metric-icon,.tile-icon{background:linear-gradient(145deg,rgba(14,165,233,.12),rgba(99,102,241,.09));color:#087fa4;border-color:rgba(14,165,233,.18)}
.metric-label,.tile .tile-nhan{color:#6c8095}.metric-value,.tile .tile-so{color:#163a62}.metric-sub,.tile .tile-phu{color:#7b8da0}.metric-sub.live{color:#078a66}
.tile-noibat{background:linear-gradient(140deg,#087cac,#197cc9 58%,#5964d9)!important;border-color:rgba(255,255,255,.35);box-shadow:0 18px 45px rgba(27,103,169,.24)!important}
.tile-noibat .tile-nhan,.tile-noibat .tile-so,.tile-noibat .tile-phu,.tile-noibat .metric-sub{color:#fff}.tile-noibat .tile-icon{background:rgba(255,255,255,.17);color:#fff;border-color:rgba(255,255,255,.2)}

/* pricing, tables and modal */
.the-gia{background:linear-gradient(150deg,#fff,#f0f8ff)}.the-gia:hover{border-color:rgba(14,165,233,.38);box-shadow:0 22px 52px rgba(38,88,132,.15)}
.the-gia.noi-bat{border-color:rgba(14,165,233,.55);box-shadow:0 0 0 1px rgba(14,165,233,.08),0 24px 52px rgba(38,88,132,.14)}
.the-gia .ten-goi{color:#657c92}.the-gia .gia{color:#163a62}.the-gia .gia small{color:#7b8da0}.the-gia li{color:#465e76;border-color:rgba(51,104,151,.1)}
.the-gia .badge{background:linear-gradient(135deg,#22d3ee,#4f73e9);color:#08314b}.gia-gach{color:#8799a9}.mien-phi{background:#d9f9eb;color:#087e5d}
.bang{background:#fff;border-color:var(--line)}.bang th{background:#e9f6fc;color:#17617d;border-color:var(--line)}.bang td{color:#425a72;border-color:#e6eef4}.bang tr:hover td{background:#f1faff}
.the-server{background:linear-gradient(145deg,#fff,#eff8fd)}.ts-ketnoi{color:#145274}.ts-han{background:#dff6fd;color:#087898}.ts-ip{color:#6d8195}
.modal-nen{background:rgba(20,49,78,.38);backdrop-filter:blur(8px)}
.modal-hop{background:linear-gradient(145deg,#fff,#edf7fd);border-color:rgba(14,165,199,.24);box-shadow:0 34px 90px rgba(26,73,116,.25),0 0 45px rgba(14,165,233,.08)}
.modal-hop p,.cf-hop p{color:#63768a}.modal-close{background:#f3f8fc;color:#607489;border-color:var(--line)}.modal-close:hover{color:#0a7899;border-color:#0ea5c7}

/* landing and auth */
.landing-top{color:#173654;min-height:720px;background:radial-gradient(760px 520px at 16% 0%,rgba(34,211,238,.22),transparent 65%),radial-gradient(780px 520px at 90% 8%,rgba(129,140,248,.2),transparent 68%),linear-gradient(160deg,#f9fdff,#eaf7ff 68%,#f5f8ff)}
.landing-top::before{opacity:.55;background-image:linear-gradient(rgba(14,116,144,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(14,116,144,.06) 1px,transparent 1px)}
.landing-nav .logo,.landing-nav .thuong-hieu{color:#143f66}.nut-header{border-color:rgba(29,94,143,.18);background:rgba(255,255,255,.64);color:#345673}.nut-header:hover{background:#fff;border-color:rgba(14,165,199,.34)}
.nut-header-dac{background:linear-gradient(135deg,#0aa5c6,#4f69de);color:#fff;box-shadow:0 10px 26px rgba(28,115,181,.2)}
.hero-lon h1{color:#12365c}.hero-lon h1 span{background:linear-gradient(90deg,#0284a9,#5367dd);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lon p{color:#60758b}
.stat-chip{background:rgba(255,255,255,.7);border-color:rgba(14,116,144,.15);color:#527087;box-shadow:0 6px 16px rgba(41,89,132,.05)}
.nut-kham-pha{background:linear-gradient(135deg,#08a7c7,#4472df);color:#fff;box-shadow:0 15px 34px rgba(27,117,181,.23)}
.hero-secondary{border-color:rgba(29,94,143,.2);color:#315674;background:rgba(255,255,255,.72)}.hero-secondary:hover{background:#fff;border-color:#0ea5c7}
.security-orb{border-color:rgba(14,165,199,.35);background:rgba(255,255,255,.25);box-shadow:0 0 80px rgba(14,165,233,.12),inset 0 0 60px rgba(56,189,248,.08)}
.security-orb::before,.security-orb::after{border-color:rgba(79,70,229,.25)}.security-orb::after{border-color:rgba(14,165,199,.16)}
.shield-core{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(194,239,250,.8));border-color:rgba(14,165,199,.28);box-shadow:inset 0 0 42px rgba(255,255,255,.6),0 16px 45px rgba(41,101,148,.16)}.shield-core svg{color:#087f9e}
.orbit-label{background:rgba(255,255,255,.9);color:#41647e;border-color:rgba(35,101,151,.16);box-shadow:0 10px 28px rgba(41,89,132,.12)}
.landing-section .section-heading h2{color:#15395f}.feature-card{background:linear-gradient(145deg,#fff,#edf7fd);border-color:var(--line)}.feature-card p{color:#64798f}
.hero-visual::before{content:"";position:absolute;left:22%;top:18%;width:5px;height:5px;border-radius:50%;background:#2cc5df;box-shadow:80px 18px 0 #7a86ed,235px 45px 0 #2cc5df,42px 245px 0 #8a91eb,270px 265px 0 #41b9d4,155px 320px 0 #58d3e5;animation:particleFloat 9s ease-in-out infinite;will-change:transform,opacity}
@keyframes particleFloat{0%,100%{opacity:.42;transform:translate3d(0,0,0)}50%{opacity:.9;transform:translate3d(8px,-12px,0)}}
.trang-giua{background:radial-gradient(700px 420px at 20% 10%,rgba(34,211,238,.18),transparent 62%),radial-gradient(600px 420px at 90% 80%,rgba(129,140,248,.17),transparent 64%),#eff8ff}
.trang-giua::after{background-image:radial-gradient(rgba(14,116,144,.1) 1px,transparent 1px)}
.the-dang-nhap{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,247,254,.94));border-color:rgba(14,165,199,.22);box-shadow:var(--shadow)}
.tieu-de{color:#163b62}.phu-de{color:#687d91}

/* TestFlight packages + development services */
.testflight-section,.marketplace-section{scroll-margin-top:80px}.testflight-public,.marketplace-public{display:block!important;margin-top:76px}
.ios-orbit,.market-orbit{background:linear-gradient(145deg,#fff,#daf3fb);border-color:rgba(14,165,199,.2);color:#177c9c;box-shadow:0 14px 32px rgba(37,93,137,.11)}
.game-grid-three,.game-grid-six{grid-template-columns:repeat(3,minmax(0,1fr))}.game-card{background:linear-gradient(145deg,#fff,#edf7fd);border-color:var(--gold-line);color:#173954;box-shadow:0 12px 30px rgba(41,89,132,.07)}
.game-card:hover{border-color:var(--gold-hover);box-shadow:0 18px 40px rgba(41,89,132,.14),0 0 24px rgba(209,161,57,.09)}.game-card small{color:#71859a}.game-card i{color:#087f9e}
.testflight-note{color:#657a90}.testflight-modal{width:760px}.tf-game-title{display:flex;align-items:center;gap:15px;margin:13px 0 20px}.tf-game-title img{width:64px;height:64px;object-fit:cover;border-radius:17px;box-shadow:0 10px 24px rgba(36,81,123,.16)}.tf-game-title h2{margin:0 0 3px}.tf-game-title p{margin:0}
.tf-package-picker{display:grid;grid-template-columns:1fr 1fr;gap:13px}.tf-plan{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#f8fbfe;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}.tf-plan:hover{transform:translateY(-2px);border-color:rgba(14,165,199,.34)}
.tf-plan input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;padding:0!important;border:0!important}.tf-radio{width:19px;height:19px;border:2px solid #87a0b6;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #fff}.tf-plan-copy{display:flex;flex-direction:column}.tf-plan-copy small{color:#74889c;font-size:11px}.tf-plan-copy strong{color:#1c466a;font-size:16px}.tf-price{font:700 22px "Space Grotesk";color:#153b61}.tf-price small{font-size:12px;color:#71869a}.tf-selected{display:none;grid-column:2/4;color:#087e62;font-size:12px;font-weight:800}
.tf-plan.is-selected{border-color:#0ea5c7;background:linear-gradient(145deg,#f5feff,#e3f8ff);box-shadow:0 0 0 2px rgba(14,165,199,.09),0 12px 28px rgba(14,116,144,.1);animation:tfPlanSelect .28s ease}.tf-plan.is-selected .tf-radio{border-color:#0b9dbd;background:#0b9dbd;box-shadow:inset 0 0 0 4px #fff}.tf-plan.is-selected .tf-selected{display:block;animation:tfSelectedIn .24s ease}
.tf-benefits{margin-top:17px;padding:16px 18px;border:1px solid var(--gold-line);border-radius:15px;background:rgba(255,255,255,.7)}.tf-benefits>strong{color:#173f63}.tf-benefits ul{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 16px;list-style:none;padding:0;margin:12px 0 0}.tf-benefits li{color:#547087;font-size:13px}.tf-benefits li::before{content:"✓";color:#079669;font-weight:900;margin-right:7px}
@keyframes tfPlanSelect{0%{transform:scale(.985)}60%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes tfSelectedIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.services-heading{margin:62px 0 20px}.services-heading h2{margin:7px 0 4px;font-size:clamp(24px,3vw,36px);color:#15395f}.services-heading p{margin:0;color:#667b90}.dev-services{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dev-services-single{grid-template-columns:1fr}.service-card{display:grid;grid-template-columns:auto 1fr;gap:17px;padding:24px;border:1px solid var(--gold-line);border-radius:20px;background:linear-gradient(145deg,#fff,#edf8fd);box-shadow:0 16px 38px rgba(41,89,132,.08);transition:.22s}.service-card:hover{transform:translateY(-4px);border-color:var(--gold-hover);box-shadow:0 20px 44px rgba(41,89,132,.13),0 0 24px rgba(209,161,57,.08)}.service-card-accent{background:linear-gradient(145deg,#fff,#f1f2ff)}.service-card-wide{max-width:none}.service-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,#ddf7fc,#e8eaff);color:#167e9e}.service-icon svg{width:26px;height:26px}.service-copy h3{margin:6px 0 6px;color:#173e65}.service-copy p{margin:0;color:#657a90;font-size:13px}.service-tags{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap;list-style:none;padding:0;margin:14px 0 0}.service-tags li{padding:5px 9px;border-radius:999px;background:#e8f6fc;color:#3d6680;font-size:11px;font-weight:700}.service-contact{grid-column:1/-1;justify-self:start}

/* Source marketplace */
.marketplace-section{margin-top:30px}.market-orbit{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:22px}.market-orbit svg{width:34px;height:34px}.source-nav{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}.source-tab{flex:0 0 auto;padding:10px 15px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.78);color:#486983;font-weight:700;cursor:pointer;transition:.2s}.source-tab:hover,.source-tab.is-active{background:#e6f7fc;border-color:#0ea5c7;color:#087a99}.source-sell-tab{margin-left:auto;color:#4f46a8}.source-panel{display:none;margin-top:10px}.source-panel.is-active{display:block;animation:fadeIn .28s ease}.source-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.source-card{overflow:hidden;border:1px solid var(--line);border-radius:21px;background:#fff;box-shadow:0 18px 42px rgba(41,89,132,.09);transition:.22s}.source-card:hover{transform:translateY(-4px);border-color:rgba(14,165,199,.35);box-shadow:0 22px 48px rgba(41,89,132,.14)}.source-cover{position:relative;height:180px;overflow:hidden;background:linear-gradient(135deg,#c8f2e2,#cdeffe)}.source-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,72,91,.12),transparent)}.source-cover img{position:absolute;width:150px;height:150px;right:28px;top:15px;object-fit:cover;border-radius:34px;box-shadow:0 15px 34px rgba(21,84,112,.22);transition:transform .3s}.source-card:hover .source-cover img{transform:scale(1.04) rotate(1deg)}.source-cover>span{position:absolute;z-index:1;left:22px;bottom:20px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.83);color:#17627c;font-size:11px;font-weight:800}.source-cover-alt{background:linear-gradient(135deg,#e2e8ff,#c8f2fb)}.source-cover-mobi{background:linear-gradient(135deg,#ffe5bd,#d8efff)}.source-content{padding:21px}.source-meta{display:flex;justify-content:space-between;gap:10px}.source-meta span{color:#087f9e;font-size:10px;font-weight:800;letter-spacing:.09em}.source-meta small{color:#079669}.source-content h3{margin:7px 0 7px;color:#163c62}.source-content p{margin:0;color:#657a90;font-size:13px;line-height:1.65}.source-content ul{display:flex;gap:7px;flex-wrap:wrap;list-style:none;padding:0;margin:15px 0}.source-content li{padding:5px 8px;border-radius:8px;background:#eff6fa;color:#526f86;font-size:11px}.source-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid #e6eef4}.source-bottom>div{display:flex;flex-direction:column}.source-bottom small{color:#7b8fa1}.source-bottom strong{color:#173f66}.source-form{padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#fff,#edf7fd);box-shadow:0 18px 44px rgba(41,89,132,.09)}.source-form-head h2{margin:6px 0;color:#173e64}.source-form-head p{margin:0 0 20px;color:#687d91}.source-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.source-form label{margin:0}.source-form label>span{display:block;margin-bottom:6px}.source-field-full{grid-column:1/-1}.source-form textarea{width:100%;padding:12px;border-radius:12px;resize:vertical;font:inherit}.source-upload{padding:15px;border:1px dashed rgba(14,116,144,.28);border-radius:14px;background:rgba(240,249,255,.7)}.source-upload input{padding:8px}.source-upload small{display:block;margin-top:6px;color:#7c8fa2}.source-submit{width:auto;min-width:170px;margin-top:18px}

/* footer + support robot */
.site-footer{background:linear-gradient(125deg,#2689b5,#397fc0 58%,#5c72c5);border-top-color:rgba(255,255,255,.3)}.footer-brand span,.footer-copy span,.footer-copy small{color:#e0f4ff}.footer-brand strong,.footer-copy strong{color:#fff}.footer-mark{color:#f0fdff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
.footer-social a,.footer-social button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:11px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#e0f5ff;cursor:pointer;transition:.2s}.footer-social a:hover,.footer-social button:hover{color:#fff;border-color:rgba(255,255,255,.45);transform:translateY(-2px);background:rgba(255,255,255,.15)}.footer-social svg{width:18px;height:18px}.social-z{color:#fff}
.support-widget{position:fixed;right:24px;bottom:24px;z-index:850}.support-robot{position:relative;display:flex;align-items:center;justify-content:center;width:66px;height:66px;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:23px;background:linear-gradient(145deg,#19c7df,#3475d8 58%,#6c63e5);box-shadow:0 16px 36px rgba(28,104,174,.3),0 0 0 6px rgba(255,255,255,.65);cursor:pointer;transition:transform .22s,box-shadow .22s}.support-robot:hover{transform:translateY(-4px) rotate(-2deg);box-shadow:0 20px 42px rgba(28,104,174,.36),0 0 0 7px rgba(226,248,255,.9)}.robot-face{position:relative;display:flex;align-items:center;justify-content:space-around;width:42px;height:34px;padding:0 8px;border-radius:12px;background:#fff;box-shadow:inset 0 -5px 0 #d8edf7}.robot-face>i{width:6px;height:8px;border-radius:5px;background:#166497;box-shadow:0 0 6px rgba(16,132,180,.4)}.robot-face>b{position:absolute;left:16px;bottom:6px;width:11px;height:4px;border-radius:0 0 8px 8px;border-bottom:2px solid #3a7da5}.robot-antenna{position:absolute;top:-9px;left:50%;width:2px;height:11px;background:#fff}.robot-antenna i{position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:#9cfaed;box-shadow:0 0 9px #9cfaed}.robot-status{position:absolute;right:3px;bottom:3px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:#10b981}
.chat-bubble{position:absolute;display:flex;align-items:center;justify-content:center;min-width:25px;height:25px;padding:0 6px;border-radius:12px;background:#fff;color:#23618c;font-size:12px;font-weight:900;box-shadow:0 7px 18px rgba(32,81,123,.18);pointer-events:none;animation:chatFloat 4s ease-in-out infinite}.cb-1{left:-34px;top:-12px}.cb-2{right:-19px;top:-28px;animation-delay:-1s}.cb-3{right:-31px;bottom:1px;animation-delay:-2s}.cb-4{left:-29px;bottom:-17px;animation-delay:-3s}@keyframes chatFloat{0%,100%{opacity:.55;transform:translate3d(0,2px,0) scale(.92)}50%{opacity:1;transform:translate3d(0,-5px,0) scale(1)}}
.support-popover{position:absolute;right:0;bottom:84px;width:330px;padding:18px;border:1px solid rgba(14,116,144,.2);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 24px 64px rgba(33,78,119,.25);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:bottom right;transition:opacity .2s,visibility .2s,transform .2s}.support-widget.is-open .support-popover{opacity:1;visibility:visible;transform:none}.support-popover::after{content:"";position:absolute;right:23px;bottom:-8px;width:16px;height:16px;background:#fff;border-right:1px solid rgba(14,116,144,.2);border-bottom:1px solid rgba(14,116,144,.2);transform:rotate(45deg)}.support-popover-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #e5edf4}.support-popover-head>div{display:flex;flex-direction:column}.support-popover-head span{color:#079669;font-size:9px;font-weight:900;letter-spacing:.1em}.support-popover-head strong{color:#173e62;font-size:18px}.support-popover-head button{width:30px;height:30px;border:0;border-radius:9px;background:#edf5f9;color:#597087;font-size:20px;cursor:pointer}.support-options{display:grid;gap:8px;margin-top:13px}.support-option{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;width:100%;padding:11px;border:1px solid #e2edf4;border-radius:13px;background:#f8fbfd;color:#244965;text-align:left;cursor:pointer;transition:.18s;text-decoration:none!important}.support-option:hover{transform:translateX(-2px);border-color:rgba(14,165,199,.34);background:#effaff}.support-option-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:#e7f1f7;color:#27617e;font-weight:900}.support-option-icon svg{width:18px;height:18px}.support-option>span:nth-child(2){display:flex;flex-direction:column}.support-option strong{color:#244965}.support-option small{color:#7b8ea0}.support-option i{font-style:normal;color:#7a91a4}.support-zalo .support-option-icon{background:#168de5;color:#fff}

/* centered service toast */
.toast-notice{position:fixed;left:50%;top:50%;bottom:auto;max-width:min(520px,90vw);background:linear-gradient(135deg,#0c8eae,#376dd4)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35);box-shadow:0 24px 70px rgba(27,78,132,.3)!important;transform:translate(-50%,calc(-50% + 18px))!important;line-height:1.55}.toast-notice.hien{transform:translate(-50%,-50%)!important}.toast-notice .toast-icon{color:#d8fbff}

/* light CTV + admin */
body.theme-ctv{--tim-dam:#4f46c8;--tim:#6659df;--tim-nhat:rgba(99,102,241,.09);--vang:#0891b2;--vang-dam:#0b7593;--vang-nhat:rgba(14,165,233,.08)}
body.theme-ctv .hero,body.theme-ctv .tile-noibat{background:linear-gradient(140deg,#267cae,#4d68cf)!important}.huy-hieu-ctv{background:linear-gradient(135deg,#e8f9ff,#eef0ff);border-color:rgba(14,165,199,.24);color:#276080;box-shadow:0 10px 26px rgba(36,83,125,.12)}
.vong-slot .vong-mota .a,.lt-buoc .lt-ten{color:#1d496d}.vong-slot .vong-mota .b,.lt-buoc .lt-so{color:#718599}.lt-buoc{background:#f8fbfd}.lt-buoc.dat{background:#e7f8fc;border-color:rgba(14,165,199,.38)}
.admin-stat{background:linear-gradient(145deg,#fff,#edf7fd);border-color:var(--gold-line);box-shadow:0 12px 30px rgba(41,89,132,.07)}.admin-stat span,.admin-stat small{color:#708599}.admin-stat strong{color:#173e64}.admin-stat.live strong{color:#078f68}

/* premium warm accent on cards and primary actions */
.khoi,.tile,.panel,.the-gia,.the-server,.tn-o,.feature-card,.modal-hop,.source-form,.source-card{border-color:var(--gold-line)}
.khoi:hover,.panel:hover,.tile:hover,.feature-card:hover,.the-gia:hover,.the-server:hover,.source-card:hover{border-color:var(--gold-hover)}
.nut:hover,.nut-dac:hover,.nut-chinh:hover,.nut-zalo:hover,.the-gia .nut-mua:hover{border-color:var(--gold-hover)!important;box-shadow:0 14px 32px rgba(49,112,171,.2),0 0 0 2px rgba(209,161,57,.1)}

@media(max-width:900px){.dev-services,.source-grid{grid-template-columns:1fr}.source-sell-tab{margin-left:0}}
@media(max-width:700px){
  .landing-top{min-height:auto}.hero-lon{padding-top:54px}.hero-buttons>a{flex:1;justify-content:center;text-align:center;min-width:145px}.hero-visual{min-height:340px}
  .game-grid-three,.game-grid-six,.tf-package-picker,.dev-services,.source-grid,.source-form-grid{grid-template-columns:1fr}.tf-benefits ul{grid-template-columns:1fr 1fr}.source-field-full{grid-column:auto}.source-cover{height:160px}.source-cover img{width:132px;height:132px}.source-form{padding:20px}.source-nav{margin-right:-13px;padding-right:13px}
  .support-widget{right:16px;bottom:17px}.support-robot{width:60px;height:60px}.support-popover{position:fixed;left:14px;right:14px;bottom:94px;width:auto}.support-popover::after{right:31px}
}
@media(max-width:430px){.hero-buttons{display:grid;grid-template-columns:1fr}.hero-buttons>a{width:100%}.tf-benefits ul{grid-template-columns:1fr}.tf-game-title{padding-right:20px}.tf-price{font-size:18px}.tf-plan{grid-template-columns:auto 1fr}.tf-price{grid-column:2}.tf-selected{grid-column:2}.service-card{grid-template-columns:1fr}.service-contact{grid-column:auto}.footer-inner{padding-bottom:84px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}