/* ================================================================
   Cổng Liên ngành — design tokens & custom styling
   Aesthetic: editorial / legal / official, paper-warm background
   ================================================================ */

:root {
  --paper:    #FAF7F0;
  --paper-2:  #F3EDDF;
  --ink:      #1A1F2E;
  --ink-soft: #4B556B;
  --navy:     #0B2545;
  --navy-2:   #1F3C70;
  --rule:     #DDD3BC;
  --crimson:  #BE1E2D;
  --ember:    #D97706;
  --forest:   #15803D;
}

html, body { background-color: var(--paper); }

/* Subtle paper grain — gives the surface depth without being noisy */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,37,69,0.06) 1px, transparent 0);
  background-size: 24px 24px;
}
#root { position: relative; z-index: 1; }

/* Typography refinements */
.font-display { font-family: 'Crimson Pro', Georgia, serif; letter-spacing: -0.01em; }
.eyebrow {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.smallcaps {
  font-variant: all-small-caps;
  letter-spacing: 0.08em;
}

/* Editorial rule line — used for section dividers */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule-double {
  border: 0;
  border-top: 3px double var(--rule);
}

/* Card surface */
.surface {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* Subtle table */
.tbl {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.tbl thead th {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.tbl tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  vertical-align: top;
}
.tbl tbody tr:hover { background: rgba(243,237,223,0.45); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pill.delivered { color: #15803D; background: rgba(21,128,61,0.06); }
.pill.overdue   { color: #991B1F; background: rgba(190,30,45,0.06); }
.pill.pending   { color: #B45309; background: rgba(217,119,6,0.06); }
.pill.neutral   { color: #4B556B; background: rgba(75,85,107,0.06); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--navy);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--navy-2); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,0.04); }
.btn-link {
  background: transparent;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 0;
}
.btn-link:hover { color: var(--crimson); }

/* Inputs */
.field {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31,60,112,0.10);
}

/* Header masthead — newspaper-style nameplate */
.masthead {
  border-top: 1px solid var(--rule);
  border-bottom: 3px double var(--rule);
  background: var(--paper);
}

/* Inline SVG sizing */
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon-lg { width: 20px; height: 20px; }

/* Animations */
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fade-in 0.3s ease-out; }

/* Login screen accent */
.login-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(11,37,69,0.04),
    0 24px 48px -24px rgba(11,37,69,0.18);
}

/* Stat card */
.stat-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--navy));
}
.stat-card .num {
  font-family: 'Crimson Pro', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.stat-card .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}