/* ===================== Variables & Base ===================== */
:root{
  --blue:#0b63d0; --blue2:#1098f7; --bg:#0b63d0;
  --panel:#fff; --text:#0f172a; --muted:#5b6b85; --ring:#e8f1ff;
  --orange:#ffa51f; --orange2:#ff8a15; --ok:#167a39; --err:#b23535;
  --shadow:0 14px 38px rgba(11,99,208,.18);
}
*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:#fff;
}
.wrap{display:flex;min-height:100vh;overflow-x:hidden}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.hamburger{display:none;background:transparent;border:0;color:#fff;font-size:26px;cursor:pointer}
@media (max-width:960px){.hamburger{display:inline-block}}

/* ===================== Sidebar ===================== */
.sidenav{
  width:260px;min-height:100vh;background:linear-gradient(160deg,#2f73d9,#2e6bd1);
  padding:18px 14px;position:sticky;top:0;z-index:30;transition:transform .25s;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}
.sidenav .brand{display:flex;justify-content:center;margin:6px 0 16px}
.sidenav .brand img{height:56px;width:auto}
.nav{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.nav-item{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.06);padding:12px 14px;border-radius:14px;
  transition:.18s;box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.nav-item .ico{width:28px;height:28px;display:grid;place-items:center;background:rgba(255,255,255,.12);border-radius:9px}
.nav-item .ico svg{width:18px;height:18px;fill:currentColor;color:#fff}
.nav-item:hover{background:#2b64c7;transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.15)}
.nav-item.is-active{background:#255bb8}
@media (max-width:960px){.sidenav{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%)}.sidenav.open{transform:none}}

/* ===================== Buttons ===================== */
.btn,.btn-pri,.auth-btn,.login-btn,.register-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--orange),var(--orange2));
  color:#fff;border:0;border-radius:12px;padding:10px 18px;
  text-decoration:none;font-weight:800;box-shadow:0 6px 18px rgba(255,165,31,.35);
  transition:transform .2s,filter .2s;text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.btn:hover,.btn-pri:hover,.auth-btn:hover,.login-btn:hover,.register-btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-sec{border:0;border-radius:10px;padding:10px 14px;background:#e9eef7;color:#0b1b3a;cursor:pointer}
.btn-danger{background:#ffe8e8;border:1px solid #ffc8c8;color:#b02525;border-radius:10px;padding:6px 9px;font-weight:700}

/* ===================== Forms / Inputs ===================== */
.form{display:flex;gap:10px;flex-wrap:wrap;background:#f6f9ff;border-radius:14px;padding:10px}
.input,.date,.select{
  background:#fff;border:1px solid #cbd8f3;border-radius:12px;padding:10px 12px;color:var(--text);outline:none;
}
.input::placeholder,.date::placeholder{color:#8a96ad}
.input:focus,.date:focus,.select:focus{border-color:#5d8dff;box-shadow:0 0 0 4px rgba(93,141,255,.18)}
.input-wrap{position:relative}
.icon-left{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6d7e96;display:grid;place-items:center;pointer-events:none}
.input.has-icon{padding-left:46px}
.pwd-wrap{position:relative}
.toggle-pwd{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#6d7e96;cursor:pointer}

/* ===================== Cards / Containers ===================== */
.center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.card{width:min(680px,94vw);background:var(--panel);color:var(--text);border-radius:20px;padding:28px 26px;box-shadow:var(--shadow)}
.card.narrow{width:min(560px,94vw)}
.logo-mini{display:block;margin:4px auto 20px;height:38px;opacity:.95}
.msg{background:#eafff1;border:1px solid #98e3b0;color:var(--ok);padding:10px 12px;border-radius:10px;margin:10px 0 0}
.msg.error,.msg.er{background:#fff3f3;border:1px solid #ffb0b0;color:var(--err)}

/* ===================== Marketing / Hero ===================== */
.section{padding:36px 4vw}
.hero{padding:10px 4vw 0;display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.h1{font-size:clamp(26px,4.2vw,44px);font-weight:900;margin:8px 0 8px}
.sub{color:#eaf2ff;max-width:720px}
.panel{background:#fff;border:1px solid #e3eaf7;border-radius:16px;padding:16px;color:var(--text)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.badge{background:#ffffff2a;border:1px solid #ffffff55;color:#fff;border-radius:999px;padding:6px 10px}
.cta a{display:inline-block;margin-right:10px;background:#fff;color:var(--blue);font-weight:800;padding:12px 18px;border-radius:12px;text-decoration:none}

/* Grids / Stats */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.stat{background:#f0f6ff;color:#16305b;border-radius:16px;padding:18px;text-align:center}
.stat .num{font-weight:900;font-size:clamp(26px,3.6vw,44px)}
.stat .lbl{color:#294163}
@media (max-width:980px){.grid,.stats,.hero{grid-template-columns:1fr}}

/* ===================== Dashboard: Stat Cards + Toolbar ===================== */
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dash-card{display:flex;gap:14px;align-items:center;background:#f6f9ff;border:1px solid #e3eaf7;border-radius:16px;padding:16px 18px}
.dash-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e9f1ff;color:#0b63d0}
.dash-icon svg{width:24px;height:24px}
.dash-meta .dash-label{color:var(--muted);font-size:12px}
.dash-meta .dash-val{font-size:24px;font-weight:800;color:var(--text)}
.toolbar .row{gap:10px;align-items:center}
@media (max-width:980px){.dash-grid{grid-template-columns:1fr}.toolbar .row{flex-wrap:wrap}.toolbar .row>*{flex:1 1 100%}.select,.btn,.btn-sec{width:100%}}

/* ===================== Table Modern ===================== */
.table-wrap{background:#fff;border-radius:14px;box-shadow:var(--shadow);border:1px solid #e3eaf7;overflow:auto;margin-top:16px}
table{width:100%;border-collapse:collapse;min-width:860px}
th,td{padding:12px 10px;border-bottom:1px solid #eef2ff;color:var(--text)}
thead th{position:sticky;top:0;background:#f2f6ff;color:#193a6a;text-align:left;font-weight:800;border-bottom:1px solid #dfe8fb}
.table-modern tbody tr:hover{background:#fafcff}
.row-expired{background:#fff7f7}
.badge-err{background:#ffe6e6;border:1px solid #ffcdcd;color:#b00808}
.table a,.table .input,.cell-grow,.mono{word-break:break-word;overflow-wrap:anywhere}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Action buttons */
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.icon-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid #e7edff;background:#fff;
  display:inline-grid;place-items:center;cursor:pointer;transition:transform .12s,box-shadow .12s;
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(36,63,133,.12)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.save{background:#e7f8ef;border-color:#b8f0d1;color:#0b8f4c}
.icon-btn.copy{background:#eef6ff;border-color:#cfe4ff;color:#1c66ff}
.icon-btn.danger{background:#fff1f1;border-color:#ffd6d6;color:#d11a2a}
.icon-btn.more{background:#f6f8ff;border-color:#e4ebff;color:#6471a0}

/* Code badge + link clip */
.code-badge{
  display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#eff4ff,#e7edff);
  border:1px solid #c9d6ff;color:#1f3a8a;font-weight:700;font-family:ui-monospace,monospace;
  border-radius:999px;padding:4px 10px;line-height:1;
}
.clip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ======= Responsive table -> card (mobile) ======= */
@media (max-width:760px){
  .table-wrap{border:0;background:transparent;overflow:visible}
  .table-modern thead{display:none}
  .table-modern,.table-modern tbody,.table-modern tr,.table-modern td{display:block;width:100%}
  .table-modern tr{
    background:#fff;border:1px solid #dfe7ff;border-radius:16px;
    padding:12px 14px;margin:14px 0;box-shadow:0 4px 14px rgba(36,63,133,.08);
  }
  .table-modern td{
    padding:10px 0;border-bottom:1px dashed #e8eeff;
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  }
  .table-modern td:last-child{border-bottom:0}
  .table-modern td::before{
    content:attr(data-label);font-weight:700;color:#3b4a6b;flex:none;max-width:none;margin:0;
  }
  .table-modern td>*:not(form){width:100%;flex:none;min-width:0}
  .table-modern .input,.table-modern .date{min-height:40px}
  /* Ẩn bớt trường phụ – mở bằng “•••” */
  .table-modern td[data-key="select"],
  .table-modern td[data-key="created"],
  .table-modern td[data-key="click"]{display:none}
  .table-modern tr.open td[data-key="select"],
  .table-modern tr.open td[data-key="created"],
  .table-modern tr.open td[data-key="click"]{display:flex}
  .table-modern td[data-key="actions"] .more{display:inline-grid;margin-left:auto}
}
@media (max-width:560px){
  .table-modern td[data-key="url"]{display:none}
  .table-modern tr.open td[data-key="url"]{display:flex}
}

/* ===================== CTA bottom / FAQ (nhẹ) ===================== */
.faq{padding:4px 4vw 46px}
.faq details{background:#ffffff18;border:1px solid #ffffff3a;border-radius:12px;margin-bottom:10px;padding:12px 14px}
.faq summary{cursor:pointer;font-weight:800}
.cta-bottom{padding:24px 4vw 60px;text-align:center}
.cta-title{font-weight:900;font-size:clamp(22px,3.8vw,36px);margin:8px 0 10px}
.cta-sub{color:#e9f1ff;margin-bottom:16px}
.cta-actions a{display:inline-block;margin:6px;background:linear-gradient(90deg,var(--orange),var(--orange2));color:#fff;font-weight:900;text-decoration:none;padding:12px 18px;border-radius:12px;box-shadow:0 6px 18px rgba(255,165,31,.35)}

/* ===================== Overlay / Toast / Modal ===================== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:20}
.overlay.show{display:block}
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:#34ca69;color:#fff;padding:10px 16px;border-radius:10px;display:none;z-index:99999}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:9999}
.modal{background:#fff;border-radius:16px;box-shadow:0 10px 40px #0003;max-width:420px;width:92%;padding:22px;color:var(--text)}
.modal h3{margin:0 0 8px;color:#0d47a1}
.modal p{margin:0 0 16px}
.actions{display:flex;gap:10px;justify-content:flex-end}

/* ===================== Minor Tweaks ===================== */
.card .input,.card .date,.card .select{width:100%}
.badge{border-radius:999px}
/* ===== Auth pages (login/register) ===== */
.auth-page .wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 24px 16px;
}

.auth-page .sidenav,
.auth-page .topbar {
  display: none;
}

.auth-card,
.auth-page .card {
  width: min(560px, 96vw);
  margin: 0 auto;
  background: #fff;
  color: #0f172a;
  border: 1px solid #e6ecfb;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 18px 40px rgba(11, 99, 208, .18);
}

.auth-page .card h1 {
  margin: 0 0 6px 0;
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 28px);
  color: #0f1e4b;
  letter-spacing: .2px;
}
.auth-page .logo-mini{
  display:block; height:40px; margin:8px auto 18px auto; opacity:.96;
}

/* Input group with icons */
.auth-page .field{ margin-bottom:12px; }
.auth-page .input-wrap{ position:relative; }
.auth-page .icon-left{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#6d7e96; display:grid; place-items:center; pointer-events:none;
}
.auth-page .toggle-pwd{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; color:#6d7e96;
  display:grid; place-items:center;
}
.auth-page .input,
.auth-page .date,
.auth-page .select{
  width:100%;
  height:46px;
  background:#fff;
  border:1px solid #cbd8f3;
  border-radius:12px;
  padding:10px 12px;
  color:#0f172a;
}
.auth-page .input.has-icon{ padding-left:44px; }
.auth-page .input.pad-right{ padding-right:44px; }
.auth-page .input::placeholder{ color:#90a0b6; }
.auth-page .input:focus,
.auth-page .date:focus,
.auth-page .select:focus{
  border-color:#5d8dff;
  box-shadow:0 0 0 4px rgba(93,141,255,.18);
}

/* Primary button */
.auth-page .btn-primary{
  width:100%;
  justify-content:center;
  height:46px;
  border-radius:12px;
  background:linear-gradient(90deg, var(--orange), var(--orange2));
  color:#fff;
  border:0;
  box-shadow:0 8px 20px rgba(255,165,31,.35);
  font-weight:800;
  letter-spacing:.2px;
}
.auth-page .btn-primary:hover{ filter:brightness(.96); transform:translateY(-1px); }

/* Sub link */
.auth-page .foot{
  margin-top:10px; text-align:left; color:#506186;
}
.auth-page .foot .link{ color:var(--blue); text-decoration:none; font-weight:800; }
.auth-page .msg{ margin-top:10px; }

/* Responsive fine-tuning */
@media (max-width:460px){
  .auth-page .card{ padding:22px 18px; }
  .auth-page .btn-primary{ height:44px; }
}