:root{
  --gov-blue:#0A6BD6;
  --bg:#f6f9fc;
  --panel:#fff;
  --muted:#6b7684;
  --border:#e3e9f2;
  --accent:#0A6BD6;
  --radius:10px;
  --gap:14px;
  --card-shadow:0 6px 18px rgba(8,32,63,0.04);
  font-family:Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===============================
   DARK MODE
   =============================== */
body.dark{
  --bg:#2d2723;
  --panel:#3b332f;
  --muted:#d0c5bd;
  --border:#554c47;
  --accent:#ffca63;
  color-scheme:dark;
  color:#f4ece6;
}

/* ============================
   TOPBAR (FIXED)
============================ */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  background:linear-gradient(90deg,var(--gov-blue),#0f77e0);
  color:white;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
}

.brand-logo{
  width:44px;
  height:44px;
  border-radius:10px;
  overflow:hidden;
  background:transparent;
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.35);
}

.brand-title,
.brand-sub{
  color:#ff3b3b !important;
  font-weight:800;
}

.icon-btn{
  background:transparent;
  border:0;
  color:white;
  font-size:18px;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
}

/* ICONS + SEARCH (topbar right) */
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.search-wrap{
  background:#ffffff;
  border-radius:10px;
  padding:6px 10px;
  display:flex;
  align-items:center;
  max-width:260px;
  width:100%;
  flex-shrink:1;
}

.search-wrap input{
  width:100%;
  min-width:0;
  color:#000;
  background:transparent;
  border:none;
  outline:none;
}

#btnClearSearch{
  background:#e6e6e6;
  color:#333;
  border-radius:6px;
  padding:4px 6px;
}

#btnTheme{
  flex-shrink:0;
}

/* ============================
   LAYOUT
============================ */
.container{
  display:flex;
  gap:18px;
  padding:18px;
  align-items:flex-start;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* FIX: tránh topbar che card */
  padding-top:76px !important;
}

/* ============================
   SIDEBAR
============================ */
#overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  z-index:998;
}

.sidebar{
  position:fixed;
  top:0;
  left:-320px;
  width:300px;
  height:100vh;
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  transition:left .28s cubic-bezier(.2,.8,.2,1);
  z-index:999;
  overflow-y:auto;
}

.sidebar.open{ left:0; }

.sidebar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.sidebar-head h4{
  color:#d82727;
  font-weight:700;
}

.badge{
  background:var(--accent);
  color:white;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}

.folder-tree{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:8px;
}

/* ============================
   TOP MENU (ẨN)
============================ */
.topmenu{ display:none !important; }

/* ============================
   CONTENT + CARD
============================ */
.content{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
  margin-top:0 !important;
}

.card{
  display:flex;
  gap:12px;
  padding:12px;
  background:var(--panel);
  border-radius:10px;
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);
  align-items:center;
  transition:transform .12s;
  position:relative;
}

/* BORDER ANIMATION */
.link-card{
  position:relative;
  overflow:visible;

  height:115px !important;
  min-height:115px !important;
  max-height:115px !important;

  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px;
  border-radius:12px;
}

.link-card::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:14px;
  padding:3px;
  background:linear-gradient(120deg,#ff1a1a,#ff7b7b,#ff1a1a);
  background-size:300% 300%;
  animation:borderRun 3s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .25s;
}

.link-card:hover::before{ opacity:1; }
.link-card:hover{ transform:translateY(-3px); }

@keyframes borderRun{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.card-left{
  flex-shrink:0;
  width:44px;
  height:44px;
}

.favicon{
  width:44px;
  height:44px;
  border-radius:8px;
  background:#f0f6ff;
  object-fit:cover;
}

.card-body{
  flex:1;
  padding:0 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.card-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:16px;
  font-weight:600;
}

.card-url{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.8;
  font-size:14px;
}

.card-actions{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.copy-btn,.open-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:6px;
  border-radius:6px;
  font-size:16px;
}

/* ===============================
   BADGE SỐ CARD
================================ */
.card-index{
  position:absolute;
  top:-10px;
  right:-10px;
  background:#e53935;
  color:white;
  padding:4px 10px;
  border-radius:50%;
  font-size:14px;
  font-weight:700;
  border:2px solid #ffffff;
  z-index:20;
}

/* ===============================
   FOLDER (MENU)
================================ */
.folder{
  padding:12px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  transition:.15s;
  position:relative;
}

.folder:hover{
  transform:translateY(-3px);
  background:#f5f8ff;
}

.folder-title{
  font-size:14px;
  font-weight:700;
  color:var(--gov-blue);
}

.folder-count{
  position:absolute;
  top:-6px;
  right:-6px;
  background:#ff3b3b;
  color:white;
  padding:4px 8px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
}

/* ===============================
   DARK MODE OVERRIDES
================================ */
body.dark .topbar{
  background:linear-gradient(90deg,#d68e2c,#ffca63);
}

body.dark .card{
  background:#3b332f;
  border-color:#554c47;
}

body.dark .card:hover{
  background:#463f3a;
}

body.dark .card-title{
  color:#ffca63;
}

body.dark .card-url{
  color:#d0c5bd;
}

body.dark .folder{
  background:#3b332f;
  border-color:#554c47;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

body.dark .folder:hover{
  background:#463f3a;
}

body.dark .folder-title{
  color:var(--accent);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width:1000px){
  .container{ flex-direction:column; padding:12px; }
  .sidebar{ width:80%; max-width:360px; left:-100%; }
  .sidebar.open{ left:0; width:80%; }
}

@media (max-width:900px){
  .content{ grid-template-columns:repeat(auto-fill,minmax(100%,1fr)); }
}
.card-note {
  font-size: 13px;
  color: var(--muted);
  padding-top: 4px;
  opacity: .85;
}
.card-note {
  word-break: break-word;
  line-height: 1.35;
}
.card-body{
  flex:1;
  padding:0 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;   /* ĐẨY TÊN + LINK LÊN TOP */
}