/* /bai-viet/{category}: the page <style> of baiviet/category1.blade.php (inputs/live-2026-10-25/pages/articles-cat1-*.html). */

/* ============================================================
   CASELAW.VN — DESIGN SYSTEM
   Primary: #1C5CAA | Dark: #0B1F3F | Light BG: #F8FAFC
   ============================================================ */
   *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:.875rem;line-height:1.6;color:#0F172A;background:#F8FAFC;-webkit-font-smoothing:antialiased;}
button,input,textarea,select{font-family:inherit;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;}
img{display:block;max-width:100%;height:auto;}

:root{
  --serif:'Source Serif 4',Georgia,serif;
  --primary:#1C5CAA;
  --primary-dk:#0B1F3F;
  --primary-lt:#2D6BC6;
  --primary-bg:#EFF6FF;
  --primary-b:#DBEAFE;
  --red:#DC2626;
  --red-bg:#FEF2F2;
  --amber:#D97706;
  --amber-bg:#FFFBEB;
  --green:#059669;
  --green-bg:#F0FDF4;
  --slate-50:#F8FAFC;
  --slate-100:#F1F5F9;
  --slate-200:#E2E8F0;
  --slate-300:#CBD5E1;
  --slate-400:#94A3B8;
  --slate-500:#64748B;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-900:#0F172A;
  --border:#E2E8F0;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-md:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);
}

.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;}
.msf{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
.lc2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lc3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ── CONTAINER ── */
.W{max-width:1280px;margin:0 auto;padding:0 24px;}
@media(min-width:640px){.W{padding:0 32px;}}
@media(min-width:1024px){.W{padding:0 0px;}}

@media(min-width:1024px){
  .cta-section .W{
    padding:0 40px;
  }
}



/* ── NAV ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,232,240,.7);box-shadow:0 1px 8px rgba(0,27,62,.06);}
.nav-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-logo{font-size:18px;font-weight:800;color:var(--primary-dk);letter-spacing:-.02em;flex-shrink:0;}
.nav-logo span{color:var(--primary);}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-a{font-size:14px;font-weight:700;color:#000;padding:8px 12px;border-radius:6px;transition:color .15s,background .15s;white-space:nowrap;}
.nav-a:hover{color:var(--primary);}
.nav-a.on{color:var(--primary);border-bottom:2px solid var(--primary);border-radius:0;}
.nav-search{display:flex;align-items:center;gap:4px;padding:8px 12px;background:var(--slate-100);border-radius:8px;font-size:13px;font-weight:500;color:var(--slate-500);cursor:pointer;border:none;}
.btn-login{font-size:13.5px;font-weight:600;color:var(--primary-dk);padding:8px 16px;border-radius:6px;border:1.5px solid var(--border);transition:all .15s;}
.btn-login:hover{border-color:var(--primary);color:var(--primary);}
.btn-cta{font-size:13.5px;font-weight:700;color:#fff;background:var(--primary);padding:8px 18px;border-radius:6px;transition:opacity .15s;}
.btn-cta:hover{opacity:.88;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:8px;}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--primary-dk);border-radius:2px;transition:all .25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── MOBILE MENU ── */
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:#fff;z-index:49;padding:24px;flex-direction:column;gap:4px;overflow-y:auto;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:15px;font-weight:600;color:var(--slate-700);padding:14px 16px;border-radius:10px;transition:background .12s;}
.mobile-menu a:hover,.mobile-menu a.on{background:var(--primary-bg);color:var(--primary);}
.mm-divider{height:1px;background:var(--slate-100);margin:8px 0;}
.mm-cta{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;background:var(--primary);padding:14px;border-radius:10px;margin-top:8px;}

/* ── BREADCRUMB ── */
.bc{background:#fff;padding:9px 0;border-bottom:1px solid var(--slate-100);}
.bc-inner{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--slate-400);}
.bc-inner a{color:var(--slate-500);transition:color .15s;font-weight:500;}
.bc-inner a:hover{color:var(--primary);}

/* ── SECTION HERO ── */
.hub-hero{background:#fff;padding:32px 0 0;}
.hub-hero-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--slate-100);}
.hub-hero-left{}
.hub-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.hub-icon{width:40px;height:40px;border-radius:10px;background:var(--primary-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hub-cat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--primary);}
.hub-title{font-family:var(--serif);font-size:clamp(26px,3.5vw,36px);font-weight:700;color:var(--primary-dk);letter-spacing:-.02em;line-height:1.1;margin-bottom:10px;}
.hub-desc{font-size:14px;color:var(--slate-500);line-height:1.7;max-width:560px;margin-bottom:16px;}
.hub-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green);}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse-dot 1.6s ease-in-out infinite;}
@keyframes  pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}
.hub-stats{display:flex;align-items:center;gap:20px;margin-top:4px;}
.hub-stat{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--slate-500);}
.hub-stat strong{font-weight:700;color:var(--slate-700);}
.hub-stat .sep{color:var(--slate-200);}
.hub-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.btn-follow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--primary);border:1.5px solid var(--primary-b);background:var(--primary-bg);padding:9px 18px;border-radius:8px;transition:all .15s;}
.btn-follow:hover,.btn-follow.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-follow.active .ms::before{content:'notifications_active';}
.btn-share-sm{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--slate-500);border:1.5px solid var(--border);padding:9px 14px;border-radius:8px;transition:all .15s;}
.btn-share-sm:hover{border-color:var(--primary);color:var(--primary);}

