:root {
  --bg: #0b1020; --card: #151b31; --line: #263052; --fg: #e8ecf8;
  --muted: #8d9bc4; --accent: #2ecc71; --accent2: #3b82f6; --error: #ff6b6b; --warn: #f0932b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
a { color: var(--accent2); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
h1 { margin: 0 0 4px; font-size: 24px; }
h2 { margin: 6px 0 14px; font-size: 20px; }
h3 { margin: 0; font-size: 16px; }
button { font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 9px; border: none; }
input, textarea, select { background: #0e1428; border: 1px solid var(--line); color: var(--fg);
  padding: 10px 12px; border-radius: 10px; font-size: 14px; width: 100%; font-family: inherit; }
input:focus, textarea:focus { outline: none; border-color: var(--accent2); }
textarea { resize: vertical; }
.loading { color: var(--muted); padding: 30px; text-align: center; }
.empty { color: var(--muted); padding: 20px; text-align: center; }
.code { background:#0e1428; border:1px solid var(--line); border-radius:10px; padding:12px; overflow:auto; font-size:12px; white-space:pre-wrap; word-break:break-all; }

/* auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-card { width: 380px; max-width: 100%; }
.tabs { display: flex; gap: 8px; margin: 16px 0 12px; }
.tab { flex: 1; background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 9px; }
.tab.active { color: var(--fg); border-color: var(--accent2); }
form { display: flex; flex-direction: column; gap: 10px; }
.fl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
#authSubmit, .buy { background: var(--accent2); color: #fff; padding: 11px; }
.buy:disabled { background: #33415e; cursor: not-allowed; }
.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 8px 12px; }
.error { color: var(--error); min-height: 20px; font-size: 14px; }

/* navbar */
.navbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; background: #0e1428ee; border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 18px; }
#nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.navlink { padding: 7px 12px; border-radius: 9px; color: var(--muted); cursor: pointer; text-decoration: none; font-weight: 600; font-size: 14px; }
.navlink:hover { color: var(--fg); }
.navlink.active { color: #fff; background: var(--accent2); }
.navright { display: flex; align-items: center; gap: 12px; }
.bal-chip { background: #0e1428; border: 1px solid var(--line); padding: 6px 12px; border-radius: 20px; font-size: 14px; }
.bal-chip strong { color: var(--accent); }

main { max-width: 960px; margin: 0 auto; padding: 22px 16px 60px; }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* grid + product cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); gap: 18px; justify-content: center; }
.product { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; position: relative; }
.product:hover { transform: translateY(-4px); border-color: var(--accent2); box-shadow: 0 12px 30px #0006; }
.product.is-out { opacity: .72; }
.p-top { display: flex; justify-content: space-between; align-items: center; }
.p-icon { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 6px #0007); }
.p-img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.p-name { font-size: 17px; margin: 2px 0 0; }
.cat-tag { align-self: flex-start; font-size: 11px; color: var(--accent2); border: 1px solid var(--accent2); border-radius: 20px; padding: 2px 9px; }
.p-tiers { line-height: 1.6; }
.faq-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.faq-list li { line-height: 1.5; }
.guide { margin-bottom: 14px; }
.guide-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.guide-ic { font-size: 20px; }
.guide-body { white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--fg); }
.p-desc { margin: 0; min-height: 34px; }
.stock { font-size: 12px; color: var(--accent); white-space: nowrap; background: #0e1428; border: 1px solid var(--line); padding: 3px 9px; border-radius: 20px; }
.stock.out { color: var(--error); border-color: var(--error); }
.p-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.price-big { font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.unit { font-size: 13px; color: var(--muted); font-weight: 600; }
.disc-badge { background: var(--warn); color: #241a05; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.chk input { width: auto; }
.buy-full { flex: 1; padding: 11px; font-size: 15px; }
.loyalty { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.auth-links { text-align: center; margin: 10px 0 0; }
.auth-links a { font-size: 13px; }
.lang-row { text-align: right; margin-bottom: 6px; }
.lang-sel { background: #0e1428; border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 5px 8px; font-size: 13px; width: auto; }
.buy-row { display: flex; gap: 8px; }
.qty { width: 90px; }
.preview { min-height: 16px; }

/* lists / rows */
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.row .amt { color: var(--accent); font-weight: 700; }
.row .net { color: var(--muted); font-size: 12px; }
.order-actions { display: flex; align-items: center; gap: 8px; }
.mini { padding: 6px 10px; background: var(--accent2); color: #fff; font-size: 13px; }
.mini.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.mini.warn { background: var(--warn); color: #241a05; }
.ticket { cursor: pointer; }
.ticket:hover, .prod-admin:hover { border-color: var(--accent2); }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.refund, .tag.refunded { color: var(--warn); border-color: var(--warn); }
.tag.open { color: var(--accent2); border-color: var(--accent2); }
.tag.answered { color: var(--accent); border-color: var(--accent); }

/* deposit */
.balance { text-align: center; margin-bottom: 18px; }
.big { font-size: 40px; font-weight: 800; color: var(--accent); margin: 6px 0; }
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
@media (max-width: 640px) { .addr-grid { grid-template-columns: 1fr; } }
.addr { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center; }
.addr img { width: 170px; height: 170px; background: #fff; border-radius: 10px; padding: 6px; }
.addr .val, .val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; margin: 8px 0; }
.copy { background: var(--accent); color: #042; padding: 8px 14px; }

/* subtabs */
.subtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.subtab { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 8px 14px; }
.subtab.active { color: #fff; border-color: var(--accent2); background: var(--accent2); }

/* modal */
.modal-bg { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: 540px; max-width: 100%; max-height: 88vh; overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.accbox { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; margin-bottom: 10px; }
.acclist { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin-bottom: 12px; }
.accline { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #0e1428; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.accline .mono { word-break: break-all; }
.btn-row { display: flex; gap: 8px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 160px; }
.contact { margin-bottom: 14px; }

/* ticket thread */
.thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 40vh; overflow: auto; }
.msg { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.msg.user { background: #0e1428; align-self: flex-start; }
.msg.admin { background: #16223f; align-self: flex-end; border-color: var(--accent2); }
.msg-who { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.admin-tools { display: flex; gap: 8px; margin-bottom: 10px; }

/* search + chips + segmented */
.searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.searchbar input { flex: 1; }
.searchbar select { width: auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { background: #0e1428; border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; font-size: 13px; color: var(--muted); }
.chip.ok { color: var(--accent); border-color: var(--accent); }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.seg { display: flex; gap: 10px; }
.seg-op { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg); }
.seg-op input { width: auto; }
h4 { margin: 16px 0 8px; font-size: 15px; color: var(--muted); }

/* announcement banner */
.announce { max-width: 960px; margin: 14px auto -8px; padding: 11px 16px; border-radius: 10px;
  background: linear-gradient(90deg, #16223f, #1a2b14); border: 1px solid var(--accent2);
  color: var(--fg); font-size: 14px; }
.announce.verify { background: #2a2410; border-color: var(--warn); }

/* dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat-v { font-size: 20px; font-weight: 800; }
.stat-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat.accent .stat-v { color: var(--accent); }
.stat.warn .stat-v { color: var(--warn); }

/* coupon input in card */
.coupon-in { font-size: 13px; padding: 8px 10px; }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60;
  padding: 12px 20px; border-radius: 10px; font-weight: 600; box-shadow: 0 8px 30px #0008; }
.toast.ok { background: var(--accent); color: #042; }
.toast.err { background: var(--error); color: #2a0606; }

/* ============ MOBILE / RESPONSIVE ============ */
@media (max-width: 640px) {
  main { padding: 16px 12px 56px; }
  h1 { font-size: 21px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
  .card { padding: 15px; border-radius: 12px; }

  /* navbar: brand + controls on row 1, nav scrolls on row 2 */
  .navbar { padding: 9px 12px; gap: 9px; align-items: center; }
  .brand { order: 1; font-size: 16px; }
  .navright { order: 2; margin-left: auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  #nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  #nav::-webkit-scrollbar { display: none; }
  .navlink { white-space: nowrap; padding: 7px 11px; font-size: 13px; }
  #navUser { display: none; }
  .bal-chip { font-size: 12.5px; padding: 5px 9px; }
  .lang-sel { font-size: 12.5px; padding: 5px 6px; }
  #logout { padding: 6px 10px; }

  /* products: single column full width */
  .grid { grid-template-columns: 1fr; gap: 14px; justify-content: stretch; }
  .product { padding: 16px; }
  .product:hover { transform: none; }
  .price-big { font-size: 26px; }

  /* list rows stack vertically */
  .row { flex-direction: column; align-items: stretch; gap: 8px; }
  .order-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .order-actions .amt, .row .amt { text-align: left; }

  /* search / subtabs / chips scroll or wrap */
  .searchbar { flex-wrap: wrap; }
  .searchbar input { width: 100%; min-width: 0; }
  .searchbar select { width: 100%; }
  .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { white-space: nowrap; }
  .chips { overflow-x: auto; }

  /* forms full width */
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input, .inline-form .mini { width: 100%; min-width: 0; }
  .btn-row { flex-wrap: wrap; }
  .seg { flex-wrap: wrap; }

  /* deposit */
  .addr-grid { grid-template-columns: 1fr; }
  .big { font-size: 34px; }

  /* dashboard stats 2-up */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* modal near-fullscreen */
  .modal-bg { padding: 8px; align-items: flex-start; }
  .modal { width: 100%; max-height: 94vh; margin-top: 8px; }
  .msg.admin, .msg.user { align-self: stretch; }

  /* iOS: inputs >=16px to avoid auto-zoom on focus */
  input, textarea, select { font-size: 16px; }

  /* larger tap targets */
  .mini { padding: 9px 12px; }
  .buy, #authSubmit { padding: 12px; }
  .navlink, .tab, .subtab { min-height: 36px; display: inline-flex; align-items: center; }

  /* announcement */
  .announce { margin: 10px 12px -4px; font-size: 13px; }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .price-row { flex-wrap: wrap; }
}

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 4px; }

.sq-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.sq-group { background: #0e1428; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.sq-head { font-weight: 700; color: var(--accent); margin-bottom: 8px; font-size: 14px; }
.sq-group .faq-list { font-size: 13px; gap: 6px; }

/* Apple-style login mock in Help */
.apple-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 12px 0; }
.apple-panel { background: #fff; color: #1d1d1f; border-radius: 14px; padding: 18px 16px; box-shadow: 0 6px 20px #0005;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", sans-serif; }
.ap-logo::before { content: "\1F34E"; font-size: 26px; display: block; text-align: center; margin-bottom: 4px; }
.ap-title { text-align: center; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.ap-field { position: relative; border: 1px solid #d2d2d7; border-radius: 10px; padding: 11px 12px; margin-bottom: 10px;
  color: #86868b; font-size: 14px; background: #fff; }
.ap-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: var(--accent2); color: #fff;
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ap-q { background: #f5f5f7; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 10px; color: #1d1d1f; min-height: 20px; }
.ap-hint { color: #86868b !important; }
.sq-matcher { margin-top: 6px; }
.sq-answer { margin-top: 10px; }
.sq-res { font-size: 16px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.sq-answer .mono { color: var(--muted); word-break: break-all; }
.sq-answer .hl { color: var(--accent); background: #12351f; padding: 1px 4px; border-radius: 4px; }

.sq-fmt { margin-top: 8px; }
.fmt-line { margin-top: 4px; font-size: 14px; line-height: 1.8; background: #0e1428; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; word-break: break-word; }
.fmt-line .sep { color: #3a4668; margin: 0 1px; }
.fmt-line .dim { color: var(--muted); }
.fmt-line .hl { color: #042; background: var(--accent); padding: 2px 8px; border-radius: 6px; font-weight: 800; }

.fchip { cursor: pointer; background: #0e1428; color: var(--muted); }
.fchip.active { color: #fff; background: var(--accent2); border-color: var(--accent2); }

.check-box { margin: 10px 0 4px; }
#checkProg { margin-top: 6px; min-height: 18px; }

/* ==== Bảng quản lý data ==== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
  text-align: left; padding: 9px 12px; background: #0e1428; color: var(--muted);
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px;
  position: sticky; top: 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table tbody td { padding: 8px 12px; border-bottom: 1px solid #1c2540; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
.data-table tbody tr:hover { background: rgba(59,130,246,.08); }
.data-table .mono { word-break: break-all; }
.data-table .net { color: var(--muted); font-size: 12px; }
/* badge trạng thái */
.st { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.st-available { color: var(--accent); border-color: var(--accent); background: rgba(46,204,113,.08); }
.st-sold { color: var(--accent2); border-color: var(--accent2); background: rgba(59,130,246,.08); }
.st-failed { color: var(--error); border-color: var(--error); background: rgba(255,107,107,.08); }
.st-checking { color: var(--warn); border-color: var(--warn); background: rgba(240,147,43,.08); }
.data-table td .mini { padding: 4px 10px; font-size: 12px; }

/* ==== Quản lý account PRO ==== */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.toolbar select, .toolbar input { padding: 7px 10px; background: #0e1428; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font-size: 13px; }
.toolbar input { min-width: 180px; flex: 1 1 180px; }
.toolbar .spacer, .bulkbar .spacer { flex: 1 1 auto; }
.cfilter { cursor: pointer; user-select: none; }
.cfilter:hover { filter: brightness(1.25); }
.batches-acc { margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.batches-acc summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
/* bulk bar */
.bulkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #11193a;
  border: 1px solid var(--accent2); border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 13px; }
.bulkbar a { color: var(--accent2); cursor: pointer; text-decoration: underline; }
.bulkbar .mini.ok { color: var(--accent); border-color: var(--accent); }
/* bảng: sort + chọn */
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--fg); }
.data-table td.tc, .data-table th.tc { text-align: center; }
.data-table tr.selrow { background: rgba(59,130,246,.14) !important; }
.data-table .acc-main { font-size: 13px; }
.data-table .acc-full { font-size: 11px; opacity: .7; word-break: break-all; margin-top: 2px; }
.copybtn { background: none; border: none; cursor: pointer; font-size: 11px; opacity: .6; padding: 0 2px; }
.copybtn:hover { opacity: 1; }
.rsel { width: 16px; height: 16px; cursor: pointer; }

/* ==== Trang Account + danh hiệu ==== */
.acct-head { display: flex; align-items: center; }
.acct-id { display: flex; align-items: center; gap: 14px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent2), #7c3aed); }
.acct-name { font-size: 18px; font-weight: 700; }
.rank-card { }
.rank-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rank-top .spacer { flex: 1 1 auto; }
.rank-badge { font-size: 17px; font-weight: 700; }
.rank-bar { height: 10px; background: #0e1428; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.rank-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 20px; transition: width .4s; }
.rank-milestones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ms { font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); }
.ms.done { color: var(--accent); border-color: var(--accent); background: rgba(46,204,113,.08); font-weight: 600; }

/* chip filter chọn + nút check trong toolbar */
.chip.sel { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.mini.primary { background: var(--accent); color: #05281a; border-color: var(--accent); font-weight: 600; }
.mini.primary:disabled { opacity: .4; }
.checkprog:empty { display: none; }
.checkprog { margin: 2px 0 8px; }

/* ==== User menu (avatar góc phải) ==== */
.usermenu { position: relative; }
.usermenu-btn { display: flex; align-items: center; gap: 4px; background: #0e1428; border: 1px solid var(--line);
  border-radius: 24px; padding: 4px 8px 4px 4px; cursor: pointer; color: var(--fg); }
.usermenu-btn:hover { border-color: var(--accent2); }
.avatar.sm { width: 30px; height: 30px; font-size: 14px; }
.um-caret { color: var(--muted); font-size: 11px; }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.um-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.um-name { font-weight: 700; }
.um-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px;
  border-radius: 8px; color: var(--fg); background: none; border: none; cursor: pointer; font-size: 14px; }
.um-item:hover { background: #1b2342; }
.um-logout { color: var(--error); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.um-lang { display: flex; align-items: center; gap: 9px; padding: 7px 10px; }
.um-lang select { flex: 1; background: #0e1428; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); padding: 6px 8px; }

/* ===================== LANDING PAGE (tech / holographic) ===================== */
#landing { position: relative; min-height: 100vh; overflow-x: hidden; color: var(--fg); }
.lp-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(130% 100% at 50% 0%, #0d1430 0%, #070a18 60%, #05060f 100%); }
.lp-grid { position: absolute; inset: -2px; background-image:
    linear-gradient(rgba(90,120,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,120,255,.07) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(100% 70% at 50% 0%, #000 40%, transparent 85%); }
.lp-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: orbFloat 18s ease-in-out infinite; }
.lp-orb.o1 { width: 520px; height: 520px; top: -120px; left: -80px; background: #3b82f6; }
.lp-orb.o2 { width: 460px; height: 460px; top: 40px; right: -120px; background: #a855f7; animation-delay: -6s; }
.lp-orb.o3 { width: 420px; height: 420px; top: 420px; left: 35%; background: #22d3ee; opacity: .4; animation-delay: -11s; }
@keyframes orbFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,50px) scale(1.12); } }

#landing > *:not(.lp-bg) { position: relative; z-index: 1; }
.lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px,5vw,56px); }
.lp-logo { font-weight: 800; font-size: 20px; letter-spacing: .5px; background: linear-gradient(90deg,#22d3ee,#a855f7,#22d3ee); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holoShift 6s linear infinite; }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; }
.lp-btn { padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; font-size: 14px;
  color: #05060f; background: linear-gradient(135deg,#22d3ee,#3b82f6); box-shadow: 0 6px 24px rgba(59,130,246,.4); transition: transform .15s, box-shadow .15s; }
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(59,130,246,.6); }
.lp-btn.ghost { background: transparent; color: var(--fg); border: 1px solid rgba(150,170,255,.35); box-shadow: none; }
.lp-btn.ghost:hover { border-color: #22d3ee; color: #22d3ee; }
.lp-btn.big { padding: 15px 30px; font-size: 16px; border-radius: 12px; }

.lp-hero { text-align: center; max-width: 900px; margin: clamp(30px,8vh,90px) auto 40px; padding: 0 20px; }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 30px;
  border: 1px solid rgba(150,170,255,.3); background: rgba(90,120,255,.08); font-size: 13px; color: #c7d2fe; margin-bottom: 26px; }
.lp-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.lp-title { font-size: clamp(34px,6vw,64px); line-height: 1.08; font-weight: 800; margin: 0 0 20px; letter-spacing: -1px; }
.holo { background: linear-gradient(90deg,#22d3ee,#a855f7,#f472b6,#22d3ee); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holoShift 5s linear infinite; }
@keyframes holoShift { to { background-position: 300% center; } }
.lp-sub { font-size: clamp(15px,2vw,19px); color: #9fb0d9; max-width: 640px; margin: 0 auto 32px; line-height: 1.6; }
.lp-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-stats { display: flex; gap: clamp(20px,6vw,70px); justify-content: center; flex-wrap: wrap; margin-top: 52px; }
.lp-stat { text-align: center; }
.lp-stat b { display: block; font-size: 30px; font-weight: 800; background: linear-gradient(135deg,#22d3ee,#a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stat span { font-size: 13px; color: #8d9bc4; }

.lp-section { max-width: 1100px; margin: 0 auto; padding: clamp(40px,8vh,80px) 20px; }
.lp-h2 { text-align: center; font-size: clamp(24px,4vw,38px); font-weight: 800; margin: 0 0 40px; }
.lp-features { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 18px; }
.lp-feat { padding: 26px 22px; border-radius: 16px; background: rgba(20,27,52,.5); border: 1px solid rgba(120,140,220,.15);
  backdrop-filter: blur(10px); transition: transform .2s, border-color .2s, box-shadow .2s; }
.lp-feat:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.5); box-shadow: 0 16px 50px rgba(34,211,238,.15); }
.lp-feat .fi { font-size: 30px; margin-bottom: 14px; }
.lp-feat h3 { margin: 0 0 8px; font-size: 17px; }
.lp-feat p { margin: 0; color: #9fb0d9; font-size: 14px; line-height: 1.55; }

.lp-products { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 18px; }
.lp-prod { padding: 24px; border-radius: 16px; background: linear-gradient(160deg, rgba(30,40,75,.6), rgba(15,20,40,.6));
  border: 1px solid rgba(120,140,220,.18); position: relative; overflow: hidden; }
.lp-prod::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,#22d3ee,#a855f7); }
.lp-prod h3 { margin: 0 0 6px; font-size: 18px; }
.lp-prod .cat { color: #8d9bc4; font-size: 12px; margin-bottom: 16px; }
.lp-prod .price { font-size: 26px; font-weight: 800; color: #22d3ee; }
.lp-prod .price small { font-size: 13px; color: #8d9bc4; font-weight: 400; }
.lp-prod .stockline { margin: 12px 0 18px; font-size: 13px; color: #9fb0d9; }
.lp-prod .instock { color: var(--accent); }
.lp-prod .oos { color: var(--error); }
.lp-prod .lp-btn { width: 100%; }

.lp-foot { text-align: center; padding: clamp(50px,10vh,100px) 20px 50px; border-top: 1px solid rgba(120,140,220,.12); margin-top: 30px; }
.lp-foot-cta h2 { font-size: clamp(24px,4vw,36px); margin: 0 0 24px; }
.lp-foot-name, .lp-foot .muted { margin-top: 40px; }
.auth-back { color: #8d9bc4; cursor: pointer; text-decoration: none; font-size: 13px; margin-right: auto; }
.auth-back:hover { color: #22d3ee; }
.lang-row { display: flex; align-items: center; gap: 10px; }

/* ==== Quản lý khách (role/ban/delete) ==== */
.manage-grid { display: flex; flex-direction: column; gap: 14px; }
.mg-sec { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0e1428; }
.mg-sec strong { display: block; margin-bottom: 4px; }
.mg-sec .btn-row { margin-top: 8px; gap: 8px; }
.mg-sec select, .mg-sec input { padding: 7px 10px; background: #151b31; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); }
.mg-sec input { flex: 1; }
.row-banned { opacity: .6; }
.row-banned strong { text-decoration: line-through; }
.subtab { } /* giữ */

/* ==== Bảo hành ==== */
.acc-tags { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; white-space: nowrap; }
.accline { display: flex; align-items: center; gap: 8px; }
.wck { font-size: 12px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wck input { cursor: pointer; }
.warranty-bar { margin-top: 12px; padding: 12px; border: 1px dashed var(--warn); border-radius: 10px; background: rgba(240,147,43,.06); }
.warranty-bar input { width: 100%; margin: 8px 0; padding: 7px 10px; background: #0e1428; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); }