/* ============================================================
   TREN TAY — LOP SON MOI CHO NAM TRANG CONG CU CHAY THANG TREN
   TRINH DUYET (cong-cu-*.html, thu-vien-sach.html)
   ------------------------------------------------------------
   Nam trang do CO Y giu nguyen dang HTML/JS mot file — moi trang la mot
   ung dung tu chua 46-96 KB, viet lai sang React chi de "cho dong bo" la
   doi cong lay rui ro. Xem ghi chu dau moi file.
   Nhung vi vay chung van deo bo ao cua ban web CU, trong khi phan con lai
   cua app.trentay.com da chuyen sang app Next: bam tu trang chu sang mot
   cong cu la thay ro hai trang khac nhau (thanh xanh gradient, mac chu T
   tron, chan trang bo cuc khac).
   File nay chi doi CAI AO: bang mau + thanh dau trang + chan trang.
   KHONG dung mot dong nao cua ruot cong cu.

   ⚠️ Phai nap SAU `style.css` va `auth.css` — no de thang do, khong dung
   `!important` tru vai cho that su can.

   ⚠️ Che sang/toi thi dung nguyen may moc cu (`data-theme` + media
   `prefers-color-scheme`), va no VON DA khop voi app Next: ca hai cung
   doc `localStorage.theme`, cung ba gia tri light/dark/system. Da do lai
   truoc khi sua — dung "chua" cai gi o day.
   ============================================================ */

/* ---------- 1. BANG MAU: lay dung mau cua app Next ---------- */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f8fd;
  --text: #0a2540;
  --muted: #5a6b85;
  --border: #e3eaf3;
  --primary: #1b60d6;
  --primary-dark: #14459b;
  --accent: #4338ca;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(10 37 64 / 5%), 0 8px 24px rgb(10 37 64 / 6%);
  --shadow-lg: 0 12px 40px rgb(10 37 64 / 12%);
}

/* Nen khu vuc: ban cu de --bg xanh nhat (#f3f6ff) cho ca trang, ban moi
   de trang va chi to nen o tung khoi. Giu --bg trang thi vung noi dung
   cua cong cu (dung .panel) noi len duoc nho vien chu khong nho nen. */
body {
  background: var(--panel-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071120;
    --panel: #0f1d33;
    --panel-2: #152742;
    --text: #e8eef7;
    --muted: #93a4bd;
    --border: #1d3050;
    --primary: #5a9bff;
    --primary-dark: #3f7fe0;
    --accent: #818cf8;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 50%);
  }
}
:root[data-theme="dark"] {
  --bg: #071120;
  --panel: #0f1d33;
  --panel-2: #152742;
  --text: #e8eef7;
  --muted: #93a4bd;
  --border: #1d3050;
  --primary: #5a9bff;
  --primary-dark: #3f7fe0;
  --accent: #818cf8;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 50%);
}

/* ---------- 2. THANH DAU TRANG ---------- */
/* Ban cu: mot dai GRADIENT XANH DAM chay het be ngang, ben trong co o tim
   kiem va hai lien ket kem emoji. Do la thu lam trang trong "cu" nhat khi
   dat canh app Next. Nay ha xuong thanh mot dai nen khu mo nhat. */
.topbar {
  background: var(--panel-2);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.topbar a,
.topbar .support-text,
.topbar-support,
.topbar-community {
  color: var(--muted);
}
.topbar a:hover {
  color: var(--text);
}
.topbar-inner {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.86rem;
}

/* ⚠️ Bon thu duoi day duoc ve cho DAI XANH DAM: chu trang, vien trang,
   nen vang. Ha dai xuong nen sang ma khong sua chung thi nut "Dang nhap"
   hoa ra CHU TRANG TREN NEN SANG — vo hinh. Chup man hinh moi thay; nhin
   ma nguon thi khong. */
.topbar-support,
.topbar-community {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: none;
  font-weight: 500;
}
.topbar-support:hover,
.topbar-community:hover {
  background: var(--panel);
  color: var(--text);
}
.topbar .btn-ghost {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}
.topbar .btn-ghost:hover {
  background: var(--panel-2);
}
/* Nut chinh o day tung mau CAM — mau do khong co trong bang mau cua app
   Next, dat canh nhau la thay ngay hai trang khac he. */
.topbar .btn-primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  box-shadow: none;
}
.topbar .btn-primary:hover {
  background: var(--primary-dark);
}
.topbar .icon-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
}

/* O tim kiem: bo vien tron cho khop o nhap cua app Next */
.topbar-search input {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px 0 0 8px;
}
.topbar-search button {
  border: 1px solid var(--border);
  border-left: 0;
  background: var(--panel);
  border-radius: 0 8px 8px 0;
}

/* Thanh chinh: nen mo + vien duoi, dinh len tren nhu ban Next */
.mainbar {
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* Mac thuong hieu: vuong bo tron gradient chu TT — dung mot mac voi
   app Next, khong con hinh tron chu T. */
.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand-logo::after {
  content: "TT";
  font-size: 13px;
}
.brand {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.main-nav a {
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}
.main-nav a:hover {
  background: var(--panel-2);
  color: var(--text);
}

/* ---------- 3. CHAN TRANG ---------- */
.site-footer {
  background: var(--panel-2);
  border-top: 1px solid var(--border);
}
.site-footer h4 {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--primary);
}

/* ---------- 4. Vai chi tiet nho cho khop ---------- */
.btn,
.btn-primary,
.icon-btn {
  border-radius: 10px;
}
.panel,
.card,
.buoc {
  border-radius: var(--radius);
}