/* ── INLINE FILTER BAR (below featured, not sticky) ── */
.inline-filter{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 0 10px;
  border-bottom:1px solid var(--slate-100);
  margin-bottom:4px;
}
.inline-filter-pills{
  display:flex;align-items:center;gap:4px;
  overflow-x:auto;scrollbar-width:none;flex:1;
}
.inline-filter-pills::-webkit-scrollbar{display:none;}
.inline-filter-right{flex-shrink:0;}
.filter-sep{display:none;}  /* no longer needed */
.fpill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--slate-600);padding:5px 11px;border-radius:99px;white-space:nowrap;transition:all .15s;flex-shrink:0;cursor:pointer;background:none;border:1.5px solid transparent;}
.fpill:hover{background:var(--slate-100);color:var(--slate-800);}
.fpill.on{background:var(--primary);color:#fff;border-color:var(--primary);}
.fpill .count{font-size:10px;font-weight:700;opacity:.65;margin-left:1px;}
.filter-right{margin-left:auto;display:flex;align-items:center;gap:8px;padding-left:12px;flex-shrink:0;}
.sort-select{font-size:12.5px;font-weight:600;color:var(--slate-600);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;outline:none;}
.sort-select:hover{background:var(--slate-100);}

/* ── MAIN LAYOUT ── */
.hub-body{padding:28px 0 64px;}
.hub-layout{display:grid;grid-template-columns:1fr 304px;gap:32px;align-items:start;}

/* ── ARTICLE LIST ── */
.art-list{display:flex;flex-direction:column;gap:0;}

/* Featured first article — horizontal card */
.art-featured{
  display:flex;         /* ROW: image left, content right */
  align-items:stretch;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s,border-color .2s;margin-bottom:16px;
}
.art-featured:hover{box-shadow:var(--shadow-md);border-color:var(--primary-b);}
/* Image column: fixed 220px wide, fills height */
.art-feat-img{
  width:220px;flex-shrink:0;
  background:linear-gradient(155deg,var(--primary-dk) 0%,var(--primary) 100%);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:160px;
}
.art-feat-img-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.art-feat-img-icon{color:rgba(255,255,255,.07);font-size:52px;}
/* FEATURED NEW badge — top-left of image */
.art-feat-new-badge{
  position:absolute;top:10px;left:10px;
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  background:rgba(255,255,255,.18);color:#fff;
  padding:3px 8px;border-radius:4px;backdrop-filter:blur(4px);
  display:flex;align-items:center;gap:4px;
}
/* Content column */
.art-feat-body{padding:16px 18px;display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;}
.art-feat-brow{display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap;}
.art-feat-title{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--primary-dk);line-height:1.35;letter-spacing:-.01em;margin-bottom:6px;transition:color .15s;}
.art-featured:hover .art-feat-title{color:var(--primary);}
.art-feat-desc{font-size:12.5px;color:var(--slate-500);line-height:1.62;margin-bottom:10px;}
.art-feat-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--slate-400);flex-wrap:wrap;}
.art-feat-meta .sep{color:var(--slate-200);}
.art-feat-author{display:flex;align-items:center;gap:6px;}
.art-feat-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dk));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.art-feat-read{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--primary);margin-left:auto;white-space:nowrap;}
.art-feat-badge{background:var(--primary);color:#fff;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:2px 7px;border-radius:4px;display:flex;align-items:center;gap:3px;}
.art-feat-badge.hot{background:var(--red);}
.art-feat-badge.soon{background:var(--amber);}
.art-feat-badge.intl{background:var(--slate-600);}
/* Remove the old time badge (no longer positioned in image) */
.art-feat-time{display:none;}
/* Mobile: stack vertically */
@media(max-width:640px){
  .art-featured{flex-direction:column;}
  .art-feat-img{width:100%;min-height:110px;}
}

/* List items */
.art-item{display:flex;align-items:flex-start;gap:16px;padding:14px 12px;border-bottom:1px solid var(--slate-100);cursor:pointer;border-radius:10px;transition:background .15s,box-shadow .15s,border-color .15s;margin:0 -12px;}
.art-item:last-child{border-bottom:none;}
.art-item:hover{background:#fff;box-shadow:0 4px 16px rgba(0,27,62,.08);border-bottom-color:transparent;z-index:1;position:relative;}
.art-item:hover .art-item-title{color:var(--primary);}
.art-item:hover .art-item-num{color:var(--primary-b);}
.art-item:hover .art-item-thumb{box-shadow:0 2px 8px rgba(28,92,170,.2);}
.art-item-num{font-size:13px;font-weight:900;color:var(--slate-200);min-width:24px;flex-shrink:0;line-height:1.4;font-variant-numeric:tabular-nums;margin-top:2px;}
.art-item-body{flex:1;min-width:0;}
.art-item-brow{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap;}
.art-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:4px;}
.ab-law{background:var(--primary-bg);color:var(--primary);}
.ab-hot{background:var(--red-bg);color:var(--red);}
.ab-soon{background:var(--amber-bg);color:var(--amber);}
.ab-intl{background:var(--slate-100);color:var(--slate-600);}
.ab-green{background:var(--green-bg);color:var(--green);}
.art-item-time{font-size:11px;color:var(--slate-400);margin-left:auto;white-space:nowrap;}
.art-item-title{font-size:14px;font-weight:700;color:var(--primary-dk);line-height:1.45;margin-bottom:4px;transition:color .15s;}
.art-item-excerpt{font-size:12.5px;color:var(--slate-500);line-height:1.6;margin-bottom:6px;}
.art-item-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--slate-400);}
.art-item-meta .sep{color:var(--slate-200);}
.art-item-thumb{width:80px;height:60px;border-radius:8px;background:linear-gradient(135deg,var(--primary-dk),var(--primary));flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.art-item-thumb-icon{color:rgba(255,255,255,.15);font-size:28px;}

/* grid view removed — list-only layout */

/* Pagination — 10 bài/trang */
.pagination{display:flex;align-items:center;gap:5px;margin-top:24px;flex-wrap:wrap;}
.pg-item{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;font-size:13px;font-weight:600;color:var(--slate-600);border:1.5px solid var(--border);background:#fff;transition:all .15s;text-decoration:none;}
.pg-item:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg);}
.pg-current{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700;cursor:default;}
.pg-ellipsis{font-size:14px;color:var(--slate-400);padding:0 2px;line-height:36px;}
.pg-prev,.pg-next{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:36px;border-radius:8px;font-size:13px;font-weight:700;color:var(--primary);border:1.5px solid var(--primary-b);background:var(--primary-bg);transition:all .15s;text-decoration:none;}
.pg-prev{margin-right:2px;}
.pg-next{margin-left:2px;}
.pg-prev:hover,.pg-next:hover{background:var(--primary);color:#fff;}
.pg-disabled{color:var(--slate-300);border-color:var(--border);background:var(--slate-50);pointer-events:none;cursor:default;}
.pg-info{font-size:12px;color:var(--slate-400);margin-top:10px;text-align:center;}
/* Legacy load-more kept for other templates */
.load-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border:1.5px solid var(--border);border-radius:10px;font-size:13.5px;font-weight:700;color:var(--slate-600);background:#fff;margin-top:16px;cursor:pointer;transition:all .2s;}
.load-more:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg);}

