/* ===================================================================
   [chung] BO PHAN DUNG CHUNG - thanh tren, o tim kiem, co chu tieu de,
       va toan bo ho .btn.

   Ca bon mang deu dung nut va tieu de o day, ke ca trang quan tri.
   Doi mot lop trong file nay la doi khap noi - bao nhom truoc.
   =================================================================== */

/* --------------- [B] noi dung: trang chu, tieu de, tab --------------- */
.main{ flex:1; overflow-y:auto; min-width:0; background:rgba(255,255,255,.42); }
.topbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s6); background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.6) 70%, rgba(255,255,255,0));
  backdrop-filter:blur(10px); }
.search{ flex:1; max-width:420px; display:flex; align-items:center; gap:10px; padding:9px var(--s4);
  background:var(--panel); border:1px solid var(--line); border-radius:999px; color:var(--faint);
  box-shadow:var(--shadow-sm); }
.search input{ flex:1; background:none; border:0; outline:none; color:var(--ink); }
#user-slot{ margin-left:auto; }
.chip{ display:flex; align-items:center; gap:10px; padding:5px 5px 5px 15px; background:var(--panel);
  border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--muted); }
.chip:hover{ background:var(--panel2); }

.view{ padding:var(--s2) var(--s6) 130px; animation:riseIn .4s ease both; }
h1.big{ font-family:var(--font-display); font-weight:800; font-size:42px; letter-spacing:-.035em; margin:0; }
h2.sec{ font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.025em; margin:0; }
.head-row{ display:flex; align-items:baseline; justify-content:space-between; margin:var(--s6) 0 var(--s4); }
.lede{ color:var(--muted); margin:var(--s2) 0 0; max-width:520px; }

.btn{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:14px; box-shadow:var(--shadow-sm); }
.btn:hover{ background:var(--panel2); }
.btn-ghost{ background:none; color:var(--muted); box-shadow:none; }
.btn-ghost:hover{ color:var(--ink); background:var(--panel2); }
.btn-primary{ border:0; background:var(--goldb); color:#fff; font-weight:700;
  box-shadow:0 4px 14px rgba(15,157,118,.28); }
.btn-primary:hover{ background:var(--goldb-hi); }
.btn-danger{ border-color:rgba(190,60,50,.35); color:#b23b30; background:var(--panel); }
.btn-danger:hover{ background:rgba(190,60,50,.08); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover{ background:var(--panel); }
.btn-sm{ padding:6px 14px; font-size:12.5px; }
.btn.is-on{ border-color:var(--goldb); color:var(--goldb); background:var(--acc-soft); }