/* Top Bar */
      .top-bar{ background:var(--topbar-bg); color:var(--topbar-fg); font-size:16px; }
      .top-bar a{ color:var(--topbar-fg); text-decoration:none; }
      .top-bar .divider{ opacity:.5; margin:0 .4rem; }

      /* Header */
      .site-header{ background:#fff; }
      .site-header .logo img{ height:auto; width:auto; max-height:96px; max-width:100%; }
      .site-header .left-meta{ font-size:16px; color:#666; }

      /* Right cluster */
      .social-icons a{ font-size:18px; margin-left:.5rem; text-decoration:none; opacity:.9; }
      .social-icons a:hover{ opacity:1; }
      .social-facebook{ color:#1877F2; }
      .social-twitter{ color:#1DA1F2; }
      .social-instagram{ color:#C13584; }
      .social-youtube{ color:#FF0000; }

      .epaper-btn{ white-space:nowrap; border:1px solid rgba(0,0,0,.1); }
      .epaper-btn i{ margin-right:.4rem; }

      .search-trigger{ width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.1); }
      .search-trigger:hover{ background:#f7f7f7; }

      /* Deep red navbar */
      .navbar-deepred { background: var(--deep-red); }
      .navbar-deepred .nav-link, .navbar-deepred .navbar-brand { color:#fff; }
      .navbar-deepred .nav-link:hover, .navbar-deepred .nav-link:focus { color:#ffe7e7; }
      .navbar-deepred .navbar-toggler { border-color: rgba(255,255,255,.5); }
      .navbar-deepred .navbar-toggler-icon { filter: invert(1) brightness(2); }

      /* Utility */
      .x-gap-8{ gap:.5rem; }
      .x-gap-10{ gap:.625rem; }

      /* Responsiveness */
      @media (max-width: 991.98px){
        .site-header .right-stack{ align-items:center; }
        .site-header .logo{ order:2; }
        .site-header .left-meta{ order:1; }
        .site-header .right-stack{ order:3; }
        .site-header .logo{ text-align:center; }
      }
          /* Force single-line on left clusters */
      .top-bar .left{ white-space:nowrap; flex-wrap:nowrap; }
      .site-header .left-meta{ white-space:nowrap; }
      .site-header .left-meta .d-flex{ flex-wrap:nowrap; }
          /* Right stack – one line */
      .site-header .right-stack{ flex-wrap:nowrap; white-space:nowrap; }
      .site-header .right-stack .social-icons a{ display:inline-flex; }
      .site-header .right-stack .epaper-btn{ border:1px solid rgba(0,0,0,.12); }

      /* Topbar + Navbar stability & colors */
      .top-bar{ min-height:36px; display:flex; align-items:center; }
      .navbar-deepred{ background:linear-gradient(90deg,#8B0000 0%, #B31217 100%); box-shadow:0 1px 0 rgba(0,0,0,.06); min-height:48px; }
      .navbar-deepred .nav-link{ padding:.65rem .8rem; }
      .navbar-deepred .nav-link.active, .navbar-deepred .nav-link:focus-visible{ background:rgba(255,255,255,.08); border-radius:.375rem; }

      /* Mobile polish */
      @media (max-width: 575.98px){
        .top-bar{ font-size:14px; }
        .site-header .right-stack .social-icons a{ font-size:16px; }
        .site-header .epaper-btn{ padding:.25rem .5rem; font-size:.875rem; }
        .search-trigger{ width:36px; height:36px; }
      }

          /* Menu font sizing (national-portal style) */
      .navbar-deepred .nav-link{ font-size:1.125rem; /* ~18px */ font-weight:700; line-height:1.3; padding:.75rem 1rem; }
      .navbar-deepred .navbar-brand{ font-size:1.0625rem; font-weight:700; }
      @media (min-width: 992px){
        .navbar-deepred .nav-link{ font-size:1.1875rem; /* ~19px */ padding:.8rem 1.05rem; }
      }

      /* Center items under logo on mobile */
      @media (max-width: 991.98px){
        .site-header .right-stack{ justify-content:center !important; gap:.75rem; }
      }

      /* Bigger logo on mobile */
      @media (max-width: 991.98px){ .site-header .logo img{ max-height:92px; max-width:90vw; } }
      @media (max-width: 575.98px){ .site-header .logo img{ max-height:84px; max-width:85vw; } }

      /* Topbar one-line on mobile (no wrap, smooth horizontal scroll if needed) */
      @media (max-width: 575.98px){
        .top-bar .container > .d-flex{ flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:.5rem; }
        .top-bar .left, .top-bar .right{ white-space:nowrap; }
      }

          /* Larger icons & language links in topbar */
      .top-bar i{ font-size:1.1rem; }
      .top-bar .right a{ font-weight:600; }
          /* Prevent logo overflow */
      .site-header .logo a{ display:inline-block; max-width:100%; }
      @media (max-width: 575.98px){ .site-header .logo{ padding:4px 0; } }



        h3.mb-2.fw-bold.lh-sm {
    font-size: 36px;
    line-height: 35px !important;
}
p.text-muted.mb-0 {
    font-size: 19px;
    line-height: 25px;
    color: black;
}
h6.mb-1.fw-semibold {
    font-size: 18px;
}
h6.mb-0.fw-semibold {
    font-size: 20px;
}


.sel-pill {
    display: block;
    height: 100%;
    border: 2px solid #d8d8d8;
    border-radius: 1px !important;
    background: #eeecec !important;
    padding: 2px 4px;
    text-decoration: none;
    background: #f9f9f9;
}
  .sel-pill:hover{ background:#f7fbff; }
  .sel-thumb{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex:0 0 64px; }
  .sel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sel-title{ font-weight:800; font-size:16px; line-height:1.3; margin:0 0 4px; color:#111827; }
  .sel-excerpt{ font-size:14px; line-height:1.35; color:#374151;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sel-meta{ font-size:12px; color:#6b7280; margin-top:4px; }
  .sel-badge{ font-weight:700; color:#0b7fd1; }



  .photo-stories .title{
    position:absolute; left:16px; right:0px; bottom:14px; color:#fff;
    font-weight:800; line-height:1.3; text-shadow:0 2px 10px rgba(0,0,0,.6);
    font-size: clamp(1rem, 1.2vw + .7rem, 1.5rem);
  }
  .photo-stories .small-title{
    font-weight:700;
    font-size: clamp(.9rem, .6vw + .6rem, 1rem);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* টাইটেলের গ্রেডিয়েন্ট + আন্ডারলাইন (থাকলে) */
  .photo-stories.colorful .gradient-title{
    font-weight: 900;
    background: linear-gradient(90deg,#ff4d4d,#ff2bd7,#3b82f6,#22d3ee,#22c55e,#f59e0b);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    position: relative; display: inline-block;
    font-size: clamp(1.1rem, 1vw + 1rem, 1.6rem);
  }
  .photo-stories.colorful .gradient-title::after{
    content:""; display:block; height:4px;  margin-top:6px;
    background: linear-gradient(90deg,#ff4d4d,#ff2bd7,#3b82f6,#22d3ee,#22c55e,#f59e0b);
  }

  /* চাইলে গ্রেডিয়েন্ট অফ করতে (আপনার আগের মতো):
  .photo-stories .gradient-title{ background:none!important; -webkit-background-clip:initial!important; background-clip:initial!important; color:inherit!important; }
  .photo-stories .gradient-title::after{ display:none!important; } */

  /* ====== কার্ড বেস ====== */
  /* === Card: fixed 16:9 ratio + absolute img === */
.photo-stories .gallery-card{ display:block; height:100%; }
.photo-stories .gallery-card .card-inner{
  position:relative; overflow:hidden; border-radius:16px; background:#0c0e13;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
/* height তৈরি হবে এই pseudo-element দিয়ে (16:9) */
.photo-stories .gallery-card .card-inner::before{
  content:""; display:block; padding-top:56.25%; /* 16:9 */
}
/* ভেতরের সবকিছু absolute */
.photo-stories .gallery-card .card-inner > img,
.photo-stories .gallery-card .card-inner > .overlay{
  position:absolute; inset:0;
}
.photo-stories .gallery-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform .5s ease;
}
@media (hover:hover){
  .photo-stories .gallery-card:hover img{ transform:scale(1.06); }
}
.photo-stories .overlay{
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.photo-stories .title{
  position:absolute; left:16px; right:16px; bottom:14px; color:#fff;
  font-weight:800; line-height:1.3; text-shadow:0 2px 10px rgba(0,0,0,.6);
  font-size:clamp(1rem,1.2vw+.7rem,1.5rem);
}
.photo-stories .small-title{
  font-weight:700; font-size:clamp(.9rem,.6vw+.6rem,1rem);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Container & border (যেমন ছিল) */
.photo-stories{ border:1px solid #d9d9d9; border-radius:0px; padding:16px; }
.photo-stories .gborder{ border-radius:18px; padding:2px;
  background:linear-gradient(135deg,#ff4d4d,#ff2bd7,#3b82f6,#22d3ee,#22c55e,#f59e0b);
  background-size:300% 300%; animation:rainbow 6s ease infinite;
  box-shadow:0 8px 24px rgba(34,211,238,.15);
}
.photo-stories .gborder .card-inner{ border-radius:16px; }
.photo-stories .gborder:hover{ box-shadow:0 10px 30px rgba(255,45,85,.25); }
@keyframes rainbow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@media (prefers-reduced-motion:reduce){
  .photo-stories .gborder{ animation:none } .photo-stories .gallery-card img{ transition:none }
}

.video-card{ position:relative; overflow:hidden; border-radius:12px; }
  .video-thumb{ height:190px; object-fit:cover; display:block; }
  .play-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .play-badge{
    width:58px; height:58px; border-radius:50%;
    background: rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(2px);
    transition: background .2s ease;
  }
  .video-card:hover .play-badge{ background: rgba(0,0,0,.75); }
  .play-badge svg{ width:22px; height:22px; fill:#fff; margin-left:2px; }

  .two-line{
    font-weight:600; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  .card:hover { transform: translateY(-3px); transition: .2s; }
.news-title { font-size:1.1rem; font-weight:600; line-height:1.3; margin-bottom:.4rem; }
.news-excerpt { color:#475569; font-size:.95rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.meta { font-size:.85rem; color:#6b7280; }
.quick-buttons .btn{ white-space:nowrap; }

.arch-item { display:flex; gap:14px; align-items:flex-start; }
.arch-thumb { width:160px; min-width:160px; height:100px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#f1f5f9,#e2e8f0); }
.arch-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:575.98px){
  .arch-item{ flex-direction:column; }
  .arch-thumb{ width:100%; height:180px; }
}



/* Header/Breadcrumb/Chips */
.single-hero{ background:linear-gradient(120deg,#f8fbff,#eef4ff); border:1px solid #eaf0ff; border-radius:16px; padding:16px 18px; }
.badge-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; font-weight:600; border:1px solid #dbe4ff; background:#edf2ff; color:#3152ff; }
.badge-chip:hover{ text-decoration:none; background:#e7eeff; }

/* Title + Subtitles */
.news-title{ font-weight:800; line-height:1.25; margin:0; }
.news-sub{ font-weight:700; color:#334155; margin:.35rem 0 0; padding-left:12px; border-left:4px solid #0d6efd; }
.news-sub.second{ border-left-color:#6b7280; color:#475569; }

/* Meta */
.news-meta{ color:#6b7280; font-size:.92rem; }

/* Figure / caption */
.figure-edge img{ border-radius:14px; }
.figure-edge figcaption{ 
  color:#6b7280; background:#f8fafc; border:1px solid #eef2f7; 
  font-size:.92rem; border-radius:10px; padding:.5rem .75rem; 
  display:flex; align-items:center; gap:.5rem;
}
.figure-edge figcaption:before{ content:"🖼️"; }

/* Content */
.content-body{ font-size:1.125rem; line-height:1.9; }
.content-body p{ margin-bottom:1rem; }
.content-body img{ max-width:100%; height:auto; border-radius:12px; }

/* Sidebar latest */
.sidebar-sticky{ position: sticky; top:90px; }
.latest-list .item{ display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .6rem; border-radius:10px; }
.latest-list .item:hover{ background:#f8fafc; }
.latest-thumb{ width:64px; height:48px; object-fit:cover; border-radius:8px; }

/* Section title */
.section-title{ display:flex; align-items:center; gap:.5rem; font-weight:800; margin:0; }
.section-title:before{ content:""; width:6px; height:22px; background:#0d6efd; border-radius:3px; }

/* Related cards */
.card-related{ border:1px solid #eef2f7; border-radius:16px; overflow:hidden; height:100%; transition: transform .18s ease, box-shadow .18s ease; }
.card-related:hover{ transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.card-related .thumb{ height:160px; object-fit:cover; }
.card-related .title{ font-size:1rem; font-weight:700; line-height:1.35; margin:0; }
.card-related time{ color:#6b7280; font-size:.85rem; }

/* Tags + share */
.tags a.badge{ border-radius:999px; }
.share-btns .btn{ border-radius:999px; }

/* Divider */
.divider-soft{ height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent); margin:1rem 0; }


/* --- Minimal polish for the search page --- */
.search-header {
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.search-badge {
    font-size:.9rem; padding:.35rem .6rem; border-radius:999px; background:#eef2ff; color:#3730a3;
}
.card:hover { transform: translateY(-3px); transition: transform .2s ease, box-shadow .2s ease; }
.card-img-top { object-fit: cover; height: 180px; }
.news-title {
    font-size:1.05rem; font-weight:600; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-excerpt {
    color:#475569; font-size:.95rem;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.placeholder {
    height:180px; background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
    display:flex; align-items:center; justify-content:center; color:#64748b; font-weight:600;
}
.result-meta { font-size:.85rem; color:#6b7280; }


  :root{
    --sd-accent:#f97316;
    --sd-border:#e5e7eb;
    --sd-muted:#6b7280;
    --sd-bg:#fafafa;
  }
  .sd-wrap{border:1px solid var(--sd-border);border-radius:16px;padding:16px;background:#fff}
  .sd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
  .sd-title{display:flex;gap:10px;align-items:center;font-weight:800;font-size:22px}
  .sd-accent-bar{width:6px;height:22px;background:var(--sd-accent);border-radius:3px}
  .sd-more{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #111;border-radius:999px;text-decoration:none;color:#111;font-weight:600}
  .sd-more:hover{background:#111;color:#fff}

  .sd-card{border:1px solid #eee;border-radius:14px;overflow:hidden;height:100%;background:#fff;transition:transform .15s ease, box-shadow .15s ease}
  .sd-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.06)}
  .sd-thumb{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#f1f5f9,#e2e8f0)}
  .sd-thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .sd-thumb.no-img{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);}
  .sd-chip{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 8px;border-radius:999px}
  .sd-body{padding:10px}
  .sd-title-sm{font-size:15px;font-weight:700;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sd-time{font-size:12px;color:var(--sd-muted);margin-top:6px}

  .sd-sidebar{border:1px solid var(--sd-border);border-radius:16px;padding:14px;background:#fff;position:sticky;top:16px}
  .sd-side-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin-bottom:12px}
  .form-label{font-size:12px;color:var(--sd-muted);margin-bottom:6px}
  .form-select{height:42px;border-radius:10px}
  .btn-follow{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border:0;border-radius:10px;background:var(--sd-accent);color:#fff;font-weight:700;width:100%}
  .btn-follow:hover{opacity:.92}

  .sd-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
  .sd-chip-filter{background:var(--sd-bg);border:1px solid var(--sd-border);padding:6px 10px;border-radius:999px;font-size:12px}
  .sd-filter-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
  .sd-reset{color:#ef4444;text-decoration:none;font-size:13px}
  .sd-reset:hover{text-decoration:underline}



    /* === Zoom frame with corner logo (CSS-only) === */
.zoom-frame{
  --logo-size: 26px;           /* ← লোগো সাইজ এখানেই বদলান */
  position: relative;
  border: 2px solid #0f766e;   /* teal রঙের রানার */
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

/* উপরের বাম কোণায় লোগো; বর্ডারের ওপর ভাসে বলে বর্ডার এখানে কাটা দেখাবে */
.zoom-frame .zoom-logo{
  position: absolute;
  left: 14px;
  top: -14px;                  /* বর্ডারের ওপর উঠে আসবে */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 800;
  color: #0f766e;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.zoom-frame .zoom-logo img{
  display: block;
  height: var(--logo-size);
  width: auto;
}

/* ভেতরের কন্টেন্ট বক্স */
.zoom-frame .zoom-content{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
}

/* ক্যানভাস আগের মতোই 100% */
.zoom-frame canvas{ width:100%; height:auto; display:block; }

/* Header layout: always one line */
.ep-head{
  display:grid;
  grid-template-columns:auto 1fr auto; /* LEFT | CENTER | RIGHT */
  align-items:center;
  gap:12px;
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;
  padding:10px 14px;margin-bottom:12px;box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.ep-title{font-weight:800;font-size:20px}
.ep-sub{color:#6b7280;font-size:13px}

/* Center chips container shrinkable */
.ep-center{min-width:0;}
.ep-pages-scroll{
  display:flex;gap:.5rem;align-items:center;overflow:auto;scroll-snap-type:x mandatory;
  padding:6px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#f8fafc;width:100%;min-width:0;
}
.ep-pages-scroll::-webkit-scrollbar{height:6px}
.ep-pages-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}
.ep-pages-scroll{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}
.ep-page-pill{
  scroll-snap-align:center;display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;
  font-weight:600;font-size:.9rem;color:#374151;text-decoration:none;line-height:1;transition:all .12s;white-space:nowrap;
}
.ep-page-pill:hover{border-color:#c7d2fe;box-shadow:inset 0 0 0 1px #c7d2fe}
.ep-page-pill.active{background:#0d6efd;color:#fff;border-color:#0d6efd}
@media (max-width:991.98px){ .ep-title{font-size:18px} }

/* Thumbs: single-column left */
.thumbs-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .5rem;
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding-right: .25rem;
}
.thumbs-grid .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.active{ outline:2px solid #0d6efd; border-radius:6px; }

/* Full Page Modal (cropper) */
#fpModal .modal-dialog{ max-width:98vw; margin:1rem auto }
#fpModal .modal-body{ padding:0 }
#fpModal .fp-wrap{ position:relative; display:block; width:100%; max-height:calc(100vh - 140px); overflow:auto; background:transparent; text-align:center }
#fpModal .fp-wrap img{ display:block; width:100%; height:auto; max-height:none }
#fpModal .fp-sel{ position:absolute; border:2px solid #0d6efd; border-radius:4px; box-shadow:0 0 0 9999px rgba(0,0,0,.35); pointer-events:none }
.viewer-fp-btn{ position:absolute; top:8px; right:8px; z-index:10; box-shadow:0 3px 10px rgba(0,0,0,.15) }
#zoomCanvas{ cursor: zoom-in; }

/* Theme vars for zoom-card */
:root{
  --card-outer: 8px;
  --card-pad: 12px;
  --card-border: 2px;
  --card-radius: 16px;
  --card-header: 88px;
  --card-contpad: 8px;
}
body { background:#f6f7f9; }

/* Thumbs wrapper */
.thumbs-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px;position:sticky;top:12px}
.thumbs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;max-height:calc(100vh - 170px);overflow:auto;padding-right:.25rem}
.thumb{position:relative;border:1px solid #dee2e6;border-radius:.5rem;overflow:hidden;background:#fff;cursor:pointer;transition:transform .12s}
.thumb:hover{transform:translateY(-2px)}
.thumb img{width:100%;display:block;height:auto}
.thumb .badge{position:absolute;top:.25rem;left:.25rem;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem}
@media (max-width:991.98px){
  .thumbs-grid{display:grid;grid-template-columns:repeat(1,110px);grid-auto-flow:column;overflow-x:auto;overflow-y:hidden;max-height:unset}
  .thumb img{height:150px;object-fit:cover}
}

/* Viewer */
#viewerCard{background:#111;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
#viewerWrap{position:relative}
#pageImg{display:block;max-width:100%;height:auto;margin:0 auto;user-select:none;-webkit-user-drag:none}

/* Hotspots */
.hotspot{
  position:absolute;border:2px solid transparent;background:transparent;border-radius:.35rem;
  cursor:pointer;transition:box-shadow .12s, background .12s, border-color .12s;z-index:3;pointer-events:auto;
}
@media (hover:hover){
  .hotspot:hover{border-color:rgba(0,190,255,.95);background:rgba(0,190,255,.18);box-shadow:0 0 0 3px rgba(13,110,253,.25) inset}
}
.hotspot.active{border-color:rgba(0,190,255,.95);background:rgba(0,190,255,.18);box-shadow:0 0 0 3px rgba(13,110,253,.25) inset}
.hotspot:focus-visible{outline:2px solid rgba(0,190,255,.9)}

/* Zoom panel (right) */
.zoom-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;position:sticky;top:12px}
.zoom-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.zoom-meta{color:#6b7280;font-size:12px}
.zoom-wrap{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:6px}
#zoomCanvas, #zoomCanvasM{width:100%;height:auto;display:block}

/* Mobile zoom modal */
.modal-zoom .modal-dialog{width:auto;max-width:min(900px,calc(100vw - 2rem));margin:1rem auto}
.modal-zoom .modal-content{border-radius:14px}
.modal-zoom .modal-body{padding:12px}


/* ====== Category page UI ====== */
.page-head { background:linear-gradient(120deg,#f8fbff,#eef4ff); border:1px solid #eaf0ff; border-radius:16px; padding:16px 18px; }
.page-head .title { font-weight:800; margin:0; }
.breadcrumb { --bs-breadcrumb-divider: '›'; }

.card-news{ border:1px solid #eef2f7; border-radius:16px; overflow:hidden; height:100%;
  transition:transform .18s ease, box-shadow .18s ease; background:#fff; }
.card-news:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.card-news .thumb{ width:100%; height:180px; object-fit:cover; }
.card-news .meta{ color:#6b7280; font-size:.85rem; }

.sidebar-sticky{ position:sticky; top:90px; }
.latest-list .item{ display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .6rem; border-radius:10px; }
.latest-list .item:hover{ background:#f8fafc; }
.latest-thumb{ width:64px; height:48px; object-fit:cover; border-radius:8px; }
.section-title{ display:flex; align-items:center; gap:.5rem; font-weight:800; margin:0; }
.section-title:before{ content:""; width:6px; height:22px; background:#0d6efd; border-radius:3px; }
.divider-soft{ height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent); margin:1rem 0; }



/* ====== C:\xampp\htdocs\anews\app\app\Views\frontend\sections\layout1.php page UI ====== */
/* ===== Scoped to this block only ===== */
.news-scope{
  --gap:12px; --title-lines:2; --title2-lines:2;
  --accent:#0ea5e9; --ink:#0f172a; --text:#111; --muted:#6b7280;
}

/* link reset (blue/underline off) */
.news-scope a,
.news-scope a:link,
.news-scope a:visited{color:var(--text) !important; text-decoration:none !important}
.news-scope a:hover,
.news-scope a:focus{color:var(--text) !important; text-decoration:none !important; outline:none}

/* container */
.news-scope .sec-wrap{border:1px solid #e5e7eb;border-radius:1px;padding:10px;background:#ffffff}
.news-scope .sec-head {
    display: flex
;
    align-items: center;
    margin: 2px 0 8px 0;
    flex-direction: row;
    flex-wrap: nowrap;
}
.news-scope .sec-title a,.news-scope .sec-title span{font-size:22px;font-weight:800;line-height:1.15;color:var(--ink)}
/* (Removed underline under section title on purpose) */
.news-scope .sec-more{width:40px;height:40px;border:1px solid var(--ink);border-radius:999px;display:flex;align-items:center;justify-content:center;color:#cacbcb;background:var(--ink)}

/* category label — newspaper style (NO round dot) */
.news-scope .cat-label{
  position:relative; display:inline-block;
  font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink); padding-left:10px; line-height:1; margin:0 0 6px 0;
}
.news-scope .cat-label:before{
  content:""; position:absolute; left:0; top:0.15em; bottom:0.15em;
  width:4px; background:var(--accent); border-radius:2px;
}

/* lead card (fixed aspect for equal height) */
.news-scope .lead-card{display:block;border:0;border-radius:12px;overflow:hidden}
.news-scope .lead-media{position:relative;width:100%;aspect-ratio:16/9;background:#f3f4f6;border-radius:12px}
.news-scope .lead-media::before{content:"";display:block;padding-top:56.25%} /* fallback */
.news-scope .lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.news-scope .lead-body{padding:8px 2px}
.news-scope .lead-title{
  font-weight:800; line-height:1.3; margin:4px 0 2px 0;
  display:-webkit-box; -webkit-line-clamp:var(--title-lines); -webkit-box-orient:vertical; overflow:hidden;
}
.news-scope .lead-ex{
  color:var(--muted); margin:6px 0 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-scope .meta{color:var(--muted);font-size:13px;margin-top:2px} /* no bullet, no dot */

/* middle column: uniform rows */
.news-scope .h-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #eee}
.news-scope .h-item:last-child{border-bottom:none}
.news-scope .h-thumb{width:96px;height:72px;flex:0 0 96px;border-radius:10px;object-fit:cover;background:#f3f4f6;display:block}
.news-scope .h-title{
  font-weight:700; line-height:1.35; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:var(--title-lines); -webkit-box-orient:vertical; overflow:hidden;
}

/* right column: title only */
.news-scope .title-list{list-style:none;margin:0;padding:0}
.news-scope .title-list li{border-bottom:1px solid #eee}
.news-scope .title-list li:last-child{border-bottom:none}
.news-scope .title-list a{display:flex;gap:8px;align-items:flex-start;padding:10px 0}
.news-scope .chev{font-weight:900;margin-right:2px}
.news-scope .t2 {
    font-weight: 700;
    font-size: 19px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: var(--title2-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-scope .t2 .t2-cat{font-weight:700;font-size:12px;color:var(--ink)}

/* latest */
.news-scope .latest-card img{border-radius:10px;display:block}

/* mobile tuning */
@media (max-width: 576px){
  .news-scope .h-item{gap:8px}
  .news-scope .h-thumb{width:84px;height:64px;flex-basis:84px}
  .news-scope .t2{font-size:15px}
  .news-scope .lead-media::before{padding-top:62%}
}

/* link reset (blue/underline off) */
/* ===== Scoped to this block only ===== */
.news-scope{
  --ink:#0f172a; --text:#111; --muted:#6b7280; --radius:14px;
}
.news-scope a,
.news-scope a:link,
.news-scope a:visited{color:var(--text); text-decoration:none}
.news-scope a:hover{color:var(--text); text-decoration:none}

/* wrapper */
.news-scope .wrap{border:1px solid #e5e7eb;border-radius:var(--radius);background:#fff;padding:14px}

/* >>> CATEGORY HEADER (exactly as requested) */
.news-scope .pro-head{display:flex;align-items:center}
.news-scope .pro-title{display:flex;align-items:center;gap:8px}
.news-scope .pro-title a,.news-scope .pro-title span{
  font-weight:900;font-size:22px;line-height:1.1;color:var(--ink);
}

/* ফেড লাইন: টাইটেলের পর থেকে ডানদিকে ধীরে ধীরে মিলিয়ে যাবে */
.news-scope .fade-line{
  flex:1 1 auto;height:2px;margin:0 12px;border-radius:2px;
  background:linear-gradient(90deg, rgba(17,24,39,.18) 0%, rgba(17,24,39,0) 100%);
}

/* ডানদিকে কালো গোল আইকন (arrow) */
.news-scope .sec-next{
  width:44px;height:44px;border-radius:50%;background:#111;color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 44px;
}

/* GRID: বাম ৯-কলাম */
.news-scope .news-card{
  position:relative;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;height:100%;
  /* হালকা রঙিন বক্স চাইলে এই দুই লাইন রেখে দিন; না চাইলে মুছে দিন */
  --accent-bg:rgba(14,165,233,.06);
  background-image:linear-gradient(180deg, var(--accent-bg), #fff 60%);
  box-shadow:0 1px 0 rgba(17,24,39,.04);
}
.news-scope .news-media{position:relative;width:100%;aspect-ratio:16/9;background:#f3f4f6}
.news-scope .news-media::before{content:"";display:block;padding-top:56.25%} /* fallback */
.news-scope .news-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.news-scope .news-body{padding:10px}
.news-scope .news-title{
  font-weight:800;font-size:16px;line-height:1.35;margin:2px 0 6px 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-scope .news-meta{color:var(--muted);font-size:12px}

/* ডান ৩-কলাম বিজ্ঞাপন */
.news-scope .ad-slot{border:1px dashed #cbd5e1;border-radius:var(--radius);background:#f8fafc;min-height:100%;padding:12px}
.news-scope .ad-dummy{width:100%;height:250px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;margin-bottom:12px}

/* Mobile */
@media (max-width:576px){
  .news-scope .news-title{font-size:15px}
}


.cat-wrap{border:1px solid #e5e7eb;border-radius:12px;padding:14px;height:100%}
  .cat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .cat-title{font-size:20px;font-weight:800}
  .cat-more{font-size:14px;text-decoration:none;color:#111}
  .hero-img{height:200px;object-fit:cover;border-radius:10px}
  .hero-title{font-size:16px;font-weight:700;line-height:1.4;margin-top:6px}
  .list-news{font-size:14px;line-height:1.5;margin-top:6px}
  .list-news a{display:block;text-decoration:none;color:#111;margin-bottom:6px}
  .list-news a:hover{color:#d00}


   :root{
    --thumb-w: 160px;    /* সাইড লিস্ট থাম্বের প্রস্থ (ডেস্কটপ) */
    --gap: 12px;
  }

  .object-fit-cover{ object-fit:cover; }
  .line-2{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* === FEATURED (মাঝে বড়) === */
  .feature-hero{ position:relative; overflow:hidden; border-radius:.4rem; border:1px solid #eee; }
  .feature-hero .headline-band{
    position:absolute; left:0; right:0; bottom:.9rem; display:flex; justify-content:center; padding:0 .5rem;
  }
  .feature-hero .headline-band .band{
    background:#c8131a; color:#fff; font-weight:800; padding:.5rem 1rem; border-radius:.3rem;
    max-width:96%; text-align:center; font-size:1.05rem; line-height:1.35;
  }



  /* === নিচের ফটো কার্ড গ্রিড (সমান সাইজ) === */
  .photo-card{ border:1px solid #eee; border-radius:.4rem; background:#fff; overflow:hidden; height:100%; display:flex; flex-direction:column; }
  .photo-card .pc-img{ width:100%; }
  .photo-card .pc-img .ratio{ width:100%; }
  .photo-card .pc-img img{ width:100%; height:100%; object-fit:cover; }
  .photo-card .pc-title{ font-weight:700; color:#111; padding:.65rem .8rem; line-height:1.35; display:block; text-decoration:none; }
  .photo-card .pc-title:hover{ text-decoration:underline; }
  .photo-card .pc-title.line-2{ min-height:calc(1.35em * 2 + .6rem); } /* ২ লাইন ধরে সমান উচ্চতা */

  /* === AD column (ডানে 2-col) === */
  .ad-slot{ min-height:250px; border:1px solid #eee; border-radius:.4rem; background:#f8f9fa;
            display:flex; align-items:center; justify-content:center; }
  .ad-tall{ min-height:600px; }
  @media (min-width: 992px){ .ad-sticky{ position:sticky; top:72px; } }

  /* === Responsive tune === */
  @media (max-width: 1199.98px){
    :root{ --thumb-w: 148px; }
  }
  @media (max-width: 991.98px){
    :root{ --thumb-w: 140px; }
  }
  @media (max-width: 575.98px){
    :root{ --thumb-w: 120px; }
    .media-sm{ padding:.55rem 0; }
    .feature-hero .headline-band .band{ font-size:.98rem; }
  }


    .l6-title{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px;margin-bottom:10px}
  .l6-title .bar{width:6px;height:18px;background:#f97316;border-radius:3px}
  .cat-wrap{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:12px;height:100%}

  /* grp1: গোল ছবি কার্ড */
  .op-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid #fee2e2;border-radius:10px;margin-bottom:10px;background:#fff7f7;transition:transform .12s, box-shadow .12s}
  .op-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.06)}
  .op-avatar{width:64px;height:64px;border-radius:999px;object-fit:cover;flex-shrink:0;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.08)}
  .op-tt{font-size:15px;font-weight:700;line-height:1.35;margin:0 0 4px}
  .op-ex{font-size:13px;color:#6b7280;margin:0}

  /* grp2: রঙিন ব্লক */
  .ed-wrap{border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%);border:1px solid #fed7aa}
  .ed-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px dashed #fdba74}
  .ed-body{padding:12px}
  .ed-hero{display:block}
  .ed-hero img{width:100%;height: 232px;object-fit:cover;border-radius:10px}
  .ed-hero h3{font-size:16px;font-weight:700;margin:8px 0 6px}
  .ed-hero p{font-size:13px;color:#6b7280;margin:0 0 6px}
  .ed-list-item{display:flex;gap:8px;align-items:flex-start;padding:8px;border:1px solid #fee2e2;background:#fff;border-radius:8px;margin-bottom:8px;text-decoration:none;color:#111}
  .ed-list-item img{width:80px;height:60px;object-fit:cover;border-radius:6px;flex-shrink:0}
  .ed-list-item h4{font-size:14px;font-weight:600;margin:0 0 4px}
  .ed-list-item p{font-size:12px;color:#6b7280;margin:0}
  .more-link{font-size:13px;font-weight:700;color:#9a3412;text-decoration:none}



  


.l8-wrap{border:1px solid #e5e7eb;border-radius:0px;background:#fff;padding:14px}
  .l8-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .l8-title{display:flex;gap:10px;align-items:center;font-weight:800;font-size:20px}
  .l8-title .bar{width:6px;height:20px;background:#f97316;border-radius:3px}

  .l8-card{border:1px solid #eee;border-radius:12px;overflow:hidden;height:100%;transition:transform .15s, box-shadow .15s}
  .l8-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06)}
  .l8-thumb{position:relative;width:100%;aspect-ratio:16/9;background:#f5f5f5}
  .l8-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .l8-body{padding:10px}
  .l8-title-sm{font-size:15px;font-weight:700;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .l8-time{font-size:12px;color:#6b7280;margin-top:6px}

  .l8-sidebar{border:1px solid #e5e7eb;border-radius:14px;padding:14px;position:sticky;top:16px;background:#fff}
  .l8-label{font-size:12px;color:#6b7280;margin-bottom:6px}
  .form-select{height:42px;border-radius:10px}
  .btn-go{height:42px;border-radius:10px;background:#f97316;color:#fff;border:0;font-weight:700;width:100%}
  .btn-go:hover{opacity:.92}


  /* Submenu positioning */
/* multi-level dropdown positioning */
.dropdown-submenu { position: relative; }

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.25rem;
}

/* মোবাইলে সাবমেনু ডানদিকে না গিয়ে নিচে নামবে */
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
    left: 0;
    margin-left: 0;
  }
}


.sel-pill{ display:block; height:100%; border:2px solid #1ea7ff; border-radius:9999px; 
             background:#fff; padding:2px 4px; text-decoration:none; }
  .sel-pill:hover{ background:#f7fbff; }
  .sel-thumb{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex:0 0 64px; }
  .sel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sel-title{ font-weight:800; font-size:16px; line-height:1.3; margin:0 0 4px; color:#111827; }
  .sel-excerpt{ font-size:14px; line-height:1.35; color:#374151;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sel-meta{ font-size:12px; color:#6b7280; margin-top:4px; }
  .sel-badge{ font-weight:700; color:#0b7fd1; }



  .list-news{font-size:14px;line-height:1.5;margin-top:6px}
  .list-news a{
      display:flex;
      align-items:flex-start;
      gap:8px;
      text-decoration:none;
      color:#111;
      margin-bottom:10px;
  }
  .list-news a:hover{color:#d00}
  .list-news img{
      width:70px;
      height:55px;
      object-fit:cover;
      border-radius:6px;
      flex-shrink:0;
  }
  .list-news .lt{
      flex:1;
      line-height:1.4;
      font-size:14px;
      font-weight:500;
  }

   :root{ --admin-header-h:56px; }
  .ui-wrap{max-width:1200px;margin:0 auto;}
  .ui-toolbar{position:sticky;top:var(--admin-header-h);z-index:1030;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);}
  .ui-toolbar .form-control{height:38px}
  .ui-tip{font-size:12.5px;color:#475569;background:#f8fafc;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:.5rem .75rem}
  .ui-stats{font-size:12.5px;color:#6b7280}
  .ui-actions .btn{padding:.3rem .55rem}
  .ui-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  @media (max-width:991.98px){.ui-grid{grid-template-columns:1fr}}
  .ui-card{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px;background:#fff}
  .ui-card.changed{box-shadow:0 4px 18px rgba(0,0,0,.06);border-color:#facc15;background:#fffbeb}
  .ui-key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
  .ui-en{font-size:.92rem;color:#475569;background:#f8fafc;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:.5rem .6rem;line-height:1.35;margin-top:8px;max-height:4.2em;overflow:hidden}
  .ui-ovr-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 6px}
  .ui-pill{display:inline-block;font-size:12px;padding:.2rem .5rem;border-radius:999px;border:1px solid}
  .pill-default{color:#475569;border-color:#cbd5e1;background:#f8fafc}
  .pill-custom{color:#065f46;border-color:#86efac;background:#ecfdf5}
  .ui-rightmini{display:flex;align-items:center;gap:10px;font-size:12px;color:#64748b}
  .ui-rightmini .btn-reset{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:.2rem .5rem;line-height:1}
  .ui-override{resize:vertical;min-height:2.6em;height:2.6em;max-height:5.4em;line-height:1.35;font-size:.94rem;padding:.4rem .55rem}
  .ui-head-actions{display:flex;align-items:center;gap:8px}



  .poll-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.poll-head{padding:10px 12px;border-bottom:1px solid #f1f5f9;display:flex;gap:10px;align-items:center}
.poll-body{padding:12px}
.poll-title{font-weight:800;margin:0}
.poll-img{width:100%;max-height:250px;object-fit:cover;border-radius:10px;margin-bottom:10px}
.poll-opt{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #eee;border-radius:10px;margin-bottom:8px}
.poll-opt input{margin-top:2px}
.poll-btn{display:inline-flex;align-items:center;gap:6px;height:40px;border:0;border-radius:8px;background:#f97316;color:#fff;font-weight:700;padding:0 14px}
.poll-meta{font-size:12px;color:#64748b;margin-top:6px}
.bar{height:10px;background:#fecaca;border-radius:999px;overflow:hidden}
.bar > span{display:block;height:100%;background:#ef4444}





 .thumb-img{width:72px;height:96px;object-fit:cover;border:1px solid #e7e7e7;border-radius:4px}
  .thumb-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;border:1px solid #eee;background:#fff;margin-bottom:8px;cursor:pointer;transition:transform .08s ease, box-shadow .12s ease}
  .thumb-item.active{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.12)}
  .thumb-item:hover{transform:translateY(-1px)}
  .paper-frame{border:1px solid #e4e7ec;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06)}
  .paper-header{border-bottom:1px solid #f1f3f5;padding:10px 14px;text-align:center}
  .brand-logo{max-height:42px}
  .brand-fallback{font-weight:700;font-size:20px}
  .pub-date{font-size:14px;color:#6c757d}
  .viewer-wrap{position:relative}
  .viewer-wrap img{width:100%;height:auto;display:block;border-radius:8px}
  .overlay{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:8px;pointer-events:none}
  .hs{position:absolute;border:0;background:transparent;cursor:pointer;pointer-events:auto}
  #zoomPanel{border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:8px}
  #zoomPanel img{max-width:100%;height:auto;display:block;border-radius:6px}
  #zoomModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:10000}
  #zoomInner{position:absolute;inset:5%;overflow:auto;background:#111;border-radius:8px;padding:8px}
  #zoomInner img{width:100%;height:auto;display:block}
  #zoomClose{position:absolute;top:8px;right:12px;font-size:28px;color:#fff;cursor:pointer}




/* \app\Views\frontend\saradesh.php */
  :root{
    --sd-accent:#f97316;      /* orange */
    --sd-border:#e5e7eb;      /* gray-200 */
    --sd-muted:#6b7280;       /* gray-500 */
    --sd-bg:#fafafa;
  }
  .sd-wrap{border:1px solid var(--sd-border);border-radius:16px;padding:16px;background:#fff}
  .sd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
  .sd-title{display:flex;gap:10px;align-items:center;font-weight:800;font-size:22px}
  .sd-accent-bar{width:6px;height:22px;background:var(--sd-accent);border-radius:3px}
  .sd-more{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #111;border-radius:999px;
           text-decoration:none;color:#111;font-weight:600}
  .sd-more:hover{background:#111;color:#fff}

  .sd-card{border:1px solid #eee;border-radius:14px;overflow:hidden;height:100%;background:#fff;
           transition:transform .15s ease, box-shadow .15s ease}
  .sd-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.06)}
  .sd-thumb{position:relative;width:100%;aspect-ratio:16/9;background:#f4f4f5}
  .sd-thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .sd-chip{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;
           padding:3px 8px;border-radius:999px}
  .sd-body{padding:10px}
  .sd-title-sm{font-size:15px;font-weight:700;line-height:1.35;margin:0;
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sd-time{font-size:12px;color:var(--sd-muted);margin-top:6px}

  .sd-sidebar{border:1px solid var(--sd-border);border-radius:16px;padding:14px;background:#fff;position:sticky;top:16px}
  .sd-side-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin-bottom:12px}
  .form-label{font-size:12px;color:var(--sd-muted);margin-bottom:6px}
  .form-select{height:42px;border-radius:10px}
  .btn-follow{display:inline-flex;align-items:center;justify-content:center;gap:8px;
              height:42px;border:0;border-radius:10px;background:var(--sd-accent);color:#fff;font-weight:700;width:100%}
  .btn-follow:hover{opacity:.92}

  .sd-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
  .sd-chip-filter{background:var(--sd-bg);border:1px solid var(--sd-border);padding:6px 10px;border-radius:999px;font-size:12px}
  .sd-filter-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
  .sd-reset{color:#ef4444;text-decoration:none;font-size:13px}
  .sd-reset:hover{text-decoration:underline}



/* \app\Views\frontend\home.php */


  h3.mb-2.fw-bold.lh-sm {
    font-size: 36px;
    line-height: 35px !important;
}
p.text-muted.mb-0 {
    font-size: 19px;
    line-height: 25px;
    color: black;
}
h6.mb-1.fw-semibold {
    font-size: 18px;
}
h6.mb-0.fw-semibold {
    font-size: 20px;
}


 .sel-pill{ display:block; height:100%; border:2px solid #1ea7ff; border-radius:9999px; 
             background:#fff; padding:2px 4px; text-decoration:none; }
  .sel-pill:hover{ background:#f7fbff; }
  .sel-thumb{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex:0 0 64px; }
  .sel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sel-title{ font-weight:800; font-size:16px; line-height:1.3; margin:0 0 4px; color:#111827; }
  .sel-excerpt{ font-size:14px; line-height:1.35; color:#374151;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sel-meta{ font-size:12px; color:#6b7280; margin-top:4px; }
  .sel-badge{ font-weight:700; color:#0b7fd1; }
  @media (max-width: 576px) {
  /* কলামের গ্যাপ কমানো */
  .row.g-3 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
  }

  /* থাম্বনেইল ছোট */
  .sel-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  /* শিরোনাম ও টেক্সট ছোট */
  .sel-title {
    font-size: 14px;
    line-height: 1.2;
  }
  .sel-excerpt {
    font-size: 12px;
  }

  /* বর্ডার পাতলা */
  .sel-pill {
    border: 1px solid #1ea7ff;
    padding: 2px 3px;
  }
}

.photo-stories .title{
    position:absolute; left:16px; right:16px; bottom:14px; color:#fff;
    font-weight:800; line-height:1.3; text-shadow:0 2px 10px rgba(0,0,0,.6);
    font-size: clamp(1rem, 1.2vw + .7rem, 1.5rem);
  }
  .photo-stories .small-title{
    font-weight:700;
    font-size: clamp(.9rem, .6vw + .6rem, 1rem);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* টাইটেলের গ্রেডিয়েন্ট + আন্ডারলাইন (থাকলে) */
  .photo-stories.colorful .gradient-title{
    font-weight: 900;
    background: linear-gradient(90deg,#ff4d4d,#ff2bd7,#3b82f6,#22d3ee,#22c55e,#f59e0b);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    position: relative; display: inline-block;
    font-size: clamp(1.1rem, 1vw + 1rem, 1.6rem);
  }
  .photo-stories.colorful .gradient-title::after{
    content:""; display:block; height:4px; border-radius:999px; margin-top:6px;
    background: linear-gradient(90deg,#ff4d4d,#ff2bd7,#3b82f6,#22d3ee,#22c55e,#f59e0b);
  }

  /* চাইলে গ্রেডিয়েন্ট অফ করতে (আপনার আগের মতো):
  .photo-stories .gradient-title{ background:none!important; -webkit-background-clip:initial!important; background-clip:initial!important; color:inherit!important; }
  .photo-stories .gradient-title::after{ display:none!important; } */

  /* ====== কার্ড বেস ====== */
  /* === Card: fixed 16:9 ratio + absolute img === */
.photo-stories .gallery-card{ display:block; height:100%; }
.photo-stories .gallery-card .card-inner{
  position:relative; overflow:hidden; border-radius:16px; background:#0c0e13;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
/* height তৈরি হবে এই pseudo-element দিয়ে (16:9) */
.photo-stories .gallery-card .card-inner::before{
  content:""; display:block; padding-top:56.25%; /* 16:9 */
}
/* ভেতরের সবকিছু absolute */
.photo-stories .gallery-card .card-inner > img,
.photo-stories .gallery-card .card-inner > .overlay{
  position:absolute; inset:0;
}
.photo-stories .gallery-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform .5s ease;
}
@media (hover:hover){
  .photo-stories .gallery-card:hover img{ transform:scale(1.06); }
}
.photo-stories .overlay{
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.photo-stories .title{
  position:absolute; left:16px; right:16px; bottom:14px; color:#fff;
  font-weight:800; line-height:1.3; text-shadow:0 2px 10px rgba(0,0,0,.6);
  font-size:clamp(1rem,1.2vw+.7rem,1.5rem);
}
.photo-stories .small-title{
  font-weight:700; font-size:clamp(.9rem,.6vw+.6rem,1rem);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Container & border (যেমন ছিল) */
.photo-stories .gborder{ border-radius:18px; padding:2px;
  background:linear-gradient(135deg,#ff4d4d,#ff2bd7,#3b82f6,#22d3ee,#22c55e,#f59e0b);
  background-size:300% 300%; animation:rainbow 6s ease infinite;
  box-shadow:0 8px 24px rgba(34,211,238,.15);
}
.photo-stories .gborder:hover{ box-shadow:0 10px 30px rgba(255,45,85,.25); }
@keyframes rainbow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@media (prefers-reduced-motion:reduce){
  .photo-stories .gborder{ animation:none } .photo-stories .gallery-card img{ transition:none }
}


.video-card{ position:relative; overflow:hidden; border-radius:12px; }
  .video-thumb{ height:190px; object-fit:cover; display:block; }
  .play-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .play-badge{
    width:58px; height:58px; border-radius:50%;
    background: rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(2px);
    transition: background .2s ease;
  }
  .video-card:hover .play-badge{ background: rgba(0,0,0,.75); }
  .play-badge svg{ width:22px; height:22px; fill:#fff; margin-left:2px; }

  .two-line{
    font-weight:600; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }


  h3.mb-3.cat.title {
    padding: 9px;
    padding-bottom: 1px;
    border-bottom: solid 2px red;
}