/* ── SEARCH COMBOBOX ── */
.sb-search-card{overflow:visible !important;}  /* allow dropdown to overflow */
.srch-tabs{display:flex;border-bottom:1px solid var(--slate-100);}
.srch-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:12px;font-weight:600;color:var(--slate-500);
  padding:10px 8px;border-bottom:2px solid transparent;margin-bottom:-1px;
  background:none;border-left:none;border-right:none;border-top:none;
  cursor:pointer;transition:all .15s;}
.srch-tab:hover{color:var(--primary-dk);}
.srch-tab.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:700;}
.srch-panel{transition:opacity .15s;}
.sb-search{padding:10px 12px;display:flex;align-items:center;gap:8px;
  background:var(--slate-50);border-bottom:1px solid var(--slate-100);}
.sb-search input{flex:1;border:none;background:transparent;font-size:13px;
  color:var(--slate-700);outline:none;}
.sb-search input::placeholder{color:var(--slate-400);}
.srch-clear{background:none;border:none;padding:2px;display:flex;
  align-items:center;cursor:pointer;flex-shrink:0;}
/* Author dropdown */
.author-dropdown{max-height:260px;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--slate-200) transparent;}
.author-dropdown::-webkit-scrollbar{width:3px;}
.author-dropdown::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:99px;}
.au-drop-item{display:flex;align-items:center;gap:9px;padding:9px 12px;
  cursor:pointer;transition:background .1s;border-bottom:1px solid var(--slate-50);}
