:root {
  --p: #5E96AE; --pl: #A6C5D2; --pd: #426979;
  --bg: #EFF5F7; --sf: #FAFCFD;
  --ac: #4C629E;
  --tx: #2D2A26; --mu: #6B6560;
  --bd: #D7E5EB;
  --gn: #2E7D5A; --gnb: #D6F0E4;
  --yw: #8A6500; --ywb: #FFF3C4;
  --rd: #B91C1C; --rdb: #FFE0E0;
  --sh: 0 2px 12px rgba(94,150,174,.10);
  --shm: 0 8px 32px rgba(94,150,174,.18);
  --r: 16px; --rs: 10px;
  --font: Cambria, Georgia, "Times New Roman", serif;

  /* alias cho cac cho dung ten bien cu trong app.js, tro ve token moi */
  --border: var(--bd);
  --radius: var(--rs);
  --accent-bg: #E4E3F4;
  --accent-text: var(--ac);
  --success-bg: var(--gnb);
  --success-text: var(--gn);
  --danger-text: var(--rd);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
}

.num { font-family: var(--font); font-variant-numeric: tabular-nums; }

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

#app {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
}

button, select, input {
  font-family: inherit;
  font-size: 14px;
}

input, select {
  border: 1px solid var(--bd);
  border-radius: var(--rs);
  padding: 9px 11px;
  background: var(--sf);
  color: var(--tx);
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--p); }

button {
  border: 1px solid var(--bd);
  border-radius: 20px;
  background: var(--sf);
  padding: 8px 14px;
  cursor: pointer;
  color: var(--mu);
  font-weight: 600;
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.55; pointer-events: none; }

.btn-primary {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}
.btn-success {
  background: var(--gn);
  color: #fff;
  border-color: var(--gn);
}

.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sh);
}

.muted { color: var(--mu); font-size: 12px; }
.secondary { color: var(--mu); font-size: 13px; }
label { font-size: 12px; font-weight: 700; color: var(--pd); display: block; margin-bottom: 3px; }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.badge { font-family: var(--font); font-size: 12px; padding: 2px 9px; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.badge-cho { background: var(--ywb); color: var(--yw); }
.badge-duyet { background: var(--gnb); color: var(--gn); }
.badge-tuchoi { background: var(--rdb); color: var(--rd); }

.segmented { display: flex; border: 1px solid var(--bd); border-radius: 20px; overflow: hidden; margin-bottom: 12px; background: var(--sf); }
.segmented button { flex: 1; min-width: 0; border: none; border-right: 1px solid var(--bd); background: transparent; font-size: 13px; padding: 8px 4px; border-radius: 0; color: var(--mu); }
.segmented button:last-child { border-right: none; }
.segmented button.active { background: var(--p); color: #fff; font-weight: 700; }

.list-item { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r); padding: 12px 14px; margin-bottom: 9px; cursor: pointer; box-shadow: var(--sh); }
.list-item .title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.list-item .title-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list-item .title-row > span:last-child { flex: none; }
.list-item p.secondary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

table.detail { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 12px; }
table.detail td { padding: 5px 0; font-size: 14px; }
table.detail td:first-child { width: 38%; color: var(--mu); }
table.detail td:last-child { width: 62%; text-align: right; font-family: var(--font); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hidden { display: none !important; }

#toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pd);
  color: #fff;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  max-width: 90vw;
  z-index: 100;
  box-shadow: var(--shm);
}