/* ============================================================
   tk.css — portal CTV /tk/ (tự chứa, không CDN — CSP 'self')
   Giao diện sáng, navy accent khớp trang chủ.
   ============================================================ */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/assets/fonts/be-vietnam-pro-400-full.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/assets/fonts/be-vietnam-pro-600-full.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/assets/fonts/be-vietnam-pro-700-full.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --navy: #0A0F1E;
  --accent: #1D4ED8;
  --accent-soft: #EFF4FF;
  --bg: #F5F7FB;
  --card: #FFFFFF;
  --line: #E3E8F0;
  --ink: #17233B;
  --muted: #64748B;
  --ok: #15803D; --ok-bg: #ECFDF3;
  --warn: #B45309; --warn-bg: #FFF7E6;
  --bad: #B91C1C; --bad-bg: #FEF1F1;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.55 "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
a { color: var(--accent); }

.boot { display:flex; gap:10px; align-items:center; justify-content:center; padding:80px 0; color:var(--muted); }
.spin { width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:sp 1s linear infinite;display:inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------- login ---------- */
.login-wrap { max-width: 420px; margin: 9vh auto 0; padding: 0 16px; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; text-align: center; box-shadow: 0 12px 32px rgba(10,15,30,.06); }
.login-logo { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #E8A33D; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; margin-bottom: 14px; }
.login-card h1 { font-size: 20px; margin: 0 0 6px; }
.login-card p.sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 600; color: var(--ink); text-decoration: none; transition: box-shadow .15s ease; }
.btn-google:hover { box-shadow: 0 4px 14px rgba(10,15,30,.10); }
.btn-google svg { width: 18px; height: 18px; }
.login-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

.alert { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; text-align: left; }
.alert-bad { background: var(--bad-bg); color: var(--bad); border: 1px solid #F5C6C6; }
.alert-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #F0DCAE; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #BEE7CC; }

/* ---------- shell ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
.tb-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tb-brand .logo { width: 30px; height: 30px; border-radius: 8px; background: #fff2; color:#E8A33D; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.tb-tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tb-tab { color: #CBD5E1; text-decoration: none; padding: 7px 12px; border-radius: 8px; font-size: 13.5px; white-space: nowrap; }
.tb-tab:hover { background: #ffffff14; color: #fff; }
.tb-tab.active { background: #ffffff1f; color: #fff; font-weight: 600; }
.tb-me { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.tb-me .avatar { width: 30px; height: 30px; border-radius: 50%; background: #E8A33D; color: var(--navy); display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.tb-quota { background:#ffffff14; padding:3px 10px; border-radius:999px; font-size:12px; color:#CBD5E1; }
.btn-out { background:none; border:1px solid #ffffff38; color:#E2E8F0; border-radius:8px; padding:5px 10px; cursor:pointer; font-size:12.5px; }
.btn-out:hover { background:#ffffff14; }
.btn-accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover { background:#1E40AF; }
.btn-cancel { color:var(--ink); border-color:var(--line); }

.main { max-width: 1040px; margin: 22px auto 60px; padding: 0 16px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 16px; }
.card h2 { margin: 0 0 4px; font-size: 17px; }
.card .hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.card-trust-pending { border-left:4px solid var(--warn); margin-bottom:16px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- form ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.grid .span2 { grid-column: span 2; }
@media (max-width: 640px) { .grid .span2 { grid-column: span 1; } .tb-me .email { display:none; } }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; background: #fff; color: var(--ink);
}
.input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea.input { resize: vertical; min-height: 70px; }
.price-preview { grid-column: 1 / -1; background: var(--accent-soft); border: 1px solid #D7E3FF; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.price-preview b { font-size: 17px; color: var(--accent); }
.price-preview.bad { background: var(--bad-bg); border-color:#F5C6C6; }
.price-preview.bad b { color: var(--bad); }
.form-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.excel-guide { color:var(--muted); font-size:13.5px; margin-top:0; }
.upload-drop { border:2px dashed var(--line); border-radius:12px; padding:26px; text-align:center; color:var(--muted); cursor:pointer; }
.upload-drop.is-dragover { border-color:var(--accent); }
.valid-count { color:var(--ok); }
.error-count, .error-message { color:var(--bad); }
.excel-submit-foot { margin-top:14px; }
.btn-primary { background: var(--accent); color:#fff; border:0; border-radius: 9px; padding: 10px 22px; font-weight:600; font-size:14.5px; cursor:pointer; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary[disabled] { opacity:.55; cursor:not-allowed; }
.req { color: var(--bad); }
.conf-guide { font-size: 12.5px; color: var(--muted); margin-top: 4px; min-height: 18px; }

/* ---------- bảng & trạng thái ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.b-pending { background:var(--warn-bg); color:var(--warn); }
.b-approved { background:var(--ok-bg); color:var(--ok); }
.b-rejected { background:var(--bad-bg); color:var(--bad); }
.b-superseded { background:#EEF1F6; color:var(--muted); }
.note-why { display:block; color:var(--bad); font-size:12.5px; margin-top:3px; }
.record-submeta { color:var(--muted); font-size:12px; }
.action-cell, .lookup-actions { text-align:right; }
.edit-card { border-left:4px solid var(--accent); }
.lookup-grid { margin-bottom:14px; }
.lookup-table-wrap { overflow:auto; max-height:62vh; border:1px solid var(--line); border-radius:10px; }
.lookup-table { min-width:640px; }
.lookup-segment { color:var(--muted); font-size:12px; }
.empty { text-align:center; color:var(--muted); padding: 40px 0; }

/* ---------- toast ---------- */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 99; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--navy); color:#fff; padding: 11px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: pop .18s ease; max-width: 360px; }
.toast.ok { background: #14532D; } .toast.bad { background: #7F1D1D; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

.placeholder { text-align:center; color:var(--muted); padding:56px 0; }
.placeholder .big { font-size: 40px; margin-bottom: 8px; }