.au-drop-item:last-child{border-bottom:none;}
.au-drop-item:hover{background:var(--slate-50);}
.au-drop-item.on{background:var(--primary-bg);}
.au-drop-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.au-drop-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.au-drop-name{font-size:12.5px;font-weight:700;color:var(--primary-dk);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.au-drop-item.on .au-drop-name{color:var(--primary);}
.au-drop-meta{font-size:10.5px;color:var(--slate-400);}
/* Active filter chip shown below search input */
.au-active-filter{display:flex;align-items:center;gap:6px;
  padding:7px 12px;background:var(--primary-bg);
  border-top:1px solid var(--primary-b);font-size:12.5px;
  font-weight:600;color:var(--primary);}
.au-clear-btn{background:none;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;color:var(--slate-400);margin-left:auto;
  transition:color .15s;}
.au-clear-btn:hover{color:var(--red);}

/* ── SIDEBAR ── */
.sidebar{position:sticky;top:calc(64px + 16px);display:flex;flex-direction:column;gap:20px;}
.sb-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.sb-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--slate-100);}
.sb-hd-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-700);display:flex;align-items:center;gap:6px;}
.sb-see{font-size:11.5px;font-weight:600;color:var(--primary);transition:opacity .15s;}
.sb-see:hover{opacity:.7;}

/* Sidebar search */
.sb-search{padding:12px 14px;display:flex;align-items:center;gap:8px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);}
.sb-search input{flex:1;border:none;background:transparent;font-size:13px;color:var(--slate-700);outline:none;}
.sb-search input::placeholder{color:var(--slate-400);}

/* Trending list */
.sb-trend-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid var(--slate-100);transition:background .12s;cursor:pointer;}
.sb-trend-item:last-child{border-bottom:none;}
.sb-trend-item:hover{background:var(--slate-50);}
.sb-trend-num{font-size:15px;font-weight:900;color:var(--slate-200);min-width:20px;flex-shrink:0;line-height:1.2;}
.sb-trend-title{font-size:12.5px;font-weight:600;color:var(--primary-dk);line-height:1.4;transition:color .15s;}
.sb-trend-item:hover .sb-trend-title{color:var(--primary);}
.sb-trend-meta{font-size:11px;color:var(--slate-400);margin-top:2px;display:flex;align-items:center;gap:6px;}
.sb-trend-author{font-weight:600;color:var(--slate-500);}
.sb-trend-author::before{content:'·';margin-right:4px;color:var(--slate-300);}
/* Make trend item an anchor */
a.sb-trend-item{text-decoration:none;display:flex;}

