/* =====================================================================
   theme.css — Brand dùng chung (navy / gold) cho TẤT CẢ trang trong.
   Cách dùng: thay khối <style> cũ của mỗi trang bằng:
       <link rel="stylesheet" href="theme.css">
   (đặt TRƯỚC mobile.css để mobile.css vẫn đè ở màn hình nhỏ)
   Đồng bộ tông màu với index.php.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy:#0A1B3D; --navy-700:#0E2552; --navy-900:#061229;
  --gold:#E2B53C; --gold-deep:#C2912A; --gold-soft:#F4E2A8;
  --paper:#F5F7FB; --white:#fff;
  --ink:#16223D; --slate:#586A8C; --line:#E4E9F3;
  --ok:#0F7A4F; --ok-bg:#DCF3E7; --danger:#B4271F; --danger-bg:#FBE0DE;
  --warn:#92600A; --warn-bg:#FBEFD0; --info:#1D5FB0; --info-bg:#DDEAFB;
  --ups:#FFB500; --ups-ink:#3B2410; --fedex:#4D148C; --fedex-2:#FF6600;
  --shadow:0 14px 40px -22px rgba(8,20,45,.45);
}

*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--paper);color:var(--ink);
     margin:0;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Sora,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
a{color:var(--navy);text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- Brand logo (thanh trên + auth) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-family:Sora;
       font-weight:800;font-size:15px;letter-spacing:.01em;line-height:1}
.brand .mk{width:34px;height:34px;flex:0 0 auto}
.brand small{display:block;font-weight:600;font-size:9px;letter-spacing:.18em;
             color:var(--gold-deep);text-transform:uppercase;margin-top:3px}
.brand-auth{justify-content:center;margin:0 auto 18px;display:flex}

/* ---------- Thanh trên cùng (top bar) ---------- */
.top{background:var(--navy);color:#fff;padding:14px 28px;display:flex;align-items:center;
     gap:18px;border-bottom:3px solid var(--gold)}
