:root {
      --primary: #b91c1c;
      --primary-dark: #991b1b;
      --light-bg: #fdfaf7;
      --sidebar-bg: #f8f5f2;
    }


    /* for dark */
    /* :root {
      --primary: #fff;
      --primary-dark: #ccc;
      --light-bg: #293E47;
      --sidebar-bg: #1D2C33;
    } */
    body {
      background-color: var(--light-bg);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      color: #2d2d2d;
    }

    a {
      text-decoration: none;
      color: var(--primary-dark);
    }

    /* Header */
    .site-header {
      background: var(--light-bg);
      border-bottom: 1px solid var(--primary-dark);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      z-index: 1000;
    }

    .navbar-brand {
      font-weight: 800;
      color: var(--primary) !important;
      font-size: 1.55rem;
    }

    .nav-link {
      font-weight: 500;
      color: var(--primary);
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--primary-dark) !important;
    }

    /* Sidebar */
    .sidebar {
      background: var(--sidebar-bg);
      padding: 1.5rem 1rem;
    }

    .sidebar-section {
      margin-bottom: 2rem;
    }

    .sidebar-title {
      color: var(--primary);
      font-weight: 700;
      padding-bottom: 0.6rem;
      border-bottom: 2px solid #e0d0c8;
      margin-bottom: 1rem;
    }

    .category-list a {
      color: var(--primary);
      text-decoration: none;
      display: block;
      padding: 0.45rem 0.75rem;
      border-radius: 5px;
      margin: 0.2rem 0;
      transition: all 0.15s;
    }

    .category-list a:hover {
      background: #f0e8e2;
      color: #000;
      padding-left: 1.1rem;
    }

    .stats-box {

      /* border: 1px solid #e9e0d9; */
      border-radius: 8px;
      color: var(--primary);
      padding: 1.25rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Main content */
    .main-content {
      background: var(--light-bg);
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
      margin-bottom: 2rem;
    }

    .link-item {
      margin-bottom: 1.4rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px dashed #e0d0c8;
    }

    .link-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .link-title {
      color: var(--primary);
      font-weight: 700;
      margin-bottom: 0.4rem;
    }

    .link-desc {
      color: var(--primary);
      font-size: 0.95rem;
      line-height: 1.45;
    }

    /* Right column (latest articles/links) */
    .right-sidebar {
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    }

    .latest-item {
      margin-bottom: 1.1rem;
      padding-bottom: 1rem;
      color: var(--primary);
      border-bottom: 1px solid #eee;
    }

    .latest-item:last-child {
      border-bottom: none;
    }

    /* Scroll to top */
    #scrollToTop {
      position: fixed;
      bottom: 25px;
      right: 25px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--primary);
      color: white;
      border: none;
      font-size: 1.4rem;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      z-index: 999;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    #scrollToTop.show {
      opacity: 1;
      visibility: visible;
    }

    .sidebar {
      position: sticky;
      top: 5rem;
      align-self: start;
    }

    @media (max-width: 991px) {

      .sidebar,
      .right-sidebar {
        position: static !important;
      }
    }


    /* form css  */
     .form-section {
       
      padding: 1.75rem;
      border-radius: 8px; 
    }

    .required-star {
      color: #dc3545;
    }


    /* details page  css */
    .content {
      padding: 2rem;
    }

    .detail-row {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 1.2rem;
      padding: 1rem 0;
      border-bottom: 1px solid #334155;
      align-items: baseline;
    }

    .detail-row:last-child {
      border-bottom: none;
    }

    .label {
      font-weight: 600;
      color: var(--primary-dark);
      font-size: 0.95rem;
    }

    .value {
      color: var(--primary);
      font-size: 1rem;
    }

    .value a {
      color: #60a5fa;
      text-decoration: none;
      transition: color 0.2s;
    }

    .value a:hover {
      color: #93c5fd;
      text-decoration: underline;
    }

    .highlight {
      color: #f87171;
      font-weight: 600;
    }

    .hits {
      display: inline-block;
      background: #334155;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      font-size: 0.9rem;
      margin-left: 0.5rem;
    }

    @media (max-width: 600px) {
      .detail-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
      }
      
      .label {
        font-size: 0.9rem;
      }
      
      .content {
        padding: 1.5rem;
      }
    }


    /* advertising  */
    .advertising{
      border: 4px solid var(--primary);
      padding:10px;
      margin-bottom: 15px;
      border-radius: 7px;
    }
    .advertising h5{
      color:var(--primary);
      text-align: center;
      margin-bottom: 10px;
      font-weight: bold;
      font-size:30px;
    }
    .advertising a{
      color:white;
      background:var(--primary);
      width:100%;
      display:block;
      text-align: center;
      margin-top: 10px;
      padding:10px 15px;
      border-radius:7px;
    }