/* Tags */
.sb-tags{padding:14px 16px;display:flex;flex-wrap:wrap;gap:6px;}
.sb-tag{font-size:11.5px;font-weight:600;color:var(--slate-600);background:var(--slate-100);padding:4px 10px;border-radius:99px;transition:all .15s;cursor:pointer;}
.sb-tag:hover{background:var(--primary-bg);color:var(--primary);}

/* Sidebar core DB */
.sb-db-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--slate-100);transition:background .12s;text-decoration:none;}
.sb-db-item:hover{background:var(--slate-50);}
.sb-db-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-db-body{flex:1;min-width:0;}
.sb-db-name{font-size:12.5px;font-weight:700;color:var(--primary-dk);line-height:1.3;transition:color .12s;}
.sb-db-item:hover .sb-db-name{color:var(--primary);}
.sb-db-sub{font-size:10.5px;color:var(--slate-400);margin-top:1px;}

/* Sidebar mini CTA */
.sb-cta{background:linear-gradient(155deg,var(--primary-dk) 0%,#14336b 100%);border-radius:14px;padding:20px;overflow:hidden;position:relative;}
.sb-cta::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:rgba(255,255,255,.04);border-radius:50%;}
.sb-cta-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(163,210,255,.5);margin-bottom:8px;}
.sb-cta-title{font-family:var(--serif);font-size:15px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:12px;}
.sb-cta-input{display:flex;flex-direction:column;gap:8px;}
.sb-cta-email{width:100%;padding:10px 12px;border-radius:8px;border:none;font-size:13px;outline:none;background:rgba(255,255,255,.12);color:#fff;}
.sb-cta-email::placeholder{color:rgba(255,255,255,.35);}
.sb-cta-email:focus{background:rgba(255,255,255,.18);}
.sb-cta-btn{width:100%;padding:10px;border-radius:8px;font-size:13px;font-weight:700;color:var(--primary-dk);background:#fff;cursor:pointer;border:none;transition:opacity .15s;}
.sb-cta-btn:hover{opacity:.9;}
.sb-cta-note{font-size:10.5px;color:rgba(163,210,255,.4);text-align:center;margin-top:4px;}

/* ── AUTHORS SECTION ── */
.authors-section{padding:48px 0;background:#fff;border-top:1px solid var(--slate-100);}
.section-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;}
.s-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--primary);display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.s-h2{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--primary-dk);letter-spacing:-.015em;line-height:1.15;}
.s-more{font-size:12.5px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:4px;transition:gap .15s;}
.s-more:hover{gap:8px;}
.authors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.author-card{background:var(--slate-50);border:1px solid var(--border);border-radius:14px;padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;transition:all .2s;cursor:pointer;}
.author-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-b);transform:translateY(-2px);}
.au-av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dk));display:flex;align-items:center;justify-content:center;margin-bottom:12px;border:3px solid #fff;box-shadow:0 2px 8px rgba(28,92,170,.2);}
.au-name{font-size:13.5px;font-weight:700;color:var(--primary-dk);margin-bottom:3px;line-height:1.3;}
.au-role{font-size:11px;color:var(--slate-500);margin-bottom:10px;line-height:1.4;}
.au-specialty{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);background:var(--primary-bg);padding:3px 9px;border-radius:4px;margin-bottom:12px;}
.au-stats{display:flex;align-items:center;justify-content:center;gap:12px;font-size:11px;color:var(--slate-400);margin-bottom:14px;width:100%;}
.au-stat{display:flex;flex-direction:column;align-items:center;gap:1px;}
.au-stat strong{font-size:14px;font-weight:800;color:var(--slate-700);}
.au-stat-sep{width:1px;height:24px;background:var(--slate-200);}
.btn-follow-au{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--primary);border:1.5px solid var(--primary-b);background:#fff;padding:7px 16px;border-radius:99px;transition:all .15s;cursor:pointer;width:100%;justify-content:center;}
.btn-follow-au:hover,.btn-follow-au.following{background:var(--primary);color:#fff;border-color:var(--primary);}
.authors-write-cta{background:var(--primary-bg);border:1px solid var(--primary-b);border-radius:14px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.write-cta-txt{}
.write-cta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--primary);margin-bottom:5px;}
.write-cta-title{font-size:15px;font-weight:800;color:var(--primary-dk);margin-bottom:4px;}
.write-cta-sub{font-size:12.5px;color:var(--slate-500);}
.write-cta-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.btn-write{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:var(--primary);padding:10px 20px;border-radius:8px;transition:opacity .15s;}
.btn-write:hover{opacity:.88;}
.btn-write-ghost{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--slate-600);border:1.5px solid var(--border);background:#fff;padding:10px 16px;border-radius:8px;transition:all .15s;}
.btn-write-ghost:hover{border-color:var(--primary);color:var(--primary);}

