/* ===== RESET & BASE ===== */
    *, *::before, *::after { box-sizing: border-box; }

    :root {
      --font-reading: 'Georgia', 'Times New Roman', serif;
      --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-mono: 'Fira Code', 'Consolas', monospace;

      --bg-page:    #f5f4f0;
      --bg-surface: #ffffff;
      --bg-code:    #0d1117;
      --bg-sidebar: #f8f7f3;
      --bg-card:    #ffffff;

      --text-main:  #1a1a1a;
      --text-muted: #6b7280;
      --text-light: #9ca3af;

      --border:     #e5e3dd;
      --border-strong: #d1cec7;

      --accent:     #1a56db;
      --accent-hover: #1648c0;
      --accent-light: #eff6ff;

      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;

      --content-width: 820px;
      --side-pad: 20px;
      --sidebar-width: 260px;
    }

    [data-bs-theme="dark"] {
      --bg-page:    #111318;
      --bg-surface: #1a1d24;
      --bg-sidebar: #13161c;
      --bg-card:    #1a1d24;
      --text-main:  #e8e6df;
      --text-muted: #9499a8;
      --text-light: #636979;
      --border:     #2a2d38;
      --border-strong: #353844;
      --accent-light: #1e2a45;
    }

    body {
      background: var(--bg-page);
      color: var(--text-main);
      font-family: var(--font-ui);
      margin: 0;
      padding: 0;
    }

    /* ===== 3-COLUMN LAYOUT ===== */
    .layout-three-col {
      display: flex;
      justify-content: center;
      gap: 24px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px var(--side-pad) 60px;
      position: relative;
    }

    /* Sidebar chung */
    .sidebar {
      flex-shrink: 0;
      width: var(--sidebar-width);
      position: sticky;
      top: 20px;
      height: fit-content;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .sidebar-left { order: 1; }
    .main-content { 
      order: 2; 
      flex: 1;
      min-width: 0;
      max-width: var(--content-width);
    }
    .sidebar-right { order: 3; }

    /* Sidebar styling */
    .sidebar-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px;
      margin-bottom: 20px;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .sidebar-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .sidebar-title {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--accent);
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sidebar-title i { font-size: 16px; }

    /* Banner quảng cáo cố định 2 bên */
    .sticky-banner-wrapper {
      position: sticky;
      top: 20px;
      z-index: 100;
    }

    .floating-banner {
      width: 160px;
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 9998;
      transition: all 0.2s;
    }

    .floating-banner-left {
      left: 16px;
    }

    .floating-banner-right {
      right: 16px;
    }

    .floating-banner img {
      width: 100%;
      height: auto;
      border-radius: var(--radius-md);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      transition: transform 0.2s;
      display: block;
    }

    .floating-banner img:hover {
      transform: scale(1.02);
    }

    /* Sponsor items */
    .sponsor-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

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

    .sponsor-icon {
      width: 36px;
      height: 36px;
      background: var(--accent-light);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      font-size: 18px;
    }

    .sponsor-info h4 {
      font-size: 14px;
      font-weight: 600;
      margin: 0 0 2px;
    }

    .sponsor-info p {
      font-size: 11px;
      color: var(--text-muted);
      margin: 0;
    }

    /* Danh mục bên phải */
    .category-list, .doc-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .category-list li, .doc-list li {
      margin-bottom: 10px;
    }

    .category-list a, .doc-list a {
      text-decoration: none;
      color: var(--text-main);
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: var(--radius-sm);
      transition: all 0.2s;
    }

    .category-list a:hover, .doc-list a:hover {
      background: var(--accent-light);
      color: var(--accent);
      transform: translateX(4px);
    }

    .category-list i, .doc-list i {
      width: 20px;
      color: var(--accent);
    }

    .badge-new {
      background: #10b981;
      color: white;
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 20px;
      margin-left: auto;
    }

    /* Main content - giữ nguyên layout cũ */
    .page-wrap {
      max-width: var(--content-width);
      margin: 0 auto;
      padding: 0;
    }

    .gg-promt__card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      padding: 32px 40px;
      margin-top: 0;
    }

    @media (max-width: 600px) {
      .gg-promt__card { padding: 20px 16px; }
      :root { --side-pad: 12px; }
    }

    /* Các style cũ giữ nguyên */
    .gg-promt__title { font-size: 22px; font-weight: 700; margin: 0 0 24px; color: var(--text-main); }
    .gg-promt__form input[type="text"] { width: 100%; background: var(--bg-sidebar); color: var(--text-main); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px; font-size: 14px; }
    .gg-promt__editor { width: 100%; min-height: 260px; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #0d1117; color: #e2e8f0; padding: 16px; font-family: var(--font-mono); font-size: 13.5px; resize: vertical; }
    .gg-promt__btn { margin-top: 16px; padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: var(--radius-md); border: none; background: var(--accent); color: #fff; cursor: pointer; transition: background .2s; }
    .gg-promt__btn:hover { background: var(--accent-hover); }
    .gg-promt__preview { line-height: 1.85; font-size: 16px; color: var(--text-main); overflow-x: hidden; }
    .gg-promt__preview p { margin: 0 0 1.4em; font-family: var(--font-reading); line-height: 1.85; }
    .gg-promt__preview h1, .gg-promt__preview h2, .gg-promt__preview h3, .gg-promt__preview h4 { font-family: var(--font-ui); font-weight: 700; margin: 2em 0 0.7em; }
    .gg-promt__preview h1 { font-size: clamp(22px, 3.5vw, 30px); border-bottom: 1px solid var(--border); padding-bottom: 10px; }
    .gg-promt__preview h2 { font-size: clamp(18px, 3vw, 24px); }
    .gg-promt__preview h3 { font-size: clamp(16px, 2.5vw, 20px); }
    .gg-promt__preview blockquote { margin: 1.5em 0; padding: 1em 1.25em; border-left: 3px solid var(--accent); background: var(--accent-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    .gg-promt__preview pre { background: var(--bg-code); border-radius: var(--radius-md); padding: 18px 20px; overflow-x: auto; width: 100%; max-width: 100%; }
    .gg-promt__preview pre code { color: #e2e8f0; font-family: var(--font-mono); font-size: 13px; }
    .gg-promt__preview img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1.5em 0; }
    .gg-promt__history { margin-top: 40px; }
    .gg-promt__history-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-sidebar); margin-bottom: 8px; }
    
    /* Progress bar */
    #ggReadProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 10000; transition: width .1s linear; }
    
    /* Floating actions */
    .gg-smart-actions { position: fixed; right: 18px; bottom: 28px; display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; z-index: 9999; }
    .gg-smart-actions.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
    .gg-smart-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
    .gg-smart-toggle { background: var(--accent); color: #fff !important; }
    
    /* ===== FOOTER NÂNG CẤP ===== */
    .app-footer {
      background: var(--bg-surface);
      border-top: 1px solid var(--border);
      margin-top: 40px;
      padding: 48px 0 32px;
    }

    .footer-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 var(--side-pad);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-col h4 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--text-main);
      position: relative;
      display: inline-block;
    }

    .footer-col h4:after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 30px;
      height: 2px;
      background: var(--accent);
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li {
      margin-bottom: 12px;
    }

    .footer-links a {
      text-decoration: none;
      color: var(--text-muted);
      font-size: 13px;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .footer-links a:hover {
      color: var(--accent);
      transform: translateX(4px);
    }

    .footer-logo-area {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .footer-logo-icon {
      font-size: 32px;
      color: var(--accent);
    }

    .footer-logo-text {
      font-size: 20px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--accent), #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .footer-desc {
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .social-links {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .social-link {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-sidebar);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: all 0.2s;
    }

    .social-link:hover {
      background: var(--accent);
      color: white;
      transform: translateY(-3px);
    }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    .copyright {
      font-size: 12px;
      color: var(--text-light);
    }

    .footer-badges {
      display: flex;
      gap: 16px;
    }

    .footer-badge {
      font-size: 11px;
      padding: 4px 10px;
      background: var(--bg-sidebar);
      border-radius: 20px;
      color: var(--text-muted);
    }

    @media (max-width: 1100px) {
      .floating-banner { display: none; }
      .layout-three-col { flex-wrap: wrap; }
      .sidebar { position: static; width: 100%; max-width: none; }
      .main-content { max-width: 100%; }
    }

    @media (max-width: 768px) {
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
      .footer-bottom { flex-direction: column; text-align: center; }
      .gg-smart-actions { bottom: 16px; right: 12px; }
    }
    .gg-promt__preview strong::before, .gg-promt__preview b::before {
    content: " ";
    white-space: pre;
    }
    .gg-promt__preview strong::after, .gg-promt__preview b::after {
        content: " ";
        white-space: pre;
    }
    /* Fix khoảng cách icon trong footer badges */
.footer-badge i {
    margin-right: 6px;
    font-size: 12px;
}

/* Hoặc cách khác - thêm khoảng cách cho tất cả icon trong footer */
.footer-badge i.bi,
.footer-links i.bi,
.social-link i.bi {
    margin-right: 6px;
}

/* Đảm bảo icon trong footer-links cũng có khoảng cách */
.footer-links a i {
    margin-right: 8px;
    font-size: 12px;
}

/* ===== SIDEBAR COLLAPSIBLE FOR MOBILE ===== */
@media (max-width: 768px) {
  .sidebar-card {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .sidebar-card .sidebar-title {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .sidebar-card .sidebar-title::after {
    content: '\f282';
    font-family: 'bootstrap-icons';
    font-size: 14px;
    transition: transform 0.3s ease;
    color: var(--text-muted);
  }

  .sidebar-card.collapsed .sidebar-title::after {
    transform: rotate(-90deg);
  }

  .sidebar-card .sponsor-item,
  .sidebar-card > a {
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .sidebar-card.collapsed .sponsor-item,
  .sidebar-card.collapsed > a {
    display: none;
  }

  /* Animation cho nội dung */
  .sidebar-card .sponsor-item {
    animation: slideDown 0.3s ease forwards;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Khi collapsed thì ẩn nội dung */
  .sidebar-card.collapsed .sponsor-item {
    display: none;
  }
}
/* ===== SIDEBAR COLLAPSIBLE - RESPONSIVE & SMART ===== */
.sidebar-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-card .sidebar-content {
  transition: all 0.3s ease;
}

/* Mobile styles */
@media (max-width: 768px) {
  .sidebar-card {
    cursor: pointer;
  }

  .sidebar-card .sidebar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    font-size: 15px;
    position: relative;
  }

  .sidebar-card .sidebar-title::after {
    display: none;
  }

  .collapse-icon {
    transition: transform 0.3s ease;
    font-size: 14px;
    color: var(--text-muted);
  }

  .sidebar-card.collapsed .collapse-icon {
    transform: rotate(-90deg);
  }

  .sidebar-card .sidebar-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease;
  }

  .sidebar-card.collapsed .sidebar-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
  }

  /* Hiệu ứng khi mở */
  .sidebar-card:not(.collapsed) .sidebar-content {
    max-height: 500px;
    opacity: 1;
    margin-top: 12px;
  }

  /* Smooth animation cho từng item */
  .sidebar-card:not(.collapsed) .sponsor-item {
    animation: fadeInUp 0.3s ease forwards;
    animation-delay: calc(var(--item-index, 0) * 0.05s);
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Gán delay cho từng item */
  .sidebar-card:not(.collapsed) .sponsor-item:nth-child(1) { --item-index: 1; }
  .sidebar-card:not(.collapsed) .sponsor-item:nth-child(2) { --item-index: 2; }
  .sidebar-card:not(.collapsed) .sponsor-item:nth-child(3) { --item-index: 3; }
  .sidebar-card:not(.collapsed) .sponsor-item:nth-child(4) { --item-index: 4; }
}

/* Desktop - luôn hiển thị đầy đủ */
@media (min-width: 769px) {
  .sidebar-card .collapse-icon {
    display: none;
  }
  
  .sidebar-card .sidebar-content {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
  }
}

    /* --- ĐỊNH DẠNG KHUNG CHỨA CODE BLOCK CHUẨN CHATGPT --- */
.gg-codeblock {
  position: relative; /* Gốc tọa độ để đưa nút copy vào trong */
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden; /* Đảm bảo code không đè lên bo góc */
  background-color: #1e1e1e; /* Màu nền tối sang trọng */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Định dạng thẻ pre bên trong */
.gg-codeblock pre {
  margin: 0 !important;
  padding: 35px 15px 15px 15px !important; /* Đẩy padding-top xuống 35px để tránh đè chữ vào nút Copy */
  overflow-x: auto;
  background: transparent !important;
}

/* Định dạng chữ code */
.gg-codeblock code {
  font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --- THIẾT KẾ NÚT COPY ĐẸP CHUYÊN NGHIỆP --- */
.gg-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 0.55rem;
  font-weight: 500;
  color: #b4b4b4;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6; /* Ẩn mờ đi khi bình thường cho sạch giao diện */
  transition: all 0.2s ease-in-out;
  user-select: none;
  z-index: 10;
}

/* Hiển thị rõ nét nút copy khi di chuột vào khung code block hoặc chính nó */
.gg-codeblock:hover .gg-copy-btn,
.gg-copy-btn:hover {
  opacity: 1;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Khi kích hoạt trạng thái ĐÃ COPIED */
.gg-copy-btn.copied {
  opacity: 1 !important;
  color: #10b981 !important; /* Màu xanh lá cây tinh tế */
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Tùy chỉnh thanh cuộn ngang của khung code cho mảnh dẻ mượt mà */
.gg-codeblock pre::-webkit-scrollbar {
  height: 6px;
}
.gg-codeblock pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.gg-codeblock pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.gg-codeblock pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}