.top .brand{color:#fff}
.top .brand small{color:var(--gold-soft)}
.top .top-mid{margin-right:auto;font-size:14px;color:#D6E0F2}
.top .top-mid b{color:#fff}
.top a{color:#C7D2E8;font-size:14px}
.top a:hover{color:var(--gold-soft)}
.top a.brand:hover{color:#fff}

/* Nút chuyển ngôn ngữ EN/VI (dùng chung cho .top và trang auth) */
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.22);border-radius:9px;overflow:hidden;
      font-family:Sora;font-weight:700;font-size:12.5px}
.lang a{padding:6px 10px;color:#C7D2E8;letter-spacing:.04em;text-decoration:none}
.lang a.active{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2A1D02}
.lang a:not(.active):hover{color:#fff}
/* Trên trang auth (nền sáng) đặt nút ở góc trên cùng */
.lang-auth{position:absolute;top:18px;right:18px}
.lang-auth a{color:#5B6B89}
.lang-auth{border-color:rgba(0,0,0,.14)}

/* ---------- Khung nội dung ---------- */
.wrap{max-width:920px;margin:30px auto;padding:0 20px}
h1{font-size:22px;margin:0 0 6px}
h2{font-size:16px;margin:28px 0 14px;color:var(--ink)}

/* ---------- Auth box (login / register) ---------- */
body.auth{display:flex;flex-direction:column;align-items:center;justify-content:center;
          min-height:100vh;padding:24px}
.box{background:var(--white);padding:34px 32px;border-radius:16px;width:360px;max-width:100%;
     border:1px solid var(--line);box-shadow:var(--shadow)}
.box h1{font-size:22px;margin:0 0 4px}
.sub{color:var(--slate);font-size:13px;margin-bottom:22px}
.hint{font-size:11.5px;color:var(--slate);margin-top:5px}
.foot{text-align:center;margin-top:18px;font-size:13px;color:var(--slate)}
.foot a,.box .sub a{color:var(--gold-deep);font-weight:600}

/* ---------- Form fields ---------- */
label{display:block;font-size:12.5px;margin:14px 0 6px;color:var(--slate);font-weight:500}
input,select,textarea{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--line);
     background:#fff;color:var(--ink);font-size:14px;box-sizing:border-box;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,181,60,.18)}
textarea{resize:vertical;min-height:70px}
input[type=file]{padding:9px;background:var(--paper)}

/* ---------- Buttons ---------- */
.btn,.box button,.buy-btn{font-family:Sora;font-weight:700;cursor:pointer;border:0;
     border-radius:10px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
     display:inline-flex;align-items:center;justify-content:center;gap:8px}
.box button{width:100%;margin-top:22px;padding:13px;font-size:15px;
     background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2A1D02;
     box-shadow:0 8px 22px -10px rgba(226,181,60,.8)}
.btn{padding:11px 20px;font-size:14px;background:var(--navy);color:#fff;text-decoration:none}
.btn:hover{background:var(--navy-700)}
.btn:active,.box button:active,.buy-btn:active{transform:translateY(1px)}
.btn-green{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2A1D02}
.btn-green:hover{filter:brightness(1.03);background:var(--gold)}
.btn-blue{background:var(--navy)}.btn-blue:hover{background:var(--navy-700)}
.btn-red{background:var(--danger)}.btn-red:hover{filter:brightness(1.07)}
.btn-gray{background:#E7ECF5;color:var(--ink)}.btn-gray:hover{background:#dbe2ee}

/* ---------- Balance card (dashboard) ---------- */
.balance{background:linear-gradient(135deg,var(--navy),var(--navy-900));border:1px solid var(--navy-700);
     border-radius:16px;padding:24px 28px;margin-bottom:28px;display:flex;
     justify-content:space-between;align-items:center;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.balance::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
     background:radial-gradient(circle,rgba(226,181,60,.25),transparent 70%)}
.balance .label{color:var(--gold-soft);font-size:13px}
.balance .num{font-family:Sora;font-size:34px;font-weight:800;margin-top:4px}
.balance .btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.32);position:relative;z-index:1}
.balance .btn:hover{background:rgba(255,255,255,.22)}
.balance .btn-green{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2A1D02;border:0}
.balance .btn-green:hover{filter:brightness(1.03)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;
      font-size:13.5px;box-shadow:var(--shadow);border:1px solid var(--line)}
th{background:var(--paper);text-align:left;padding:12px 14px;color:var(--slate);font-weight:600;font-size:12px}
td{padding:13px 14px;border-top:1px solid var(--line)}
.empty{color:var(--slate);padding:20px;text-align:center}
.dl{color:var(--ok);font-weight:600}.dl:hover{text-decoration:underline}
.wait{color:var(--slate)}
.credit{color:var(--ok);font-weight:600}
.debit{color:var(--danger);font-weight:600}

/* ---------- Pills / badges ---------- */
.pill{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;display:inline-block}
.badge{background:var(--gold-soft);color:var(--gold-deep);font-size:12px;font-weight:700;
       padding:2px 10px;border-radius:999px;margin-left:8px}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px;
      box-shadow:var(--shadow)}
.card h2{font-size:14px;margin:0 0 14px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Redeem gift code ---------- */
.redeem-sub{margin:0 0 14px;color:var(--slate);font-size:14px}
.redeem-form{display:flex;gap:10px;flex-wrap:wrap}
.redeem-form input{flex:1 1 240px;min-width:0;padding:13px 15px;border:1px solid var(--line);
                   border-radius:10px;font-family:'IBM Plex Mono',monospace;font-size:17px;
                   font-weight:600;letter-spacing:3px;text-transform:uppercase}
.redeem-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,181,60,.18)}
.redeem-form .btn{flex:0 0 auto}
@media (max-width:560px){
  .redeem-form{flex-direction:column}
  .redeem-form .btn{width:100%}
}

/* ---------- Alerts ---------- */
.tb{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:14px}
.tb.ok{background:var(--ok-bg);border:1px solid #9fd9bf;color:#0c5c3b}
.tb.loi{background:var(--danger-bg);border:1px solid #f0b3ae;color:#8e1d17}
.loi{background:var(--danger-bg);border:1px solid #f0b3ae;color:#8e1d17;
     padding:10px 12px;border-radius:9px;font-size:13px;margin-top:16px}
.note{font-size:12px;color:var(--slate);margin-top:6px;line-height:1.6}
.muted{color:var(--slate)}
.price-err{color:var(--danger);font-size:13px}

/* ---------- Deposit (tabs / amounts / address boxes) ---------- */
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{flex:1;text-align:center;padding:12px;border:1px solid var(--line);border-radius:10px;
     cursor:pointer;font-weight:600;background:#fff;color:var(--slate);user-select:none}
.tab.active{background:var(--navy);border-color:var(--navy);color:#fff}
.pane{display:none}.pane.active{display:block}
.amounts{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.amt{flex:1;min-width:60px;text-align:center;padding:11px 0;border:1px solid var(--line);
     border-radius:9px;cursor:pointer;font-weight:600;background:#fff;color:var(--ink);user-select:none}
.amt:hover{border-color:var(--gold)}
.amt.active{background:var(--gold-soft);border-color:var(--gold-deep);color:#3a2c05}
.addr-box{background:var(--paper);border:1px dashed var(--navy);border-radius:10px;padding:14px;margin-top:8px;display:none}
.addr-box.show{display:block}
.addr-val{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--navy);word-break:break-all;font-weight:600}
.zelle-box{background:var(--paper);border:1px dashed var(--fedex);border-radius:10px;padding:14px;margin-top:6px}
.zelle-email{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--fedex);font-weight:600}
.copy{background:var(--navy);border:0;color:#fff;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:12px;margin-left:8px}

/* ---------- Tickets list + chat ---------- */
.tk-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
        border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:#fff;
        color:inherit;box-shadow:var(--shadow)}
.tk-row:hover{border-color:var(--gold)}
.tk-sub{font-weight:600}
.tk-date{font-size:12px;color:var(--slate)}
.msg{max-width:75%;padding:11px 14px;border-radius:14px;margin-bottom:10px;font-size:14px;line-height:1.5}
.msg .who{font-size:11px;color:var(--slate);margin-bottom:3px}
.msg.me,.msg.shop{background:var(--navy);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg.me .who,.msg.shop .who{color:var(--gold-soft)}
.msg.them,.msg.cust{background:#EDF1F8;color:var(--ink);margin-right:auto;border-bottom-left-radius:4px}
.msg .time{font-size:10px;color:var(--slate);margin-top:4px}
.msg.me .time,.msg.shop .time{color:#9DAECB}
.back{font-size:13px;color:var(--gold-deep);font-weight:600}

/* ---------- Buy page ---------- */
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.bal{background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:10px;font-size:14px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.full{grid-column:1/-1}
.fast-note{display:flex;align-items:center;gap:8px;margin:12px 0;padding:11px 15px;
           background:rgba(226,181,60,.28);border:1px solid rgba(226,181,60,.55);
           border-radius:12px;color:#1a1a1a;
           font-size:13.5px;font-weight:800;line-height:1.4}
.fast-note svg{flex:0 0 auto;width:14px;height:14px;color:#1a1a1a}
.buy-bar{display:flex;justify-content:space-between;align-items:center;
         background:linear-gradient(135deg,var(--navy),var(--navy-900));color:#fff;
         border:1px solid var(--navy-700);border-radius:14px;padding:18px 22px;box-shadow:var(--shadow)}
.price-big{font-family:Sora;font-size:30px;font-weight:800}
.price-sub{font-size:12px;color:var(--gold-soft);margin-top:2px}
.buy-btn{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2A1D02;
         padding:14px 42px;font-size:16px}
.buy-btn:disabled{background:#3a4a6b;color:#9DAECB;cursor:not-allowed}
.buy-btn:not(:disabled):hover{filter:brightness(1.03)}

/* ---------- Admin specifics ---------- */
.row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-end}
.info{font-size:13.5px;line-height:1.7;color:var(--ink)}
.info b{color:var(--ink)}
.upload-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:12px;
            padding-top:14px;border-top:1px solid var(--line)}
form.inline,.inline{display:inline}
.admin h2{border-left:3px solid var(--gold);padding-left:10px}

/* =====================================================================
   RESPONSIVE — đồng bộ cho mọi trang trong (gồm cả admin, vốn không
   nạp mobile.css). Tối ưu thao tác chạm: ô nhập to, xếp 1 cột, nút
   full-width, bảng cuộn ngang, thanh top gọn.
   ===================================================================== */
@media (max-width:640px){
  .wrap{padding:0 16px;margin:20px auto}
  h1{font-size:19px}
  h2{font-size:15px;margin:22px 0 12px}

  /* --- Thanh trên: logo + link ở hàng 1, tiêu đề/lời chào xuống hàng 2 --- */
  .top{padding:12px 16px;gap:8px 12px;flex-wrap:wrap;align-items:center}
  .top .brand{font-size:14px;margin-right:auto}
  .top .brand .mk{width:30px;height:30px}
  .top .brand small{display:none}
  .top .top-mid{order:3;flex-basis:100%;font-size:14px;margin:0}

  /* --- Form: chống iOS tự phóng to, ô nhập thoáng hơn --- */
  input,select,textarea{font-size:16px}
  label{margin-top:12px}

  /* Lưới From/To/Package -> 1 cột (D×R×C giữ 3 cột nhờ inline style) */
  .grid{grid-template-columns:1fr}

  /* --- Dashboard: thẻ số dư xếp dọc, 2 nút chia đều 1 hàng --- */
  .balance{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .balance .num{font-size:30px}
  .balance>div:last-child{display:flex;gap:10px}
  .balance .btn{flex:1;text-align:center;padding:12px 10px}

  /* --- Bảng nhiều cột -> cuộn ngang thay vì vỡ --- */
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* --- Mua label: thanh giá + nút BUY xuống cột, nút full-width --- */
  .bar{flex-wrap:wrap;gap:10px}
  .buy-bar{flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .buy-btn{width:100%;padding:15px}
  .price-big{font-size:28px}

  /* --- Nạp tiền: 4 nút mức tiền luôn vừa 1 hàng --- */
  .amt{min-width:0;flex:1}
  .tab{padding:11px 8px;font-size:13.5px}

  /* --- Hỗ trợ: bong bóng chat rộng hơn --- */
  .msg{max-width:90%}

  /* --- Admin: hàng upload + hàng info + form mã giảm xuống cột --- */
  .upload-row{flex-direction:column;align-items:stretch;gap:12px}
  .upload-row>div{width:100%}
  .upload-row input,.upload-row select,.upload-row .btn{width:100%}
  .row{flex-direction:column;align-items:stretch;gap:14px}
  .row form.inline,.row .info{width:100%}
  .row .btn{width:100%}
  .admin select[name="percent"],.admin input[name="max_uses"]{width:100%!important;display:block!important;margin-top:6px}
  .admin form.inline label[style]{display:block!important;margin-top:10px}

  /* --- Auth box --- */
  .box{padding:28px 22px}
}

@media (max-width:400px){
  .top .top-mid{font-size:13px}
  .balance .num{font-size:26px}
  .amounts{gap:7px}
  .tab{font-size:12.5px}
}