: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;
}

body.dark{
  --bg:#071427;
  --panel:#07182a;
  --muted:#98a6b6;
  --border:rgba(255,255,255,0.06);
  --accent:#4dabff;
  color-scheme:dark;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:#0f2940;
}

/* ===== TOP BAR (A - xanh da trời nhạt) ===== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  background: linear-gradient(90deg, #4aaeff, #6bc3ff);
  color:white;
  position:sticky;
  top:0;
  z-index:60;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.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:8px;
  background:rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.brand-logo img{ width:28px; height:28px; object-fit:cover; border-radius:6px; }

.brand-title{font-weight:700;font-size:15px}
.brand-sub{font-size:12px;opacity:0.9}

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

.search-wrap{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.12);
  padding:6px;
  border-radius:10px;
}

.search-wrap input{
  border:0;
  background:transparent;
  color:white;
  padding:8px 10px;
  min-width:260px;
  outline:none;
}

.select-small{
  padding:8px;
  border-radius:8px;
  border:0;
  background:white;
  color:var(--gov-blue);
  font-weight:600;
}

.action-btn{
  background:white;
  color:var(--gov-blue);
  padding:8px 12px;
  border-radius:8px;
  border:0;
  font-weight:600;
  cursor:pointer;
}

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

.sidebar{
  width:300px;
  background:var(--panel);
  border-radius:12px;
  padding:12px;
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);
  max-height:calc(100vh - 120px);
  overflow:auto;
}

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

.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;
}

/* Folder style (updated to be white, soft shadow, hover) */
.folder{
  padding:10px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e8edf8;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all .18s ease;
}

.folder:hover{
  background:#f6f9ff;
  border-color:#dbe8ff;
  transform: translateX(4px);
}

/* folder-count — white oval with red border */
.folder-count{
  background:#ffffff;
  border:2px solid #ff3b3b;
  color:#111;
  padding:4px 10px;
  min-width:36px;
  text-align:center;
  border-radius:20px;
  font-weight:700;
  font-size:13px;
  box-shadow: 0 1px 6px rgba(255,0,0,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* edit icon small for folder */
.folder .edit-folder{
  margin-left:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:14px;
  color:#666;
}

/* main + topmenu + content */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.topmenu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.topmenu .menu-item{
  padding:8px 12px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--border);
  cursor:pointer;
  color:var(--gov-blue);
  font-weight:700;
}

.content{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

/* card base */
.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;
}

/* checkbox top-left (small) */
.card-checkbox{
  position:absolute;
  top:8px;
  left:8px;
  z-index:12;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:6px;
  background:transparent;
}

.card-checkbox input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border:2px solid #cbd5e1;
  border-radius:5px;
  background:white;
  cursor:pointer;
}

.card-checkbox input[type="checkbox"]:checked{
  background:#ff4d4d;
  border-color:#ff4d4d;
  box-shadow:0 2px 6px rgba(255,77,77,0.28);
  position:relative;
}

.card-checkbox input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  width:6px;
  height:10px;
  border:2px solid white;
  border-left:0;
  border-top:0;
  transform: rotate(45deg);
  left:6px;
  top:3px;
}

/* favicon */
.card-left{
  flex:0 0 44px;
  height:44px;
}

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

/* index badge top-right */
.card-index{
  position:absolute;
  top:6px;
  right:12px;
  min-width:26px;
  height:26px;
  padding:0 6px;
  background:#ffffff;
  color:#111;
  font-weight:700;
  font-size:13px;
  border-radius:22px;
  border:2px solid #ff3b3b;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  z-index:10;
}

.card-body{
  flex:1;
}

.card-title{
  font-weight:700;
  font-size:14px;
  color:#0f2940;
  cursor:text;
}

.card-url{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* open button (arrow) styled red and rounded as requested */
.open-btn{
  border:0;
  background:linear-gradient(180deg,#ff6b6b,#ff3b3b);
  color:white;
  padding:8px;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(255,59,59,0.16);
  font-size:16px;
  width:40px;
  height:40px;
}

/* copy button simple */
.copy-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:6px;
  border-radius:6px;
  font-size:16px;
}

/* selected card visual */
.link-card.selected{
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(11,46,93,0.06);
  border-color:#ffdede;
}

/* animated red border outside (runs when hover) */
.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 .22s;
  z-index:0;
}

.link-card:hover::before{ opacity:1; }

/* content above border */
.link-card > *{ position:relative; z-index:2; }

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

/* small utilities */
.edit-folder{ background:transparent;border:0;cursor:pointer;color:#0b6ed7;font-weight:700;padding-left:10px }

@media (max-width:1000px){
  .container{
    flex-direction:column;
    padding:12px;
  }
  .sidebar{
    width:100%;
    max-height:none;
  }
}
#moveToSelect {
  width: auto !important;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tất cả nút dạng action-btn giống nhau */
.action-btn {
  min-width: 100px;     /* chiều rộng đồng nhất */
  height: 38px;         /* chiều cao đồng nhất */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 14px;
  white-space: nowrap;
}
/* ============================================
   CHUẨN HÓA TẤT CẢ NÚT + SELECT CHO ĐỒNG BỘ
   ============================================ */

/* Toàn bộ nhóm nút nằm cùng 1 hàng, gọn gàng */
.actions-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Tất cả nút dạng action-btn: kích thước đồng đều */
.action-btn {
  min-width: 120px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--gov-blue);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

/* Nút select "Ngang Dọc" (viewSelect) giống action-btn */
#viewSelect {
  min-width: 120px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
  color: var(--gov-blue);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: center;
  cursor: pointer;
}

/* Dropdown "Di chuyển đến thư mục" – đồng bộ nút */
#moveToSelect {
  min-width: 160px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--gov-blue);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  appearance: none;
  text-align: center;
  cursor: pointer;
}

/* Icon nút theme giữ nguyên */
#btnTheme {
  font-size: 18px;
}
/* ============================================
   ÉP TOÀN BỘ NÚT TRONG TOPBAR THẲNG HÀNG
   ============================================ */

   .topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  /* Gộp select "Ngang Dọc" vào style chung của action-btn */
  #viewSelect {
    min-width: 120px !important;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    color: var(--gov-blue);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    appearance: none;
    text-align: center;
    cursor: pointer;
  }
  
  /* Nút "Di chuyển đến..." không được lớn hơn các nút khác */
  #moveToSelect {
    min-width: 120px !important;
    max-width: 120px !important;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    color: var(--gov-blue);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    appearance: none;
    text-align: center;
    cursor: pointer;
  }
  
  /* Toàn bộ nút đồng kích thước */
  .action-btn {
    min-width: 120px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white;
    color: var(--gov-blue);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
  }
  
  /* Chứa các nút bên phải */
  .actions-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  /* Ép nút Ngang Dọc giống 100% action-btn */
#viewSelect {
  min-width: 120px;               /* bằng kích thước nút JSON / CSV / XLSX */
  height: 38px;                   /* cùng chiều cao */
  padding: 0 12px;
  border-radius: 8px;             /* bo góc giống nút */
  border: 1px solid var(--border);
  background: white;              /* nền giống action-btn */
  color: var(--gov-blue);         /* màu chữ giống nút */
  font-weight: 600;               /* độ đậm giống nút */
  font-size: 14px;                /* size chữ giống nút */
  display: inline-flex;
  align-items: center;
  justify-content: center;        /* canh giữa */
  white-space: nowrap;
  appearance: none;               /* bỏ style mặc định của select */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  text-align: center;
}