:root{
  --hn-primary: #1dc3ff;        /* blue chính */
  --hn-primary-2: #6fdcff;      /* blue nhạt, hover */
  --hn-primary-3: #0aa7e6;      /* blue đậm, active */

  --hn-dark: #0b2a3a;           /* xanh đậm gần navy */
  --hn-text: #0f172a;           /* slate-900 (giữ nguyên, dễ đọc) */
  --hn-muted: #64748b;          /* slate-500 */

  --hn-bg: #f4f9fc;             /* nền trắng pha xanh */
  --hn-surface: #ffffff;        /* card */
  --hn-surface-2: #eaf7fd;      /* nền phụ xanh rất nhẹ */

  --hn-border: #dbeafe;         /* border xanh nhạt */
  --hn-shadow: 0 10px 40px rgba(29,195,255,0.18);
  --hn-shadow-soft: 0 8px 30px rgba(29,195,255,0.12);

  --hn-radius: 20px;
  --hn-radius-lg: 24px;
}


   
    body.no-scroll{ overflow:hidden; }

    /* ===== Hero (Hairnic-ish green gradient) ===== */
    .hero-section{
      background: linear-gradient(135deg, var(--hn-primary) 0%, var(--hn-primary-2) 55%, #9fcf80 100%);
      padding: 80px 20px 60px;
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .hero-section::before{
      content:'';
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 40%),
        radial-gradient(circle at 80% 35%, rgba(255,255,255,0.14), transparent 45%),
        radial-gradient(circle at 40% 80%, rgba(0,0,0,0.06), transparent 45%);
      animation: float 20s linear infinite;
    }
    @keyframes float{ from{ transform:translateY(0);} to{ transform:translateY(-80px);} }
    .hero-content{ position:relative; max-width: 900px; margin:0 auto; }
    .hero-content h1{
      font-size: clamp(2rem, 5vw, 3.5rem);
      color:#fff;
      margin-bottom: 16px;
      font-weight: 900;
      letter-spacing: -0.02em;
      text-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    .hero-content p{
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: rgba(255,255,255,0.92);
      max-width: 680px;
      margin:0 auto;
    }

    /* ===== Container ===== */
    .containerblog{ max-width: 1400px; margin:0 auto; padding: 0 20px; }

    /* Breadcrumb */
    .breadcrumb{
      display:flex; align-items:center; gap:8px;
      padding: 20px 0 12px;
      flex-wrap: wrap;
    }
    .breadcrumb a{
      color: var(--hn-primary);
      text-decoration:none;
      font-weight:600;
      transition: color .2s;
    }
    .breadcrumb a:hover{ color: #4b7d3a; }
    .breadcrumb .separator{ color:#cbd5e1; }
    .breadcrumb .current{ color: var(--hn-text); font-weight:800; }

    /* Mobile toolbar */
    .mobile-toolbar{
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 0 0 16px;
    }
    .mobile-open-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background: linear-gradient(135deg, var(--hn-primary), var(--hn-primary-2));
      color:#fff;
      border:none;
      padding: 12px 16px;
      border-radius: 14px;
      font-weight: 800;
      cursor:pointer;
      box-shadow: 0 10px 25px rgba(91,143,71,0.25);
    }
    .mobile-open-btn:active{ transform: translateY(1px); }

    /* ===== Page Layout ===== */
    .page-layout{
      display:grid;
      grid-template-columns: 360px 1fr;
      gap: 32px;
      align-items:start;
      padding-bottom: 60px;
    }

    /* ===== Sidebar ===== */
    .sidebar{
      background: var(--hn-surface);
      border-radius: var(--hn-radius);
      box-shadow: var(--hn-shadow);
      padding: 24px;
      position: sticky;
      top: 20px;
      height: fit-content;
      border: 1px solid rgba(226,232,240,0.8);
    }
    .sidebar-headerblog{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 12px;
      margin-bottom: 18px;
    }
    .filter-title{
      font-size: 1.2rem;
      font-weight: 900;
      color: var(--hn-text);
    }
    .sidebar-close{
      display:none;
      border:none;
      background: #f1f5f9;
      color: #0f172a;
      width:44px; height:44px;
      border-radius: 14px;
      cursor:pointer;
    }

    /* Categories */
    .categories-filter{ display:flex; gap:12px; flex-wrap:wrap; }
    .category-chip{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      background: var(--hn-surface-2);
      border: 2px solid transparent;
      border-radius: 50px;
      cursor:pointer;
      transition: all .25s cubic-bezier(0.4,0,0.2,1);
      font-weight: 800;
      color: #2b4a32;
      white-space:nowrap;
      width:100%;
      justify-content: space-between;
    }
    .category-chip:hover{
      background: #e4f0db;
      transform: translateY(-2px);
    }
    .category-chip.active{
      background: linear-gradient(135deg, var(--hn-primary), var(--hn-primary-2));
      color:#fff;
      border-color: rgba(255,255,255,0.35);
      box-shadow: 0 10px 25px rgba(91,143,71,0.28);
    }
    .category-left{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
    .category-left span{ overflow:hidden; text-overflow: ellipsis; }
    .category-chip .count{
      background: rgba(15,43,26,0.10);
      padding: 2px 10px;
      border-radius: 12px;
      font-size: 0.85rem;
      flex-shrink:0;
      color: inherit;
    }
    .category-chip.active .count{ background: rgba(255,255,255,0.22); }

    /* Subcategories */
    .subcategories-wrapper{
      max-height:0;
      overflow:hidden;
      transition: max-height .35s cubic-bezier(0.4,0,0.2,1), margin-top .35s cubic-bezier(0.4,0,0.2,1);
      margin-top:0;
    }
    .subcategories-wrapper.show{
      max-height: 520px;
      margin-top: 16px;
    }
    .subcategories{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      padding: 18px;
      background: #f3f8ef;
      border-radius: 16px;
      border-left: 4px solid var(--hn-primary);
    }
    .subcategory-chip{
      padding: 8px 16px;
      background: #fff;
      border: 2px solid rgba(226,232,240,0.9);
      border-radius: 30px;
      cursor:pointer;
      transition: all .2s;
      font-size: 0.92rem;
      color: #335a3e;
      display:flex;
      align-items:center;
      gap:6px;
      font-weight: 700;
    }
    .subcategory-chip:hover{
      border-color: var(--hn-primary);
      color: var(--hn-primary);
      transform: translateY(-2px);
    }
    .subcategory-chip.active{
      background: var(--hn-primary);
      color:#fff;
      border-color: var(--hn-primary);
    }
    .subcategory-chip .dot{
      width:6px; height:6px;
      background: currentColor;
      border-radius:50%;
    }

    /* ===== Main Content ===== */
    .main-content{ min-width:0; }

    /* ===== Featured Section ===== */
    .featured-section{ margin: 10px 0 60px; }
    .section-header{ text-align:center; margin-bottom: 40px; }
    .section-title{
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      font-weight: 950;
      color: var(--hn-text);
      margin-bottom: 12px;
      display:inline-flex;
      align-items:center;
      gap:12px;
    }
    .section-title i{ color: var(--hn-primary); }
    .section-subtitle{ color: var(--hn-muted); font-size: 1.05rem; }

    /* IMPORTANT: Fix layout cột phải (grid chuẩn, không trộn flex/grid lung tung) */
    .featured-grid{
      display:grid;
      grid-template-columns: 1.6fr 1fr;  /* giống mock của bạn */
      gap: 24px;
      align-items: stretch;
    }

    .featured-card{
      background: var(--hn-surface);
      border-radius: var(--hn-radius-lg);
      overflow:hidden;
      box-shadow: var(--hn-shadow-soft);
      transition: transform .25s ease, box-shadow .25s ease;
      border: 1px solid rgba(226,232,240,0.75);
      height: 100%;
    }
    .featured-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 45px rgba(91,143,71,0.18);
    }

    .featured-main{
      display:flex;
      flex-direction:column;
      height: 100%;
    }

    .featured-image-wrapper{
      position:relative;
      height: 400px;
      overflow:hidden;
    }
    .featured-image{
      width:100%;
      height:100%;
      object-fit: cover;
      transition: transform .45s cubic-bezier(0.4,0,0.2,1);
    }
    .featured-card:hover .featured-image{ transform: scale(1.07); }
    .featured-overlay{
      position:absolute; inset:0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0) 70%);
    }

    /* Badge đổi sang xanh/đen Hairnic */
    .featured-badge{
      position:absolute;
      top: 22px;
      right: 22px;
      background: rgba(15,43,26,0.85);
      color:#fff;
      padding: 10px 16px;
      border-radius: 999px;
      font-weight: 900;
      display:flex;
      align-items:center;
      gap:8px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.18);
      backdrop-filter: blur(8px);
    }
    .featured-badge.small{
      padding: 8px 14px;
      font-size: 0.9rem;
      top: 12px;
      right: 12px;
    }

    .featured-content{
      padding: 32px;
      display:flex;
      flex-direction:column;
      flex: 1;
      min-height: 0;
    }

    .featured-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 16px; }
    .tag{
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 900;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .tag.parent{
      background: rgba(10,167,230,0.92);       
      color:#fff;
    }
    .tag.child{
      background: rgba(255,255,255,0.95);
      color: var(--hn-primary);
      border: 1px solid rgba(91,143,71,0.30);
    }
    .tag.small{ font-size: 0.75rem; padding: 4px 10px; }

    .featured-title{
      font-size: 1.75rem;
      font-weight: 950;
      line-height: 1.25;
      margin-bottom: 16px;
    }
    .featured-title a{
      color: var(--hn-text);
      text-decoration:none;
      transition: color .2s;
    }
    .featured-title a:hover{ color: var(--hn-primary); }

    .featured-excerpt{
      color: var(--hn-muted);
      line-height: 1.75;
      font-size: 1.05rem;
      margin-bottom: 24px;
      flex: 1;
    }

    .featured-meta{
      display:flex;
      justify-content: space-between;
      align-items:center;
      padding-top: 22px;
      border-top: 2px solid #eef2f0;
      gap: 16px;
      flex-wrap: wrap;
    }
    .meta-group{
      display:flex;
      gap: 18px;
      color: #7c8b81;
      font-size: 0.95rem;
      flex-wrap: wrap;
      font-weight: 700;
    }
    .meta-group span{ display:flex; align-items:center; gap:6px; }

    .featured-btn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 14px 26px;
      background: linear-gradient(135deg, var(--hn-primary), var(--hn-primary-2));
      color:#fff;
      text-decoration:none;
      border-radius: 999px;
      font-weight: 900;
      transition: transform .2s ease, box-shadow .2s ease, gap .2s ease;
      box-shadow: 0 10px 24px rgba(91,143,71,0.25);
      white-space: nowrap;
    }
    .featured-btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 32px rgba(91,143,71,0.30);
      gap: 12px;
    }

    /* Right column: MUST be grid 2 rows equal */
    .featured-side{
      display:grid;
      grid-template-rows: 1fr 1fr;
      gap: 24px;
      height: 100%;
      min-height: 0;
    }

    .featured-small{
      display:flex;
      gap: 20px;
      height: 100%;
      min-height: 190px; /* giữ form giống mock */
      align-items: stretch;
    }

    .featured-small-image{
      position:relative;
      width: 180px;
      border-radius: 16px;
      overflow:hidden;
      flex-shrink:0;
      height: 100%;
    }
    .featured-small-image img{
      width:100%;
      height:100%;
      object-fit: cover;
      transition: transform .35s ease;
    }
    .featured-small:hover .featured-small-image img{ transform: scale(1.07); }

    .featured-small-content{
      flex: 1;
      display:flex;
      flex-direction: column;
      padding: 16px 0;
      min-width: 0;
    }
    .featured-small-title{
      font-size: 1.15rem;
      font-weight: 950;
      line-height: 1.35;
      margin: 12px 0;
    }
    .featured-small-title a{
      color: var(--hn-text);
      text-decoration:none;
      transition: color .2s;
      display:-webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .featured-small-title a:hover{ color: var(--hn-primary); }

    .featured-small-meta{
      margin-top: auto;
      display:flex;
      gap: 18px;
      color: #7c8b81;
      font-size: 0.92rem;
      font-weight: 800;
      flex-wrap: wrap;
    }
    .featured-small-meta span{ display:flex; align-items:center; gap:6px; }

    /* ===== Blog Grid ===== */
    .blog-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 32px;
      margin: 40px 0 0;
    }
    .blog-card{
      background: var(--hn-surface);
      border-radius: var(--hn-radius);
      overflow:hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      transition: transform .25s ease, box-shadow .25s ease;
      display:flex;
      flex-direction:column;
      height:100%;
      border: 1px solid rgba(226,232,240,0.75);
    }
    .blog-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 45px rgba(91,143,71,0.14);
    }
    .blog-image-wrapper{ position:relative; height: 240px; overflow:hidden; }
    .blog-image{
      width:100%; height:100%;
      object-fit: cover;
      transition: transform .4s cubic-bezier(0.4,0,0.2,1);
    }
    .blog-card:hover .blog-image{ transform: scale(1.06); }
    .blog-tags{
      position:absolute;
      top: 16px; left: 16px;
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      z-index: 2;
    }
    .blog-content{
      padding: 28px;
      flex:1;
      display:flex;
      flex-direction: column;
    }
    .blog-title{
      font-size: 1.3rem;
      font-weight: 950;
      margin-bottom: 12px;
      line-height: 1.35;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .blog-title a{
      color: var(--hn-text);
      text-decoration:none;
      transition: color .2s;
    }
    .blog-title a:hover{ color: var(--hn-primary); }

    .blog-excerpt{
      color: var(--hn-muted);
      line-height: 1.75;
      margin-bottom: 20px;
      flex:1;
      display:-webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .blog-footer{
      display:flex;
      justify-content: space-between;
      align-items:center;
      padding-top: 20px;
      border-top: 1px solid #eef2f0;
      gap: 12px;
    }
    .blog-meta{
      display:flex;
      gap: 16px;
      color: #7c8b81;
      font-size: 0.9rem;
      font-weight: 800;
      flex-wrap: wrap;
    }
    .blog-meta span{ display:flex; align-items:center; gap:6px; }

    .read-more{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      color: var(--hn-primary);
      font-weight: 950;
      text-decoration:none;
      transition: gap .2s;
      white-space: nowrap;
    }
    .read-more:hover{ gap: 12px; }

    /* ===== Pagination ===== */
    .pagination{
      display:flex;
      justify-content:center;
      margin: 40px 0 0;
    }
    .page-list{
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap: wrap;
      background: var(--hn-surface);
      padding: 14px;
      border-radius: 18px;
      box-shadow: var(--hn-shadow);
      border: 1px solid rgba(226,232,240,0.8);
    }
    .page-btn{
      min-width: 44px;
      height: 44px;
      padding: 0 14px;
      border-radius: 14px;
      border: 2px solid rgba(226,232,240,0.95);
      background: #fff;
      color: #2b4a32;
      font-weight: 950;
      cursor:pointer;
      transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
    }
    .page-btn:hover{
      border-color: var(--hn-primary);
      color: var(--hn-primary);
      transform: translateY(-2px);
      box-shadow: 0 10px 18px rgba(91,143,71,0.12);
    }
    .page-btn.active{
      background: linear-gradient(135deg, var(--hn-primary), var(--hn-primary-2));
      border-color: rgba(255,255,255,0.35);
      color:#fff;
      box-shadow: 0 12px 24px rgba(91,143,71,0.22);
    }
    .page-btn:disabled{
      opacity: .5;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }
    .page-dots{ color:#94a3b8; font-weight: 950; padding: 0 6px; }

    /* ===== Off-canvas sidebar ===== */
    .sidebar-overlay{
      position:fixed;
      inset:0;
      background: rgba(15, 23, 42, 0.35);
      backdrop-filter: blur(6px);
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease;
      z-index: 999;
    }
    .sidebar-overlay.show{
      opacity:1;
      pointer-events:auto;
    }

    /* ===== Responsive ===== */
    @media (max-width: 1024px){
      .mobile-toolbar{ display:flex; }
      .page-layout{ grid-template-columns: 1fr; }

      .sidebar{
        position: fixed;
        top:0; left:0;
        height: 100vh;
        width: min(420px, 90vw);
        border-radius: 0 24px 24px 0;
        padding: 20px;
        transform: translateX(-110%);
        transition: transform .28s cubic-bezier(0.4,0,0.2,1);
        z-index: 1000;
        overflow:auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.22);
      }
      .sidebar.open{ transform: translateX(0); }
      .sidebar-close{
        display:inline-flex;
        align-items:center;
        justify-content:center;
      }

      .featured-grid{ grid-template-columns: 1fr; }
      .featured-side{
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
      }
      .featured-small{ min-height: 200px; }
    }

    @media (max-width: 768px){
      .hero-section{ padding: 60px 20px 40px; }

      .featured-side{ grid-template-columns: 1fr; } /* xếp dọc */
      .featured-small{
        flex-direction: column;
        min-height: unset;
      }
      .featured-small-image{
        width:100%;
        height: 200px;
      }
      .featured-small-content{
        padding: 20px;
      }

      .featured-meta{
        flex-direction: column;
        align-items:flex-start;
      }
      .meta-group{
        flex-direction: column;
        gap: 8px;
      }
      .featured-btn{
        width: 100%;
        justify-content:center;
      }

      .blog-grid{
        grid-template-columns: 1fr;
        gap: 24px;
        margin: 24px 0 0;
      }
      .blog-image-wrapper{ height: 200px; }
      .blog-content{ padding: 20px; }
      .blog-title{ font-size: 1.15rem; }
      .blog-footer{
        flex-direction: column;
        align-items:flex-start;
      }
    }

    @media (max-width: 480px){
      .blog-meta{ flex-direction: column; gap: 8px; }
      .blog-tags{ flex-direction: column; align-items:flex-start; }
    }