/* ── RELATED CATEGORIES ── */
.related-section{padding:40px 0;background:var(--slate-50);border-top:1px solid var(--slate-100);}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.rel-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;transition:all .2s;cursor:pointer;}
.rel-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-b);transform:translateY(-2px);}
.rel-ico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.rel-name{font-size:13.5px;font-weight:700;color:var(--primary-dk);line-height:1.3;transition:color .15s;}
.rel-card:hover .rel-name{color:var(--primary);}
.rel-sub{font-size:11.5px;color:var(--slate-400);line-height:1.5;}
.rel-count{font-size:11px;font-weight:600;color:var(--slate-400);display:flex;align-items:center;gap:4px;margin-top:auto;}
.rel-arrow{font-size:11.5px;font-weight:700;color:var(--primary);margin-left:auto;display:flex;align-items:center;}

/* ── CTA SECTION ── */
.cta-section{background:linear-gradient(160deg,var(--primary-dk) 0%,#0d2a5c 100%);padding:52px 0;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.03);}
.cta-section::after{content:'';position:absolute;bottom:-80px;left:200px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.025);}
.cta-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:48px;align-items:center;position:relative;z-index:1;}
.cta-divider{background:rgba(255,255,255,.1);height:100%;min-height:140px;}
/* Left: email */
.cta-left-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(163,210,255,.5);margin-bottom:8px;}
.cta-left-title{font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:6px;}
.cta-left-sub{font-size:13px;color:rgba(163,210,255,.65);line-height:1.6;margin-bottom:20px;}
.cta-email-row{display:flex;gap:8px;}
.cta-email-input{flex:1;padding:11px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);color:#fff;font-size:13.5px;outline:none;transition:border-color .15s;}
.cta-email-input::placeholder{color:rgba(255,255,255,.3);}
.cta-email-input:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.14);}
.cta-email-btn{padding:11px 20px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--primary-dk);background:#fff;border:none;cursor:pointer;transition:opacity .15s;white-space:nowrap;flex-shrink:0;}
.cta-email-btn:hover{opacity:.9;}
.cta-email-note{font-size:11px;color:rgba(163,210,255,.35);margin-top:8px;}
/* Right: account */
.cta-right-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(163,210,255,.5);margin-bottom:8px;}
.cta-right-title{font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:6px;}
.cta-right-sub{font-size:13px;color:rgba(163,210,255,.65);line-height:1.6;margin-bottom:16px;}
.cta-benefits{display:flex;flex-direction:column;gap:7px;margin-bottom:20px;}
.cta-benefit{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.75);}
.cta-benefit-dot{width:16px;height:16px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cta-acc-btn{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--primary-dk);background:#fff;padding:12px 24px;border-radius:8px;transition:opacity .15s;border:none;cursor:pointer;}
.cta-acc-btn:hover{opacity:.9;}
.cta-login-note{font-size:12px;color:rgba(163,210,255,.4);margin-top:10px;}
.cta-login-note a{color:rgba(163,210,255,.6);text-decoration:underline;}

/* ── FOOTER ── */
.footer{background:#fff;border-top:1px solid var(--border);padding:48px 0 28px;}
.footer-grid{display:grid;grid-template-columns:220px repeat(3,1fr);gap:36px;margin-bottom:36px;}
.footer-logo{font-size:17px;font-weight:800;color:var(--primary-dk);}
.footer-col-hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--primary-dk);margin-bottom:14px;}
.footer-lk{display:block;font-size:13px;color:var(--slate-500);margin-bottom:8px;transition:color .15s;}
.footer-lk:hover{color:var(--primary);}
.footer-bottom{border-top:1px solid var(--slate-100);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-copy{font-size:12.5px;color:var(--slate-400);}

/* ── FOCUS + SKIP ── */
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
.skip-link{position:absolute;top:-100px;left:8px;background:var(--primary);color:#fff;padding:10px 18px;border-radius:0 0 8px 8px;font-size:13px;font-weight:700;z-index:999;transition:top .15s;}
.skip-link:focus{top:0;}

/* ── RESPONSIVE ── */

/* ── TABLET (768–1023px) ── */
@media(max-width:1023px){
  .hub-layout{grid-template-columns:1fr;}
  .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .authors-grid{grid-template-columns:repeat(3,1fr);}
  .rel-grid{grid-template-columns:repeat(2,1fr);}
  .cta-grid{grid-template-columns:1fr;gap:32px;}
  .cta-divider{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

/* ── MOBILE (< 768px) ── */
@media(max-width:767px){
  /* Hub hero */
  .hub-hero{padding:20px 0;}
  .hub-hero-inner{flex-direction:column;gap:14px;}
  .hub-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .btn-follow,.btn-share-sm{justify-content:center;}
  .hub-stats{flex-wrap:wrap;gap:8px 16px;}
  .hub-title{font-size:22px;}

  /* Inline filter: compact on mobile */
  .inline-filter{flex-wrap:wrap;gap:6px;}
  .inline-filter-pills{gap:4px;padding-bottom:4px;}
  .fpill{font-size:11.5px;padding:5px 9px;}
  .fpill .count{display:none;}   /* hide counts to save space */
  .inline-filter-right{flex-shrink:0;}

  /* Featured article: stack on mobile */
  .art-featured{flex-direction:column;}
  .art-feat-img{width:100%;min-height:100px;}

  /* Article list items */
  .art-item{gap:10px;padding:12px 8px;margin:0 -8px;}
  .art-item-num{font-size:11px;min-width:18px;}
  .art-item-title{font-size:13.5px;}
  .art-item-excerpt{display:none;}   /* hide excerpt to tighten list */
  .art-item-thumb{width:64px;height:48px;}

  /* Pagination */
  .pagination{gap:4px;justify-content:center;}
  .pg-item{width:32px;height:32px;font-size:12px;}
  .pg-prev,.pg-next{padding:0 10px;height:32px;font-size:12px;}
  .pg-info{font-size:11px;}

  /* Sidebar: single column below content */
  .sidebar{grid-template-columns:1fr;}

  /* Section headers */
  .s-h2{font-size:20px;}
  .section-hdr{flex-direction:column;gap:8px;align-items:flex-start;}

  /* Authors */
  .authors-grid{grid-template-columns:1fr 1fr;}
  .authors-write-cta{flex-direction:column;gap:16px;}
  .write-cta-actions{flex-direction:column;width:100%;}
  .btn-write,.btn-write-ghost{justify-content:center;}

  /* Related */
  .rel-grid{grid-template-columns:1fr 1fr;}

  /* CTA */
  .cta-email-row{flex-direction:column;}
  .cta-email-btn{border-radius:8px;}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;}
  .footer-grid>div:first-child{grid-column:auto;}
  .footer{padding:32px 0 20px;}

  /* Hub body padding */
  .hub-body{padding:20px 0 48px;}
}

/* ── SMALL MOBILE (< 480px) ── */
@media(max-width:480px){
  .hub-title{font-size:20px;}
  .authors-grid{grid-template-columns:1fr;}
  .rel-grid{grid-template-columns:1fr;}
  .art-item-thumb{display:none;}
  /* Pagination: hide middle pages, show only prev/current/next/last */
  .pg-item:not(.pg-current):not(:last-of-type){display:none;}
  .pg-ellipsis{display:none;}
  /* Show only 1-2-3-…-last on very small screens */
  .pagination .pg-item:nth-child(2),
  .pagination .pg-item:nth-child(3),
  .pagination .pg-item:nth-child(4){display:inline-flex;}
  /* Hub actions: full width single column */
  .hub-actions{grid-template-columns:1fr;}
}

/* frontend/layout/breadcrumb.blade.php echoes this <style> inside <body>, after every sheet; "body" keeps it
   ahead of the layout sheets that v2 lists after the page CSS. */
body .breadcrumb>li+li:before {
    padding: 0 0px;
    color: #ccc;
    content: "";
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    width: 7px;
    height: 7px;
    display: inline-block;
    transform: rotate(-40deg);
    margin-right: 10px;
    margin-bottom: 1px;
}