/* lightGallery mặc định ~1050 — phải cao hơn popup feed (1910) khi xem ảnh trong chi tiết bài */
  .lg-backdrop,
  .lg-outer,
  .lg-outer.lg-visible,
  .lg-container.lg-show {
    z-index: 1950 !important;
  }

  /* body chỉ có position:fixed dễ không fill viewport → header bg-white không trải full ngang */
  body[class*="path--common-home"],
  .path--common-topics,
  .path--studyfeed-post-view,
  .path--studyfeed-topic-view,
  .path--account-profile {
    position: fixed;
    inset: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body[class*="path--common-home"] > .site,
  .path--common-topics > .site,
  .path--studyfeed-post-view > .site,
  .path--studyfeed-topic-view > .site,
  .path--account-profile > .site {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header nằm trong .site — override padding wrapper (đồng bộ header/html.twig) */
  body[class*="path--common-home"] > .site.scroll-up,
  .path--common-topics > .site.scroll-up,
  .path--studyfeed-post-view > .site.scroll-up,
  .path--studyfeed-topic-view > .site.scroll-up,
  .path--account-profile > .site.scroll-up {
    padding-top: 0 !important;
  }

  body[class*="path--common-home"] > .site.scroll-up > header.box_header,
  .path--common-topics > .site.scroll-up > header.box_header,
  .path--studyfeed-post-view > .site.scroll-up > header.box_header,
  .path--studyfeed-topic-view > .site.scroll-up > header.box_header,
  .path--account-profile > .site.scroll-up > header.box_header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
  }

  body[class*="path--common-home"] > .site.scroll-up > .un-home,
  .path--common-topics > .site.scroll-up > .un-home,
  .path--studyfeed-post-view > .site.scroll-up > .un-home,
  .path--studyfeed-topic-view > .site.scroll-up > .un-home,
  .path--account-profile > .site.scroll-up > .un-home {
    padding-top: var(--un-header-h, 5.75rem);
    box-sizing: border-box;
  }

  body[class*="path--common-home"] .un-home:not(.un-home--post-detail):not(.un-home--topic-detail),
  .path--common-topics .un-home:not(.un-home--post-detail):not(.un-home--topic-detail) {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100%;
    overflow: hidden;
  }

  /* Mép dưới = mép trên (sau header cố định); không để JS làm lệch trên desktop */
  body[class*="path--common-home"] > .site.scroll-up > .un-home:not(.un-home--post-detail):not(.un-home--topic-detail),
  .path--common-topics > .site.scroll-up > .un-home:not(.un-home--post-detail):not(.un-home--topic-detail) {
    padding-top: calc(var(--un-header-h, 5.75rem) + var(--un-home-edge-gap, 10px)) !important;
    padding-bottom: var(--un-home-edge-gap, 10px) !important;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) > .un-home-sidebar {
    align-self: stretch;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-main {
    min-height: 0;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-columns {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-col {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-feed-col-head-wrap {
    flex-shrink: 0;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-posts-list:not(.un-home-posts-list--detail) {
    flex: 1 1 auto;
    min-height: 0;
    height: var(--un-home-feed-scroll-h, auto);
    max-height: var(--un-home-feed-scroll-h, none);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Trang chi tiết bài StudyFeed: khóa viewport, cuộn chỉ trong cột giữa */
  .path--studyfeed-post-view {
    position: fixed;
    inset: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .path--studyfeed-post-view > .site {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .path--studyfeed-post-view .un-home--post-detail {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* Trang chi tiết chủ đề */
  .path--studyfeed-topic-view {
    position: fixed;
    inset: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .path--studyfeed-topic-view > .site {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .path--studyfeed-topic-view .un-home--topic-detail {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .un-home {
    --un-blue: #316dd3;
    --un-soft-blue: #dfeaf6;
    --un-text: #2f2f2f;
    --un-muted: #6a6a6a;
    --un-line: #c9dcf4;
    --un-bg: #edf3fa;
    --un-white: #fff;
    /* Thanh tương tác bài viết — đồng bộ với badge sidebar / chip xám */
    --un-feed-action-bg: #f3f3f3;
    --un-feed-action-hover: #e8e8e8;
    --un-like-active: #c43131;
    --un-save-active: var(--un-blue);
    --un-motion-duration: 0.32s;
    --un-motion-ease: cubic-bezier(0.33, 1, 0.68, 1);
    --un-home-remaining-height: calc(100dvh - var(--un-home-offset-top, 0px));
    /* Mép trên = mép dưới (desktop); mobile JS có thể tăng --un-home-bottom-gap khi có bottom nav */
    --un-home-edge-gap: 10px;
    --un-home-bottom-gap: var(--un-home-edge-gap);
    background: var(--un-bg);
    min-height: var(--un-home-remaining-height);
    height: var(--un-home-remaining-height);
    flex: 1 1 auto;
    box-sizing: border-box;
    padding-top: var(--un-home-edge-gap);
    padding-bottom: var(--un-home-bottom-gap);
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
  }

  .un-home-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin: 0 auto;
    transition: grid-template-columns 0.25s ease;
    height: 100%;
  }

  .un-home-layout.un-sidebar-expanded {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  /* Home: 3 cột cùng 1 row (sidebar | feed | docs-jobs), gap đều — không tách 2 bên */
  .path--common-home .un-home-layout:not(.un-home-layout--post-detail) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  .path--common-home .un-home-layout:not(.un-home-layout--post-detail) > .un-home-sidebar {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    align-self: stretch;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
  }

  .path--common-home .un-home-layout:not(.un-home-layout--post-detail) > .un-home-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .path--common-home .un-home-layout:not(.un-home-layout--post-detail)
    .un-home-columns:not(.un-home-columns--single-feed):not(.un-home-columns--my-posts):not(.un-home-columns--search-page) {
    --un-home-columns-gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    padding-right: 0;
  }

  .path--common-home .un-home-layout:not(.un-home-layout--post-detail)
    .un-home-columns:not(.un-home-columns--single-feed):not(.un-home-columns--my-posts):not(.un-home-columns--search-page)
    > .un-home-feed-col {
    flex: 1 1 0;
    flex-shrink: 1;
    min-width: 0;
    max-width: none;
    width: auto;
  }

  .path--common-home .un-home-layout:not(.un-home-layout--post-detail)
    .un-home-board-col[data-un-board='docs-jobs'] {
    flex: 0 0 400px;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
  }

  .un-home-sidebar {
    width: 100%;
    background: var(--un-white);
    border-radius: 10px;
    padding: 18px 10px;
    min-height: 0;
    height: 100%;
    transition: width 0.25s ease;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .un-home-sidebar-inner {
    width: 256px;
  }

.un-sidebar-collapsed-view {
  width: 80px;
  margin: 0 auto;
  display: none;
}

.un-sidebar-expanded-view {
  display: block;
}

.un-home-layout.un-sidebar-expanded .un-sidebar-collapsed-view {
  display: none;
}

.un-home-layout.un-sidebar-expanded .un-sidebar-expanded-view {
  display: block;
}

  .un-sidebar-line {
    border: 0;
    border-top: 1px solid var(--un-line);
    margin: 12px 0 16px;
  }

  .un-sidebar-link,
  .un-sidebar-button {
    border: 0;
    width: 100%;
    text-decoration: none;
    color: #000;
    font: 500 14px/1.2 "Lexend", sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    transition: background-color 0.2s ease;
  }

  .un-sidebar-link:hover,
  .un-sidebar-button:not(.un-sidebar-button-primary):hover {
    background: #f5f8fc;
  }

  .un-sidebar-button-primary:hover {
    background: linear-gradient(90deg, #2858b8 0%, #17a5e6 100%);
    color: #fff;
  }

  .un-sidebar-link.is-active {
    background: #B9E3FF;
    font-weight: 600;
    color: #0f172a;
  }

  .un-sidebar-link.is-active:hover {
    background: #dfe8f2;
  }

  .un-sidebar-button-primary {
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    color: #fff;
  }

  .un-sidebar-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    border-radius: 30px;
    background: #f3f3f3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
  }

  .un-sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .un-sidebar-title strong {
    font-size: 13px;
    text-transform: uppercase;
  }

  .un-sidebar-title a {
    color: #0095ff;
    font-weight: 600;
    font-size: 11px;
    text-decoration: none;
  }

  .un-topic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 6px;
    transition: background-color 0.2s ease;
  }

  .un-topic-item:hover {
    background: #f5f8fc;
  }

  .un-topic-thumb {
    background: #e8edf4;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    background: #f0f4fb;
  }

  .un-topic-content {
    flex: 1;
    min-width: 0;
  }

  .un-topic-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
  }

  .un-topic-meta {
    font-size: 12px;
    color: var(--un-muted);
    margin: 2px 0 0;
  }

  .un-sidebar-topic-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--un-muted);
    margin: 12px 0 8px;
  }

  .un-sidebar-topic-section-label:first-child {
    margin-top: 4px;
  }

  .un-sidebar-topic-empty {
    font-size: 13px;
    color: var(--un-muted);
    margin: 8px 0 12px;
    line-height: 1.45;
  }

  .un-sidebar-all-topics-link {
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #eef6ff;
    color: #316dd3;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
  }

  .un-sidebar-all-topics-link:hover {
    background: #e3f0ff;
  }

  .un-topic-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }

  .un-topic-row .un-topic-item {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }

  .un-topic-hot-badge {
    flex-shrink: 0;
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(13, 148, 136, 0.15);
    color: #0f766e;
  }

  .un-topic-follow-btn {
    flex-shrink: 0;
    align-self: center;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: #fff;
    color: #111827;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
  }

  .un-topic-follow-btn:hover {
    background: #f9fafb;
  }

  .un-topic-follow-btn.is-following {
    border-color: #316dd3;
    background: #316dd3;
    color: #fff;
  }

  .un-topic-propose-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .un-topic-propose-modal.is-open {
    display: flex;
  }

  .un-topic-propose-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .un-topic-propose-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 28px;
    padding: 20px 22px 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    z-index: 1;
  }

  .un-topic-propose-header {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
  }

  .un-topic-propose-back {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 15px;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }

  .un-topic-propose-back:hover {
    background: #e2e8f0;
    color: #0f172a;
  }

  .un-topic-propose-back:focus-visible {
    outline: 2px solid var(--un-blue);
    outline-offset: 2px;
  }

  .un-topic-propose-heading {
    margin: 0;
    padding: 0 44px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
    text-align: center;
  }

  .un-topic-propose-field {
    display: block;
    margin-bottom: 18px;
  }

  .un-topic-propose-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.01em;
  }

  .un-topic-propose-field input,
  .un-topic-propose-field textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    box-sizing: border-box;
    background: #fff;
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .un-topic-propose-field input::placeholder,
  .un-topic-propose-field textarea::placeholder {
    color: #94a3b8;
  }

  .un-topic-propose-field input:focus,
  .un-topic-propose-field textarea:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
  }

  .un-topic-propose-field textarea {
    display: block;
    resize: vertical;
    min-height: 132px;
    line-height: 1.5;
  }

  .un-topic-propose-optional {
    font-weight: 400;
    color: #64748b;
  }

  .un-topic-propose-image-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .un-topic-propose-image-preview {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
  }

  .un-topic-propose-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px dashed #94a3b8;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
  }

  .un-topic-propose-image-btn:hover {
    border-color: #64748b;
    background: #f1f5f9;
  }

  .un-topic-propose-image-clear {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
  }

  .un-topic-propose-image-clear:hover {
    color: #0f172a;
  }

  .un-topic-propose-actions {
    margin-top: 10px;
    padding-top: 4px;
  }

  .un-topic-propose-primary {
    display: block;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    background: #000;
    color: #fff;
    letter-spacing: -0.02em;
    transition:
      background-color 0.15s ease,
      transform 0.12s ease;
  }

  .un-topic-propose-primary:hover {
    background: #1a1a1a;
  }

  .un-topic-propose-primary:active {
    transform: scale(0.99);
  }

  .un-topic-propose-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
  }

  .un-topic-propose-success-modal {
    position: fixed;
    inset: 0;
    z-index: 12060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .un-topic-propose-success-modal.is-open {
    display: flex;
  }

  .un-topic-propose-success-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .un-topic-propose-success-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 24px;
    padding: 28px 24px 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
    text-align: center;
  }

  .un-topic-propose-success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
    font-size: 28px;
    font-weight: 800;
    line-height: 56px;
  }

  .un-topic-propose-success-heading {
    margin: 0 0 10px;
    font: 700 20px/1.3 "Lexend", sans-serif;
    color: #0f172a;
  }

  .un-topic-propose-success-topic {
    margin: 0 0 12px;
    font: 600 15px/1.35 "Lexend", sans-serif;
    color: #316dd3;
  }

  .un-topic-propose-success-text {
    margin: 0 0 22px;
    font: 400 14px/1.55 "Lexend", sans-serif;
    color: #475569;
    text-align: left;
  }

  .un-topic-propose-success-btn {
    display: block;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 14px 24px;
    font: 700 15px/1 "Lexend", sans-serif;
    cursor: pointer;
    background: var(--un-blue, #316dd3);
    color: #fff;
    transition: background 0.15s ease;
  }

  .un-topic-propose-success-btn:hover {
    background: #2558b8;
  }

  .un-sidebar-collapsible {
    transition: opacity 0.2s ease;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-collapsible {
    opacity: 0;
    pointer-events: none;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-link,
  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-button {
    width: 40px;
    min-height: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 auto 6px;
    gap: 0;
    border-radius: 14px;
    }

  .un-home-layout:not(.un-sidebar-expanded) .un-collapsed-btn {
    width: 50px;
    border-radius: 16px;
    margin-bottom: 10px;
  }

  .un-home-sidebar .fas {
    width: 18px;
    text-align: center;
    font-size: 14px;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-button-primary {
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-link {
    background: transparent;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-link:hover,
  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-button:not(.un-sidebar-button-primary):hover {
    background: #f3f7fc;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-button-primary:hover {
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    color: #fff;
    filter: brightness(1.06);
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-link.is-active {
    background: #B9E3FF;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-link.is-active:hover {
    background: #dfe8f2;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-line {
    margin: 10px 0 14px;
  }

  .un-sidebar-mini-topics {
    display: none;
  margin-top: 4px;
  }

  .un-sidebar-mini-title {
  margin: 0 0 10px;
  font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
  text-align: center;
  letter-spacing: .2px;
  }

  .un-mini-topic-item {
    display: block;
  margin: 0 auto 8px;
  border-radius: 16px;
    overflow: hidden;
  width: 50px;
  height: 50px;
  }

  .un-mini-topic-item .un-topic-thumb {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  }

  .un-mini-topic-add {
  width: 50px;
  height: 50px;
    border: 0;
  border-radius: 16px;
    background: #f1f1f1;
    color: #7a7a7a;
  display: flex;
    align-items: center;
    justify-content: center;
  margin: 2px auto 0;
}

.un-mini-topic-add .fas {
  width: auto;
  font-size: 22px;
  }

  .un-home-layout:not(.un-sidebar-expanded) .un-sidebar-mini-topics {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.un-home-layout:not(.un-sidebar-expanded) .un-sidebar-line {
  margin: 10px 0 12px;
  }

  .un-home-main {
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    min-height: 0;
  }

  .un-home-columns {
    --un-home-columns-gap: 20px;
    display: flex;
    gap: var(--un-home-columns-gap);
    width: max-content;
    min-width: 100%;
    align-items: stretch;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    justify-content: center;
  }

  /* Không co ép các cột khi viewport hẹp — giữ đủ rộng và cuộn ngang (.un-home-main overflow-x) */
  .un-home-columns > .un-home-feed-col {
    flex-shrink: 0;
  }

  .un-home-board-col[data-un-board]:not(.is-board-collapsed) {
    flex-shrink: 0;
  }

  /* Cột bảng có thể ẩn — transition thay cho [hidden] để không nhảy layout */
  .un-home-board-col[data-un-board] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    min-width: 700px;
    max-width: 700px;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      max-width var(--un-motion-duration) var(--un-motion-ease),
      opacity 0.28s ease,
      visibility 0s linear 0s;
  }

  /* Ẩn hoàn toàn khỏi flex — tránh gap đôi (gap vẫn tính giữa item width:0) */
  .un-home-board-col[data-un-board].is-board-collapsed {
    display: none !important;
  }

  .un-home-columns--single-feed {
    width: 100%;
    min-width: 0;
  }

  .un-home-columns--single-feed .un-home-feed-col {
    max-width: min(700px, 100%);
    flex: 1 1 auto;
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts)
    .un-home-layout:not(.un-home-layout--post-detail)
    .un-home-columns--single-feed {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* Trang Bài viết của tôi: Phân tích hiệu suất | Feed */
  .un-home-columns--my-posts {
    align-items: stretch;
    justify-content: center;
  }

  .un-home-columns--my-posts .un-perf-col {
    flex: 0 1 320px;
    width: 100%;
    max-width: min(328px, 100%);
    min-width: 0;
  }

  .un-my-posts-feed-wrap {
    flex: 1 1 600px;
    max-width: min(700px, 100%);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .un-my-posts-feed-wrap > .un-home-col {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* Cột feed trống: khung danh sách không flex-grow dọc (nội dung ôm sát empty state) */
  .un-home-feed-col--empty .un-home-posts-list {
    flex: initial;
  }

  /* Cột feed trống: cùng độ rộng chuẩn với “Dành cho bạn” (600px), không bị co nội dung */
  .un-home-board-col[data-un-board]:has(.un-home-feed-col--empty) {
    flex: 0 0 600px;
    width: 600px;
    min-width: 600px;
    max-width: 600px;
  }

  .un-home-board-col[data-un-board] .un-home-feed-col.un-home-feed-col--empty {
    width: 100%;
    max-width: 600px;
  }

  .un-home-columns:not(.un-home-columns--my-posts):not(.un-home-columns--single-feed) > .un-home-feed-col.un-home-feed-col--empty:first-child {
    flex: 0 0 600px;
    width: 600px;
    min-width: 600px;
    max-width: 600px;
  }

  .un-home-columns--single-feed .un-home-feed-col.un-home-feed-col--empty {
    flex: 1 1 auto;
    width: 100%;
    max-width: min(600px, 100%);
  }

  /* Trang chi tiết: khóa chiều cao layout (sidebar min-height 820 không được đẩy grid tràn viewport), cuộn trong .un-home-posts-list--detail */
  .path--studyfeed-post-view .un-home.un-home--post-detail {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100%;
    overflow: hidden;
  }

  .un-home-layout--post-detail {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }

  /* Chỉ giới hạn chiều cao — không đổi màu/padding/bo góc sidebar */
  .un-home-layout--post-detail > .un-home-sidebar {
    max-height: 100%;
    box-sizing: border-box;
  }

  .un-home-layout--post-detail .un-home-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-self: stretch;
  }

  .un-home-layout--post-detail .un-home-columns--post-detail {
    width: 100%;
    max-width: min(1120px, 100%);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0 auto;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
  }

  .un-home-layout--post-detail .un-home-columns--post-detail > .un-home-feed-col--detail {
    flex: 1 1 auto;
    flex-shrink: 1;
    width: auto;
    max-width: min(760px, 100%);
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .un-home-layout--post-detail .un-home-posts-list--detail {
    flex: 1 1 auto;
    min-height: 0;
    height: var(--un-post-detail-scroll-h, auto);
    max-height: var(--un-post-detail-scroll-h, none);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border-radius: 22px;
    scroll-padding-bottom: max(64px, calc(48px + env(safe-area-inset-bottom, 0px)));
    padding-bottom: max(64px, calc(48px + env(safe-area-inset-bottom, 0px)));
  }

  .un-home-layout--post-detail .un-home-posts-list--detail::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .un-home-layout--post-detail .un-home-posts-list--detail .un-feed-card {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 22px;
    background: #fff;
    box-sizing: border-box;
  }

  /* Cột phải: cố định, không cuộn theo cột giữa */
  .un-home-layout--post-detail .un-post-detail-right-col {
    flex: 0 0 320px;
    width: 320px;
    min-width: 280px;
    max-width: 320px;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    align-self: stretch;
    border-radius: 0;
  }

  .un-home-layout--post-detail .un-post-detail-right-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: var(--un-post-detail-right-h, 100%);
    max-height: var(--un-post-detail-right-h, 100%);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    box-sizing: border-box;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .un-home-layout--post-detail .un-post-detail-right-inner::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .un-post-detail-author-card,
  .un-post-detail-related-card {
    background: #fff;
    border-radius: 22px;
    padding: 18px 16px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .un-post-detail-author-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }

  .un-post-detail-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0f4fb;
  }

  .un-post-detail-author-ident {
    min-width: 0;
    flex: 1 1 auto;
  }

  .un-post-detail-author-name {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #0f172a;
  }

  .un-post-detail-author-name strong {
    font-weight: 700;
  }

  .un-post-detail-author-handle {
    font-weight: 500;
    color: #64748b;
  }

  .un-post-detail-author-verified {
    color: #2563eb;
    font-size: 13px;
    margin-left: 2px;
  }

  .un-post-detail-author-tagline {
    margin: 4px 0 0;
    font-size: 13px;
    color: #475569;
  }

  .un-post-detail-author-bio {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
  }

  .un-post-detail-author-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }

  .un-post-detail-stat {
    background: #f3f3f3;
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
  }

  .un-post-detail-stat strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
  }

  .un-post-detail-stat span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.2;
  }

  .un-post-detail-follow-btn {
    width: 100%;
    border: 0;
    border-radius: 999px;
    min-height: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 14px/1.2 "Lexend", sans-serif;
    color: #fff;
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
    margin-bottom: 12px;
  }

  .un-post-detail-follow-btn:hover {
    opacity: 0.92;
  }

  .un-post-detail-follow-btn.is-following {
    background: #e8eef7;
    color: #316dd3;
  }

  .un-post-detail-follow-btn .un-avatar-follow-icon-plus,
  .un-post-detail-follow-btn .un-avatar-follow-icon-check {
    display: none;
  }

  /* Không kế thừa position:absolute / 22px của .un-avatar-follow-btn trên feed */
  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin: 0 0 12px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    z-index: auto;
    transform: none;
    flex-shrink: 0;
    align-self: stretch;
  }

  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn:hover,
  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn:active {
    transform: none;
    box-shadow: none;
  }

  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn:hover {
    opacity: 0.92;
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    color: #fff;
  }

  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn.is-following {
    background: #e8eef7;
    color: #316dd3;
  }

  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn.is-following:hover {
    background: #dfe8f4;
    color: #2558b8;
  }

  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn i {
    font-size: 14px;
    line-height: 1;
  }

  .un-post-detail-author-card .un-post-detail-follow-btn.un-avatar-follow-btn span {
    display: inline;
  }

  .un-post-detail-author-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .un-post-detail-tag {
    font-size: 12px;
    color: #475569;
    background: #f3f3f3;
    border-radius: 999px;
    padding: 5px 10px;
    line-height: 1.2;
  }

  .un-post-detail-related-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0f172a;
    text-transform: uppercase;
  }

  .un-post-detail-related-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .un-post-detail-related-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    padding: 4px;
    transition: background 0.15s ease;
  }

  .un-post-detail-related-item:hover {
    background: #f5f8fc;
    text-decoration: none;
  }

  .un-post-detail-related-thumb-wrap {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef4fa;
  }

  .un-post-detail-related-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .un-post-detail-related-body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .un-post-detail-related-item-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #2563eb;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .un-post-detail-related-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
  }

  .un-post-detail-related-meta i {
    margin-right: 4px;
    font-size: 11px;
  }

  .un-post-detail-related-date {
    flex-shrink: 0;
  }

  /* —— Trang chi tiết chủ đề —— */
  .path--studyfeed-topic-view .un-home.un-home--topic-detail {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100%;
    overflow: hidden;
  }

  .un-home-layout--topic-detail {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }

  .un-home-layout--topic-detail > .un-home-sidebar {
    max-height: 100%;
    box-sizing: border-box;
  }

  .un-home-layout--topic-detail .un-home-main.un-topic-detail-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 10px max(12px, env(safe-area-inset-bottom, 0px)) 0;
    box-sizing: border-box;
  }

  .un-topic-detail-columns-wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .un-home-layout--topic-detail .un-topic-detail-columns.un-home-columns {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    width: max-content;
    min-width: 100%;
    align-items: stretch;
    justify-content: center;
  }

  .un-home-layout--topic-detail .un-topic-detail-columns.un-home-columns--single-col {
    min-width: 100%;
  }

  .un-home-layout--topic-detail .un-home-board-col[data-un-board^="topic-"] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    flex: 0 0 700px;
    width: 700px;
    min-width: 700px;
    max-width: 700px;
    min-height: 0;
    overflow: hidden;
  }

  .un-home-layout--topic-detail .un-home-board-col[data-un-board^="topic-"].is-board-collapsed {
    display: none !important;
  }

  .un-home-layout--topic-detail .un-topic-detail-columns.un-home-columns--single-col .un-home-board-col[data-un-board^="topic-"]:not(.is-board-collapsed) {
    flex: 0 0 min(700px, 100%);
    width: min(700px, 100%);
    min-width: min(700px, 100%);
    max-width: min(700px, 100%);
  }

  .un-home-layout--topic-detail .un-home-board-col[data-un-board^="topic-"] > .un-home-feed-col {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }

  .path--studyfeed-topic-view .un-home-layout--topic-detail .un-home-col {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .path--studyfeed-topic-view .un-home-layout--topic-detail .un-feed-col-head-wrap {
    flex-shrink: 0;
  }

  .path--studyfeed-topic-view .un-home-layout--topic-detail .un-home-posts-list:not(.un-home-posts-list--detail) {
    flex: 1 1 auto;
    min-height: 0;
    height: var(--un-home-feed-scroll-h, auto);
    max-height: var(--un-home-feed-scroll-h, none);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Desktop: cuộn main để hero trôi lên; khối cột bài dính mép trên + cuộn trong từng cột */
  @media (min-width: 993px) {
    .path--studyfeed-topic-view {
      --un-topic-detail-sticky-top: 0px;
      --un-topic-detail-sticky-h: calc(100vh - var(--un-header-h, 5.5rem) - 1.25rem);
    }

    .un-home-layout--topic-detail .un-home-main.un-topic-detail-main {
      overflow-x: auto;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    .un-topic-detail-columns-wrap {
      position: sticky;
      top: var(--un-topic-detail-sticky-top);
      flex: none;
      height: var(--un-topic-detail-sticky-h);
      max-height: var(--un-topic-detail-sticky-h);
      overflow: hidden;
      z-index: 2;
    }

    .un-home-layout--topic-detail .un-topic-detail-columns.un-home-columns {
      height: 100% !important;
      max-height: 100% !important;
      align-items: stretch !important;
    }

    .un-home-layout--topic-detail .un-home-board-col[data-un-board^="topic-"] {
      height: 100%;
      max-height: 100%;
    }

    .path--studyfeed-topic-view .un-home-layout--topic-detail .un-home-col {
      height: 100%;
      max-height: 100%;
    }

    .path--studyfeed-topic-view .un-home-layout--topic-detail .un-home-posts-list:not(.un-home-posts-list--detail) {
      flex: 1 1 auto;
      min-height: 0;
      height: auto !important;
      max-height: 100% !important;
      overflow-y: auto !important;
      overscroll-behavior-y: contain;
    }
  }

  @media (max-width: 992px) {
    .un-home-layout--topic-detail .un-home-main.un-topic-detail-main {
      height: auto !important;
      max-height: none !important;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .un-topic-detail-columns-wrap {
      flex: none;
      overflow: visible;
    }

    .un-home-layout--topic-detail .un-topic-detail-columns.un-home-columns {
      height: auto;
      max-height: none;
    }

    .un-home-layout--topic-detail .un-home-board-col[data-un-board^="topic-"] {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }
  }

  .un-topic-detail-hero {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border-radius: 22px;
    padding: 22px 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  .un-topic-detail-hero-body {
    min-width: 0;
    flex: 1 1 auto;
  }

  .un-topic-detail-hero-date {
    margin: 0 0 8px;
    font-size: 13px;
    color: #64748b;
  }

  .un-topic-detail-hero-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
  }

  .un-topic-detail-hero-desc {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
    max-width: 720px;
  }

  .un-topic-detail-hero-stats {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #316dd3;
  }

  .un-topic-detail-hero-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 180px;
    min-width: 180px;
  }

  .un-topic-detail-follow-btn,
  .un-topic-detail-share-btn {
    width: 100%;
    box-sizing: border-box;
    border-radius: 999px;
    min-height: 44px;
    padding: 10px 20px;
    font: 600 14px/1.2 "Lexend", sans-serif;
    cursor: pointer;
    white-space: nowrap;
  }

  .un-topic-detail-follow-btn {
    border: 0;
    color: #fff;
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    transition: filter 0.15s ease, background 0.15s ease;
  }

  /* Ghi đè .un-topic-follow-btn (sidebar) — tránh nền trắng khi hover */
  .un-topic-detail-hero-actions .un-topic-detail-follow-btn.un-topic-follow-btn {
    align-self: stretch;
    font-size: 14px;
    border: 0;
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    color: #fff;
  }

  .un-topic-detail-hero-actions .un-topic-detail-follow-btn.un-topic-follow-btn:hover {
    background: linear-gradient(90deg, #285fc4 0%, #12a8eb 100%);
    filter: brightness(1.02);
  }

  .un-topic-detail-follow-btn.is-following,
  .un-topic-detail-hero-actions .un-topic-detail-follow-btn.un-topic-follow-btn.is-following {
    background: #e8eef7;
    color: #316dd3;
    filter: none;
  }

  .un-topic-detail-hero-actions .un-topic-detail-follow-btn.un-topic-follow-btn.is-following:hover {
    background: #dce8f6;
    color: #285fc4;
  }

  .un-topic-detail-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #c9dcf4;
    color: #316dd3;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .un-topic-detail-share-btn:hover {
    background: #f5f9ff;
    border-color: #316dd3;
  }

  .un-home-layout--topic-detail .un-feed-col-remove.is-disabled,
  .un-home-layout--topic-detail .un-feed-col-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  .un-topic-detail-columns .un-board-add-wrap.is-all-boards-visible {
    display: none !important;
  }

  .un-topic-item.is-active-topic {
    background: #e8f4ff;
    border-radius: 14px;
  }

  .un-topic-item.is-active-topic .un-topic-name {
    color: #316dd3;
    font-weight: 700;
  }

  .un-topic-discovery-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .un-topic-discovery-card__title a:hover {
    color: #316dd3;
    text-decoration: underline;
  }

  @media (max-width: 1100px) {
    .un-topic-detail-hero {
      flex-direction: column;
    }

    .un-topic-detail-hero-actions {
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      min-width: 0;
    }

    .un-topic-detail-follow-btn,
    .un-topic-detail-share-btn {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
    }
  }

  .un-perf-col-inner {
    padding: 18px 18px 20px;
    box-sizing: border-box;
  }

  .un-home-columns--my-posts .un-perf-col.un-home-col {
    max-width: min(328px, 100%);
  }

  .un-perf-period-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .un-perf-period-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.02em;
  }

  .un-perf-detail-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--un-blue);
    text-decoration: none;
  }

  .un-perf-detail-link:hover {
    text-decoration: underline;
  }

  .un-perf-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
  }

  .un-perf-stat-box {
    background: #f3f4f6;
    border-radius: 14px;
    padding: 12px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 72px;
    justify-content: center;
  }

  .un-perf-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
  }

  .un-perf-stat-caption {
    font-size: 11px;
    font-weight: 600;
    color: var(--un-muted);
    line-height: 1.25;
  }

  .un-perf-featured-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 0 0 10px;
  }

  .un-perf-featured-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .un-perf-featured-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 6px 4px;
    margin: 0 -4px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
  }

  .un-perf-featured-item:hover {
    background: #f9fafb;
  }

  .un-perf-featured-thumb-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef4fa;
  }

  .un-perf-featured-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .un-perf-featured-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .un-perf-featured-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--un-blue);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .un-perf-featured-meta {
    font-size: 12px;
    color: var(--un-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .un-perf-featured-date {
    color: #c43131;
    font-weight: 600;
    flex-shrink: 0;
  }

  .un-perf-empty-featured-wrap {
    text-align: center;
    padding: 16px 10px 12px;
    margin: 4px 0 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    border: 1px dashed rgba(49, 109, 211, 0.22);
  }

  .un-perf-empty-featured-svg {
    width: 140px;
    height: 105px;
    margin: 0 auto 12px;
  }

  .un-perf-empty-featured-svg svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .un-perf-empty-illu {
    animation: un-perf-empty-float 3.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 60%;
  }

  .un-perf-empty-illu .un-perf-empty-chart-area {
    animation: un-perf-empty-chart-pulse 2.6s ease-in-out infinite;
  }

  .un-perf-empty-sun {
    animation: un-perf-empty-sun-bob 2.4s ease-in-out infinite;
    transform-origin: 126px 36px;
    transform-box: fill-box;
  }

  .un-perf-empty-rays {
    animation: un-perf-empty-rays-glow 2.8s ease-in-out infinite;
    transform-origin: 126px 36px;
  }

  .un-perf-empty-bar {
    animation: un-perf-empty-bar-pop 2s ease-in-out infinite;
  }

  .un-perf-empty-bar:nth-child(4) { animation-delay: 0s; }
  .un-perf-empty-bar:nth-child(5) { animation-delay: 0.12s; }
  .un-perf-empty-bar:nth-child(6) { animation-delay: 0.24s; }
  .un-perf-empty-bar:nth-child(7) { animation-delay: 0.36s; }

  @keyframes un-perf-empty-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  @keyframes un-perf-empty-chart-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
  }

  @keyframes un-perf-empty-sun-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
  }

  @keyframes un-perf-empty-rays-glow {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
  }

  @keyframes un-perf-empty-bar-pop {
    0%, 100% { opacity: 0.65; transform: scaleY(0.92); }
    50% { opacity: 1; transform: scaleY(1); }
  }

  .un-perf-empty-featured-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
  }

  .un-perf-empty-featured-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--un-muted);
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .un-perf-empty-illu,
    .un-perf-empty-illu .un-perf-empty-chart-area,
    .un-perf-empty-sun,
    .un-perf-empty-rays,
    .un-perf-empty-bar {
      animation: none !important;
    }

    .un-perf-empty-bar {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  @media (max-width: 992px) {
    .un-home-columns--my-posts {
      flex-direction: column;
      align-items: stretch;
    }

    .un-home-columns--my-posts .un-perf-col {
      max-width: min(600px, 100%);
      flex: 1 1 auto;
      min-width: 0;
    }

    .un-my-posts-feed-wrap {
      max-width: min(600px, 100%);
    }
  }

  .un-home-col {
    border-radius: 10px;
    max-width: 700px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .un-feed-col-head-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .un-feed-col-remove {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      background-color 0.22s ease,
      transform 0.18s ease;
  }

  .un-feed-col-remove:hover {
    background: #cfe5fc;
  }

  .un-feed-col-remove:active {
    transform: scale(0.96);
  }

  .un-feed-col-remove:focus-visible {
    outline: 2px solid var(--un-blue);
    outline-offset: 2px;
  }

  .un-feed-col-remove-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: var(--un-blue);
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(49, 109, 211, 0.12);
  }

  .un-home-col-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    border-radius: 14px 14px 0px 0px;
    min-height: 42px;
    padding: 0 26px;
    box-shadow: 0 3px 8px rgba(30, 130, 220, 0.25);
    width: fit-content;
  }

  .un-home-col.un-home-right-col .un-home-col-header {
    font-size: 16px;
    min-height: 38px;
    padding: 0 22px;
  }

  .un-home-posts-list {
    border-radius: 10px;
    background: #FFF;
    /* padding-bottom đủ lớn: bo góc + overflow-y tránh cắt đoạn cuối bài khi scroll tới đáy */
    box-sizing: border-box;
    padding: 20px;
    scroll-padding-bottom: max(24px, calc(12px + env(safe-area-inset-bottom, 0px)));

    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* .un-home-posts .un-home-posts-list {
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  } */

  .un-home-posts .un-home-posts-list::-webkit-scrollbar {
    display: none;
  }

  .un-home-right-col {
    align-self: stretch;
  }

  /* Cột phải: 2 card hiện đủ nội dung; quá dài thì cuộn cả cột (không cuộn từng card) */
  .un-home-board-col[data-un-board='docs-jobs'] {
    flex: 0 0 400px;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    overflow: hidden;
  }

  .un-right-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .un-right-stack::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .un-home-board-col[data-un-board='docs-jobs'] .un-right-card {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    align-self: stretch;
    max-width: 400px;
    width: 100%;
    overflow: visible;
  }

  .un-home-board-col[data-un-board='docs-jobs'] .un-right-card .un-home-posts-list {
    flex: none;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow: visible !important;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts)
    .un-home-layout:not(.un-home-layout--post-detail)
    .un-home-board-col[data-un-board='docs-jobs']
    .un-right-card {
    max-height: none;
    overflow: visible;
  }

  :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts)
    .un-home-layout:not(.un-home-layout--post-detail)
    .un-home-board-col[data-un-board='docs-jobs']
    .un-right-card
    .un-home-posts-list {
    flex: none;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .un-home-board-col[data-un-board='docs-jobs'] .un-feed-col-head-wrap {
    flex-shrink: 0;
  }

  /* Card Hôm nay của bạn */
  .un-today-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
  }

  .un-today-inner {
    padding: 16px;
  }

  .un-today-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2f2f2f;
  }

  .un-today-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .un-today-tile {
    background: #f3f4f6;
    border-radius: 14px;
    padding: 14px 10px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 148px;
  }

  .un-today-tile-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f1f1f;
  }

  .un-today-tile-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #f08a24;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .un-today-tile-value strong {
    font-weight: 800;
  }

  .un-today-tile-value--streak {
    font-size: 20px;
  }

  .un-today-flame,
  .un-today-coin {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: auto;
  }

  .un-today-tile-note,
  .un-today-tile-rank {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #2f2f2f;
    line-height: 1.35;
  }

  .un-today-week {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 10px;
  }

  .un-today-week-dot {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.55;
  }

  .un-today-week-dot.is-on {
    opacity: 1;
  }

  .un-today-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 6px 12px;
    border-radius: 999px;
    border: none;
    background: #fff;
    color: #444;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  .un-today-detail-btn:hover {
    color: #1f1f1f;
    text-decoration: none;
  }

  /* Streak welcome modal */
  html.un-streak-lock,
  html.un-streak-lock body {
    overflow: hidden;
  }

  .un-streak-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 18, 16, 0.52);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .un-streak-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .un-streak-modal {
    position: relative;
    width: min(100%, 340px);
    padding: 36px 28px 28px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff8f0 0%, #ffffff 42%);
    text-align: center;
    box-shadow: 0 18px 48px rgba(40, 24, 8, 0.22);
    transform: translateY(18px) scale(0.94);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .un-streak-overlay.is-open .un-streak-modal {
    transform: translateY(0) scale(1);
  }

  .un-streak-modal__glow {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 170, 64, 0.35) 0%, rgba(255, 170, 64, 0) 70%);
    pointer-events: none;
  }

  .un-streak-modal__fire,
  .un-streak-modal__icon {
    position: relative;
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 auto 8px;
    animation: un-streak-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .un-streak-modal__points {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: #f08a24;
  }

  @keyframes un-streak-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
  }

  .un-streak-modal__days {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: #f08a24;
  }

  .un-streak-modal__days span {
    font-variant-numeric: tabular-nums;
  }

  .un-streak-modal__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: #1f1f1f;
    line-height: 1.25;
  }

  .un-streak-modal__msg {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 500;
    color: #5a5a5a;
    line-height: 1.45;
  }

  .un-streak-modal__week {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 22px;
  }

  .un-streak-modal__week img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  .un-streak-modal__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    background: #f08a24;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }

  .un-streak-modal__cta:hover {
    background: #e07a14;
  }

  .un-feed-card {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
  }

  .un-feed-card + .un-feed-card {
    border-top: none;
  }

  /* Feed: mỗi post là card riêng — list trong suốt, khoảng cách giữa các card */
  .un-home-feed-col > .un-home-posts-list {
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .un-home-feed-col--empty > .un-home-posts-list {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
  }

  .un-feed-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .un-feed-author {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .un-feed-author-link--avatar {
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
  }

  .un-feed-author-name-link {
    text-decoration: none;
    color: inherit;
  }

  .un-feed-author-name-link:hover strong {
    color: var(--primary, #1b61d8);
  }

  a.un-feed-topic-badge {
    text-decoration: none;
    color: #fff;
    transition: background 0.2s ease, transform 0.15s ease;
  }

  a.un-feed-topic-badge:hover {
    background: #1788d4;
    color: #fff;
    transform: translateY(-1px);
  }

  .un-post-detail-author-profile-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.75rem;
    border-radius: 10px;
  }

  .un-post-detail-author-profile-link:hover .un-post-detail-author-name strong {
    color: var(--primary, #1b61d8);
  }

  .un-feed-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4fa;
    border: 1px solid #dbe4ef;
  }

  .un-feed-avatar-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
  }

  .un-feed-avatar-wrap--has-follow {
    margin-right: 4px;
  }

  .un-avatar-follow-btn {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #1d4ed8;
    color: #fff;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    z-index: 1;
  }

  .un-avatar-follow-btn:hover {
    background: #2563eb;
    transform: scale(1.06);
  }

  .un-avatar-follow-btn:active {
    transform: scale(0.94);
  }

  .un-avatar-follow-btn[data-loading="1"] {
    opacity: 0.7;
    pointer-events: none;
  }

  .un-avatar-follow-btn .un-avatar-follow-icon-plus,
  .un-avatar-follow-btn .un-avatar-follow-icon-check {
    font-size: 11px;
    line-height: 1;
  }

  .un-avatar-follow-btn .un-avatar-follow-icon-check {
    display: none;
  }

  .un-avatar-follow-btn.is-following {
    background: #16a34a;
  }

  .un-avatar-follow-btn.is-following:hover {
    background: #15803d;
  }

  .un-avatar-follow-btn.is-following .un-avatar-follow-icon-plus {
    display: none;
  }

  .un-avatar-follow-btn.is-following .un-avatar-follow-icon-check {
    display: inline-block;
  }

  .un-user-follow-popup {
    width: min(360px, calc(100vw - 24px));
  }

  .un-user-follow-popup__body {
    padding: 20px 20px 8px;
    text-align: center;
  }

  .un-user-follow-popup__avatar {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4fa;
    border: 1px solid #dbe4ef;
    display: block;
    margin: 0 auto 12px;
  }

  .un-user-follow-popup__name {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
  }

  .un-user-follow-popup__desc {
    margin: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
  }

  .un-user-follow-popup__actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
  }

  .un-user-follow-popup__btn {
    flex: 1;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 14px;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .un-user-follow-popup__btn--cancel {
    background: #eef2ff;
    color: #334155;
  }

  .un-user-follow-popup__btn--cancel:hover {
    background: #e0e7ff;
  }

  .un-user-follow-popup__btn--primary {
    background: #1d4ed8;
    color: #fff;
  }

  .un-user-follow-popup__btn--primary:hover {
    background: #2563eb;
  }

  .un-user-follow-popup__btn--danger {
    background: #fee2e2;
    color: #b91c1c;
  }

  .un-user-follow-popup__btn--danger:hover {
    background: #fecaca;
  }

  .un-user-follow-popup__btn[data-loading="1"] {
    opacity: 0.7;
    pointer-events: none;
  }

  .un-feed-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
  }

  .un-feed-author-row strong {
    font-size: 15px;
    color: #111827;
    line-height: 1.2;
    font-weight: 700;
  }

  .un-feed-topic-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    background: #1ea0f2;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }

  .un-feed-author-info p {
    margin: 0;
    font-size: 12px;
    color: #4b5563;
  }

  .un-feed-more-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .un-feed-more {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    color: #9ca3af;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
  }

  .un-feed-more:hover,
  .un-feed-more[aria-expanded="true"] {
    background: #f1f5f9;
    color: #64748b;
  }

  .un-post-menu-dropdown {
    position: fixed;
    z-index: 12080;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
    padding: 6px;
    display: none;
  }

  .un-post-menu-dropdown.is-open {
    display: block;
  }

  .un-post-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
  }

  .un-post-menu-item:hover {
    background: #f8fafc;
  }

  .un-post-menu-item i {
    width: 18px;
    color: #64748b;
    text-align: center;
  }

  .un-post-menu-item--danger {
    color: #dc2626;
  }

  .un-post-menu-item--danger i {
    color: #dc2626;
  }

  .un-post-menu-divider {
    height: 1px;
    margin: 4px 8px;
    background: #e2e8f0;
  }

  .un-post-delete-popup,
  .un-post-archive-popup {
    width: min(420px, calc(100vw - 32px));
  }

  .un-post-delete-popup__body,
  .un-post-archive-popup__body {
    padding: 16px 12px;
  }

  .un-post-block-popup,
  .un-post-report-popup {
    width: min(420px, calc(100vw - 32px));
  }

  .un-post-block-popup__body,
  .un-post-report-popup__body {
    padding: 16px 12px;
  }

  .un-post-block-popup__lead {
    margin: 0 0 10px;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
  }

  .un-post-block-popup__list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
  }

  .un-post-block-popup__list li {
    margin-bottom: 6px;
  }

  .un-post-report-popup__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
  }

  .un-post-report-reasons {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
  }

  .un-post-report-reason {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 14px;
    color: #0f172a;
    line-height: 1.4;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .un-post-report-reason:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  .un-post-report-reason.is-selected {
    background: #eff6ff;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
  }

  .un-post-report-reason.is-selected > span {
    font-weight: 600;
    color: #1e40af;
  }

  .un-post-report-reason input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid #64748b;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .un-post-report-reason input[type="radio"]:checked,
  .un-post-report-reason.is-selected input[type="radio"] {
    border-color: #2563eb;
    border-width: 2px;
    background: #2563eb;
    box-shadow: inset 0 0 0 4px #fff;
  }

  .un-post-report-reason input[type="radio"]:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }

  .un-post-report-details {
    width: 100%;
    margin-top: 4px;
    min-height: 72px;
    resize: vertical;
  }

  .un-post-report-details-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 8px 0 6px;
  }

  .un-post-report-thanks-popup {
    width: min(380px, calc(100vw - 32px));
    text-align: center;
    padding: 20px 16px 12px;
  }

  .un-post-report-thanks__icon {
    font-size: 40px;
    color: #22c55e;
    margin-bottom: 8px;
  }

  .un-post-report-thanks__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
  }

  .un-post-report-thanks__text {
    margin: 0 0 16px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
  }

  .un-post-report-thanks__actions {
    justify-content: center;
  }

  .un-feed-title {
    margin: 0 0 8px;
    color: #316dd3;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
  }

  .un-feed-text-shell {
    position: relative;
    margin-bottom: 8px;
  }

  .un-feed-text-shell .un-feed-content {
    margin-bottom: 0;
  }

  .un-feed-content {
    color: #242424;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 8px;
    position: relative;
  }

  .un-feed-content h1,
  .un-feed-content h2,
  .un-feed-content h3,
  .un-feed-content h4,
  .un-feed-content h5,
  .un-feed-content h6 {
    margin: 0 0 8px;
    color: #1f2937;
    font-size: 15px !important;
    line-height: 1.5;
    font-weight: 600;
  }

  .un-feed-content p {
    margin: 0 0 8px;
  }

  .un-feed-content p:last-child {
    margin-bottom: 0;
  }

  .un-feed-content strong,
  .un-feed-content b {
    font-weight: 600;
  }

  .un-feed-embed-video {
    margin: 10px 0 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* YouTube: ~80% chiều ngang card, căn trái */
  .un-feed-embed-video .stf-embed-video-wrap.stf-embed-youtube {
    width: 80%;
    max-width: 720px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    position: relative;
    aspect-ratio: 16 / 9;
  }

  .un-feed-embed-video .stf-embed-video-wrap.stf-embed-youtube .stf-embed-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* TikTok Embed Player (player/v1): khung 9:16, không crop — tránh cuộn/“trang” trong iframe cũ embed/v2 */
  .un-feed-embed-video .stf-embed-video-wrap.stf-embed-tiktok {
    width: 80%;
    max-width: 325px;
    min-width: 0;
    margin: 0;
    align-self: flex-start;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: min(70vh, 620px);
  }

  .un-feed-embed-video .stf-embed-video-wrap.stf-embed-tiktok .stf-embed-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .un-feed-content.is-collapsed {
    max-height: 400px;
    overflow: hidden;
  }

  @media (max-width: 992px) {
    .un-feed-content.is-collapsed {
      max-height: 280px;
    }
  }

  .un-feed-content.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
  }

  .un-feed-text-foot {
    display: none;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin-top: 8px;
    padding-top: 2px;
  }

  .un-feed-text-shell.un-feed-text-shell--has-more .un-feed-text-foot {
    display: flex;
    position: static;
    z-index: auto;
  }

  .un-feed-text-shell.un-feed-text-shell--has-more.is-expanded .un-feed-text-foot {
    margin-top: 10px;
    padding-top: 0;
  }

  .un-feed-text-foot .un-feed-toggle-btn {
    border: 0;
    border-radius: 999px;
    background: #050505;
    color: #fff;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
  }

  .un-feed-text-foot .un-feed-toggle-btn:hover {
    opacity: 0.92;
  }

  .un-feed-tags {
    margin: 0 0 10px;
    color: #2d71c4;
    font-size: 14px;
    font-weight: 600;
  }

  .un-feed-link-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
  }

  .un-feed-link-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .un-feed-link-card__shine {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .un-feed-link-card--doc {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 55%, #eef6ff 100%);
    border-color: rgba(49, 109, 211, 0.22);
    box-shadow: 0 4px 18px rgba(49, 109, 211, 0.08);
  }

  .un-feed-link-card--doc .un-feed-link-card__shine {
    background: linear-gradient(120deg, transparent 30%, rgba(30, 184, 255, 0.12) 50%, transparent 70%);
  }

  .un-feed-link-card--job {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 50%, #fff1f2 100%);
    border-color: rgba(234, 88, 12, 0.2);
    box-shadow: 0 4px 18px rgba(234, 88, 12, 0.07);
  }

  .un-feed-link-card--job .un-feed-link-card__shine {
    background: linear-gradient(120deg, transparent 30%, rgba(251, 146, 60, 0.14) 50%, transparent 70%);
  }

  .un-feed-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
  }

  .un-feed-link-card:hover .un-feed-link-card__shine {
    opacity: 1;
  }

  .un-feed-link-card__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 22px;
  }

  .un-feed-link-card__icon--doc {
    background: linear-gradient(145deg, #316dd3 0%, #1eb8ff 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(49, 109, 211, 0.28);
  }

  .un-feed-link-card__icon--job {
    background: linear-gradient(145deg, #ea580c 0%, #f97316 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.25);
  }

  .un-feed-link-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .un-feed-link-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .un-feed-link-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .un-feed-link-card--doc .un-feed-link-card__eyebrow {
    color: #2563eb;
  }

  .un-feed-link-card--job .un-feed-link-card__eyebrow {
    color: #c2410c;
  }

  .un-feed-link-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .un-feed-link-card__meta {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .un-feed-link-card__go {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    color: #334155;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .un-feed-link-card--doc:hover .un-feed-link-card__go {
    background: #316dd3;
    color: #fff;
  }

  .un-feed-link-card--job:hover .un-feed-link-card__go {
    background: #ea580c;
    color: #fff;
  }

  .un-feed-gallery-swiper {
    --un-feed-gallery-gap: 12px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .un-feed-gallery-swiper .swiper-wrapper {
    align-items: stretch;
  }

  .un-feed-gallery-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    background: #edf3fa;
    border: 1px solid #dbe3ec;
    box-sizing: border-box;
  }

  .un-feed-gallery-swiper--single .swiper-slide {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 180px;
    max-height: min(70vh, 560px);
  }

  .un-feed-gallery-swiper--double .swiper-slide {
    aspect-ratio: 1 / 1;
    min-height: 140px;
  }

  .un-feed-gallery-swiper:not(.un-feed-gallery-swiper--single):not(.un-feed-gallery-swiper--double) .swiper-slide {
    aspect-ratio: 4 / 5;
    min-height: 160px;
  }

  .un-feed-gallery-swiper--double:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - var(--un-feed-gallery-gap)) / 2);
    margin-right: var(--un-feed-gallery-gap);
  }

  .un-feed-gallery-swiper--double:not(.swiper-initialized) .swiper-slide:last-child {
    margin-right: 0;
  }

  .un-feed-gallery-swiper:not(.un-feed-gallery-swiper--single):not(.un-feed-gallery-swiper--double):not(.swiper-initialized) .swiper-slide {
    width: calc((100% - (var(--un-feed-gallery-gap) * 2)) / 2.5);
    margin-right: var(--un-feed-gallery-gap);
  }

  .un-feed-gallery-swiper:not(.un-feed-gallery-swiper--single):not(.un-feed-gallery-swiper--double):not(.swiper-initialized) .swiper-slide:last-child {
    margin-right: 0;
  }

  .un-feed-gallery-swiper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .un-feed-gallery-swiper--double .swiper-slide:not(:first-child) img,
  .un-feed-gallery-swiper--scroll .swiper-slide:not(:first-child) img {
    height: 100%;
    object-fit: contain;
  }

  .un-feed-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .un-feed-left-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .un-feed-left-actions button,
  .un-feed-left-actions a.un-action-btn,
  .un-feed-share {
    border: 0;
    border-radius: 999px;
    background: var(--un-feed-action-bg);
    color: var(--un-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition:
      background-color 0.22s ease,
      color 0.22s ease,
      transform 0.18s ease;
  }

  .un-feed-left-actions a.un-action-btn {
    text-decoration: none;
    cursor: pointer;
  }

  .un-feed-left-actions button i,
  .un-feed-left-actions a.un-action-btn i,
  .un-feed-share i {
    color: inherit;
  }

  .un-feed-left-actions button:hover,
  .un-feed-left-actions a.un-action-btn:hover,
  .un-feed-share:hover {
    background: var(--un-feed-action-hover);
  }

  /* Đã thích → đỏ đồng bộ (--un-like-active, cùng họ với ngày hạn CV bên phải) */
  .un-action-btn.is-active.un-action-like {
    color: var(--un-white);
    background: var(--un-like-active);
  }

  .un-action-btn.is-active.un-action-like:hover {
    background: #a92828;
  }

  /* Đã lưu → xanh brand (--un-blue) */
  .un-action-btn.is-active.un-action-save {
    color: var(--un-white);
    background: var(--un-save-active);
  }

  .un-action-btn.is-active.un-action-save:hover {
    background: #2858b8;
  }

  .un-feed-share {
    margin-left: auto;
  }

  .un-feed-popup-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--un-motion-duration) var(--un-motion-ease),
      visibility 0s linear var(--un-motion-duration);
  }

  .un-feed-popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--un-motion-duration) var(--un-motion-ease),
      visibility 0s linear 0s;
  }

  .un-feed-popup {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.98);
    width: min(480px, calc(100vw - 24px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(2, 6, 23, 0.2);
    z-index: 1910;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--un-motion-duration) var(--un-motion-ease),
      transform var(--un-motion-duration) var(--un-motion-ease),
      visibility 0s linear var(--un-motion-duration);
  }

  .un-feed-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition:
      opacity var(--un-motion-duration) var(--un-motion-ease),
      transform var(--un-motion-duration) var(--un-motion-ease),
      visibility 0s linear 0s;
  }

  /* Báo cáo / chặn: header cố định, nội dung cuộn, nút dính đáy */
  .un-feed-popup.un-post-report-popup,
  .un-feed-popup.un-post-block-popup {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 640px);
  }

  .un-feed-popup.un-post-report-popup .un-post-report-popup__body,
  .un-feed-popup.un-post-block-popup .un-post-block-popup__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .un-feed-popup.un-post-report-popup > .un-user-follow-popup__actions,
  .un-feed-popup.un-post-block-popup > .un-user-follow-popup__actions,
  .un-feed-popup.un-post-delete-popup > .un-user-follow-popup__actions,
  .un-feed-popup.un-post-archive-popup > .un-user-follow-popup__actions {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid #e2e8f0;
    background: #fff;
  }

  .un-feed-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
  }

  .un-feed-popup-close {
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
  }

  .un-feed-popup-body {
    padding: 14px 16px;
  }

  .un-feed-popup-meta {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 10px;
  }

  .un-feed-popup-textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
    outline: none;
  }

  .un-feed-popup-textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
  }

  .un-feed-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 14px;
  }

  .un-feed-popup-btn {
    border: 0;
    border-radius: 999px;
    background: #1d4ed8;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
  }

  .un-feed-popup-btn-light {
    background: #eef2ff;
    color: #334155;
  }

  .un-feed-share-url-wrap {
    display: flex;
    gap: 8px;
  }

  .un-feed-share-url-wrap input {
    flex: 1;
    border: 1px solid #dbe3ec;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    background: #f8fafc;
  }

  /* Chia sẻ feed trang chủ (giống post_card) */
  .un-feed-popup.un-feed-popup--share {
    width: min(620px, calc(100vw - 24px));
    max-height: min(90vh, 720px);
    overflow-y: auto;
    border-radius: 24px;
  }

  /* Popup bình luận: một thẻ bài + danh sách bình luận */
  .un-feed-popup.un-feed-popup--post-comments {
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100vw - 24px));
    max-height: min(92vh, 800px);
    overflow: hidden;
    border-radius: 24px;
  }

  .un-feed-popup.un-feed-popup--post-comments.is-open {
    overflow: hidden;
  }

  .un-post-comment-popup-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: inherit;
    padding: 20px 18px 18px;
    box-sizing: border-box;
  }

  .un-post-comment-popup-title {
    flex-shrink: 0;
    text-align: left;
    font-size: 18px;
    margin: 0 44px 12px 0;
  }

  .un-feed-post-comment-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .un-feed-post-comment-popup-body .un-feed-card {
    box-shadow: none;
    border: 0;
    margin: 0;
    padding: 0 0 8px;
    background: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .un-feed-post-comment-popup-body .un-feed-head {
    margin-bottom: 10px;
  }

  .un-feed-post-comment-popup-body .un-feed-content,
  .un-feed-post-comment-popup-body .un-feed-text-shell {
    margin-bottom: 10px;
  }

  .un-feed-post-comment-popup-body .un-feed-text-foot {
    display: none !important;
  }

  .un-feed-post-comment-popup-body .un-feed-content.is-collapsed,
  .un-feed-post-comment-popup-body .un-feed-text-shell--expanded .un-feed-content {
    max-height: none;
    overflow: visible;
  }

  .un-feed-post-comment-popup-body .un-feed-content.is-collapsed::after {
    display: none;
  }

  .un-feed-post-comment-popup-body .un-feed-gallery-swiper {
    margin-bottom: 10px;
    border-radius: 16px;
    overflow: hidden;
  }

  .un-feed-post-comment-popup-body .un-feed-actions {
    margin-bottom: 4px;
  }

  .un-feed-post-comment-popup-body .un-feed-inline-comments {
    margin-top: 12px;
  }

  .un-feed-post-comment-popup-body .un-feed-more {
    display: none;
  }

  .un-share-popup-inner {
    position: relative;
    padding: 28px 22px 22px;
  }

  .un-share-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
  }

  .un-share-popup-close:hover {
    background: #e2e8f0;
    transform: rotate(90deg);
  }

  .un-share-popup-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 40px 8px 0;
    color: #1e293b;
    text-align: center;
  }

  .un-feed-popup--share .un-feed-popup-meta {
    text-align: center;
    margin-bottom: 16px;
  }

  .un-share-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 8px;
  }

  .un-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
  }

  .un-share-option:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
  }

  .un-share-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
  }

  .un-share-option-icon svg {
    width: 26px;
    height: 26px;
  }

  .un-share-option-label {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    line-height: 1.2;
  }

  .un-share-facebook .un-share-option-icon {
    background: #1877f2;
  }

  .un-share-zalo .un-share-option-icon {
    background: #0068ff;
  }

  .un-share-twitter .un-share-option-icon {
    background: #1da1f2;
  }

  .un-share-telegram .un-share-option-icon {
    background: #0088cc;
  }

  .un-share-messenger .un-share-option-icon {
    background: #00b2ff;
  }

  .un-share-whatsapp .un-share-option-icon {
    background: #25d366;
  }

  .un-share-email .un-share-option-icon {
    background: #ea4335;
  }

  .un-share-copy .un-share-option-icon {
    background: #6c757d;
  }

  .un-share-copy-link {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
  }

  .un-share-copy-link-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #64748b;
  }

  .un-share-copy-input-group {
    display: flex;
    gap: 10px;
  }

  .un-share-copy-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 13px;
    color: #1e293b;
    background: #f8fafc;
  }

  .un-share-copy-button {
    padding: 10px 18px;
    background: #007aff;
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.25);
  }

  .un-share-copy-button:hover {
    background: #0056b3;
    transform: translateY(-1px);
  }

  .un-share-copy-button.is-copied {
    background: #28a745;
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35);
  }

  /* Bình luận inline — phân cách ngang với phần trên; không khung; rep full ngang */
  .un-feed-card .un-feed-inline-comments {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    position: relative;
  }

  .un-feed-card .un-feed-inline-comments::before {
    display: none;
  }

  .un-feed-card .un-feed-inline-comments.active {
    display: block;
  }

  .un-feed-comments-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    margin: 0;
    border: 0;
    background: transparent;
  }

  .un-feed-comments-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(145deg, #316dd3 0%, #1eb8ff 100%);
    box-shadow: none;
    flex-shrink: 0;
  }

  .un-feed-comments-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .un-feed-comments-head-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
  }

  .un-feed-comments-head-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
  }

  .un-feed-comments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid #eef1f5;
  }

  .un-feed-comments-sort {
    position: relative;
  }

  .un-feed-comments-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .un-feed-comments-sort-btn:hover {
    background: rgba(241, 245, 249, 0.95);
  }

  .un-feed-comments-sort-btn .fa-chevron-down {
    font-size: 10px;
    color: #64748b;
  }

  .un-feed-comments-sort-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    z-index: 20;
    border: 1px solid #e2e8f0;
  }

  .un-feed-comments-sort-menu li {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
  }

  .un-feed-comments-sort-menu li:hover {
    background: #f1f5f9;
  }

  .un-feed-comments-sort-menu li.is-active {
    color: #316dd3;
    background: rgba(49, 109, 211, 0.08);
  }

  .un-feed-comments-activity {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .un-feed-comments-activity:hover {
    color: #316dd3;
  }

  .un-feed-comment-pill-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .un-feed-comment-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 10px 6px 8px;
    background: #f1f5f9;
    border-radius: 999px;
    min-height: 44px;
    transition: border-radius 0.2s ease, align-items 0.15s ease;
  }

  .un-feed-comment-pill.is-multiline {
    align-items: flex-start;
    border-radius: 18px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .un-feed-comment-pill-avatar-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    align-self: center;
  }

  .un-feed-comment-pill.is-multiline .un-feed-comment-pill-avatar-wrap {
    align-self: flex-start;
    margin-top: 4px;
  }

  .un-feed-comment-pill-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .un-feed-inline-comments .un-feed-comment-pill-input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 6px 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #0f172a;
    resize: none;
    min-height: 0;
    max-height: 480px;
    max-height: min(55vh, 480px);
    font-family: inherit;
    outline: none;
    overflow-y: hidden;
  }

  /* Gỡ ring/viền xanh của Tailwind Forms khi focus */
  .un-feed-inline-comments .un-feed-comment-pill-input:focus,
  .un-feed-inline-comments .un-feed-comment-pill-input:focus-visible {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .un-feed-inline-comments .un-feed-comment-pill:focus-within {
    outline: none !important;
    box-shadow: none !important;
  }

  .un-feed-inline-comments .un-feed-comment-pill-input::placeholder {
    color: #94a3b8;
  }

  .un-feed-comment-pill-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    align-self: center;
  }

  .un-feed-comment-pill.is-multiline .un-feed-comment-pill-tools {
    align-self: flex-start;
    margin-top: 4px;
  }

  .un-feed-comment-tool-btn {
    border: 0;
    background: transparent;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .un-feed-comment-tool-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
  }

  .un-feed-comment-tool-gif {
    width: auto;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .un-feed-comment-media-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 0 2px;
  }

  .un-feed-comment-media-chip {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: #e2e8f0;
  }

  .un-feed-comment-media-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .un-feed-comment-media-chip-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Modal chọn GIF (GIPHY) — phải cao hơn popup đăng bài (.post-modal-overlay 10055), thấp hơn image editor (10060) */
  body.un-giphy-picker-body-lock {
    overflow: hidden;
  }

  .un-giphy-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10056;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .un-giphy-picker-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .un-giphy-picker {
    position: fixed;
    inset: 0;
    z-index: 10057;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .un-giphy-picker.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .un-giphy-picker-panel {
    width: min(420px, 100%);
    max-height: min(88vh, 640px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #2f2f2f;
    border: 1px solid #c9dcf4;
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(49, 109, 211, 0.12), 0 8px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    pointer-events: auto;
  }

  .un-giphy-picker-head {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 44px 10px;
    border-bottom: 1px solid #dfeaf6;
  }

  .un-giphy-picker-back {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .un-giphy-picker-back:hover {
    background: #f5f8fc;
    color: #316dd3;
  }

  .un-giphy-picker-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .un-giphy-picker-search-wrap {
    position: relative;
    flex-shrink: 0;
    padding: 12px 14px 10px;
  }

  .un-giphy-picker-search-icon {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
  }

  .un-giphy-picker-search {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px 11px 40px;
    border: 1px solid #c9dcf4;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 15px;
    outline: none;
  }

  .un-giphy-picker-search::placeholder {
    color: #94a3b8;
  }

  .un-giphy-picker-search:focus {
    border-color: #316dd3;
    box-shadow: 0 0 0 3px rgba(49, 109, 211, 0.2);
    background: #ffffff;
  }

  .un-giphy-picker-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 6px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    align-content: start;
    /* stretch + aspect-ratio trên ô lưới dễ gây chồng hàng ở một số trình duyệt */
    align-items: start;
  }

  @media (min-width: 380px) {
    .un-giphy-picker-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  .un-giphy-picker-tile {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    align-self: start;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #edf3fa;
    aspect-ratio: 1;
    min-height: 0;
  }

  .un-giphy-picker-tile:focus-visible {
    outline: 2px solid #316dd3;
    outline-offset: 2px;
  }

  .un-giphy-picker-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .un-giphy-picker-attrib {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px 12px;
    text-align: center;
    font-size: 11px;
    color: #6a6a6a;
  }

  .un-giphy-picker-attrib a {
    color: #316dd3;
    text-decoration: none;
    font-weight: 600;
  }

  .un-giphy-picker-attrib a:hover {
    text-decoration: underline;
    color: #2858b8;
  }

  .un-feed-inline-comments .comment-body {
    font-size: 13px;
    color: #334155;
    line-height: 1.55;
    word-wrap: break-word;
  }

  .un-feed-inline-comments .comment-body .comment-text-node {
    margin: 0 0 8px;
  }

  .un-feed-inline-comments .comment-body .comment-media-wrap {
    margin: 0 0 8px;
  }

  .un-feed-inline-comments .comment-body .comment-media-img {
    max-width: 100%;
    max-height: 280px;
    width: auto;
    height: auto;
    border-radius: 12px;
    display: block;
    vertical-align: middle;
  }

  .un-feed-inline-comments .comment-reply-composer {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .un-feed-inline-comments .comment-reply-form .un-feed-comment-pill-wrap--reply {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .un-feed-inline-comments .comment-reply-form .un-feed-comment-media-strip {
    margin-top: 10px;
  }

  .comment-reply-media-strip[hidden] {
    display: none !important;
  }

  .un-feed-comments-empty-wrap {
    text-align: center;
    padding: 16px 8px 8px;
  }

  .un-feed-comments-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #316dd3;
    background: rgba(49, 109, 211, 0.1);
    border: 0;
  }

  .un-feed-comments-empty-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
  }

  .un-feed-comments-empty-desc {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
  }

  .un-feed-comment-composer {
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .un-feed-comment-form {
    margin-top: 0;
    padding-top: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .un-feed-comment-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: -2px;
    margin-bottom: 0;
  }

  .un-feed-comment-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
  }

  /* Không áp vào ô trong .un-feed-comment-pill (đã có .un-feed-comment-pill-input + resize:none) */
  .un-feed-inline-comments .comment-input:not(.un-feed-comment-pill-input) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 12px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    background: transparent;
    box-shadow: none;
    transition: none;
  }

  .un-feed-inline-comments .comment-input:not(.un-feed-comment-pill-input)::placeholder {
    color: #94a3b8;
  }

  .un-feed-inline-comments .comment-input:not(.un-feed-comment-pill-input):focus {
    outline: none;
    border: 0;
    box-shadow: none;
  }

  .un-feed-comment-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
  }

  .un-feed-inline-comments .submit-comment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #316dd3 0%, #2558b8 50%, #1eb8ff 120%);
    box-shadow: none;
    transition: opacity 0.15s ease, filter 0.15s ease;
  }

  .un-feed-inline-comments .submit-comment i {
    font-size: 13px;
    opacity: 0.95;
  }

  .un-feed-inline-comments .submit-comment:hover {
    filter: brightness(1.06);
    transform: none;
    box-shadow: none;
  }

  .un-feed-inline-comments .submit-comment:active {
    opacity: 0.92;
  }

  .un-feed-inline-comments .comments-list {
    padding: 12px 0 0;
    margin: 14px 0 0;
    min-height: 8px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #eef1f5;
  }

  .un-feed-inline-comments .comments-list > .comment-item {
    padding: 0 0 14px;
    margin: 0 0 14px;
    border-bottom: 1px solid #eef1f5;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .un-feed-inline-comments .comments-list > .comment-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .un-feed-inline-comments .comment-item {
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }

  .un-feed-inline-comments .comment-main {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
  }

  .un-feed-inline-comments .comment-content-wrapper {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
  }

  .un-feed-inline-comments .comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #38bdf8, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }

  .un-feed-inline-comments .comment-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .un-feed-inline-comments .comment-avatar-placeholder {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
  }

  .un-feed-inline-comments .comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }

  .un-feed-inline-comments .comment-author {
    font-weight: 700;
    font-size: 13px;
    color: #1d4ed8;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
  }

  .un-feed-inline-comments .comment-time {
    font-size: 11px;
    color: #94a3b8;
  }

  .un-feed-inline-comments .comment-text {
    font-size: 13px;
    color: #334155;
    line-height: 1.55;
    word-wrap: break-word;
  }

  .un-feed-inline-comments .comment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
  }

  .un-feed-inline-comments .comment-like-btn,
  .un-feed-inline-comments .comment-reply-btn,
  .un-feed-inline-comments .comment-toggle-replies-btn {
    border: 0;
    background: transparent;
    padding: 4px 8px;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .un-feed-inline-comments .comment-like-btn:hover,
  .un-feed-inline-comments .comment-reply-btn:hover,
  .un-feed-inline-comments .comment-toggle-replies-btn:hover {
    background: rgba(241, 245, 249, 0.9);
    color: #0f172a;
  }

  .un-feed-inline-comments .comment-like-btn.liked,
  .un-feed-inline-comments .comment-like-btn.liked i {
    color: #e11d48;
  }

  .un-feed-inline-comments .comment-replies {
    margin-top: 10px;
    padding-left: 14px;
    border: 0;
  }

  .un-feed-inline-comments .comment-reply-item {
    margin-bottom: 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
  }

  .un-feed-inline-comments .comment-reply-item:last-child {
    margin-bottom: 0;
  }

  .un-feed-inline-comments .comment-reply-form {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding-top: 8px;
    border: 0;
    border-top: 0;
  }

  .un-feed-inline-comments .comment-reply-form .un-feed-comment-form-actions.comment-reply-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
  }

  .un-feed-inline-comments .comment-reply-cancel {
    margin-right: auto;
    border: 0;
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #64748b;
    background: transparent;
    box-shadow: none;
  }

  .un-feed-inline-comments .comment-reply-cancel:hover {
    color: #0f172a;
    background: rgba(148, 163, 184, 0.18);
  }

  @media (max-width: 576px) {
    .un-share-options {
      grid-template-columns: repeat(3, 1fr);
    }

    .un-share-popup-inner {
      padding: 24px 14px 16px;
    }

    .un-share-copy-input-group {
      flex-direction: column;
    }
  }

  .un-feed-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 32px;
    text-align: center;
    min-height: 220px;
    box-sizing: border-box;
  }

  .un-feed-empty-highlight {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 4px;
    padding: 18px 14px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    border: 1px dashed rgba(49, 109, 211, 0.22);
    box-sizing: border-box;
  }

  .un-feed-empty-svg {
    width: 160px;
    height: 120px;
    margin: 0 auto;
  }

  .un-feed-empty-svg svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .un-feed-empty-illu {
    transform-box: fill-box;
    transform-origin: 50% 72%;
    animation: un-feed-empty-illu-float 3.2s ease-in-out infinite;
  }

  .un-feed-empty-spark-dot {
    animation: un-feed-empty-spark-pulse 2.4s ease-in-out infinite;
  }

  .un-feed-empty-spark-dot:nth-of-type(2) {
    animation-delay: 0.45s;
  }

  @keyframes un-feed-empty-illu-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }

  @keyframes un-feed-empty-spark-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .un-feed-empty-illu,
    .un-feed-empty-spark-dot {
      animation: none !important;
      opacity: 1 !important;
    }
  }

  .un-feed-empty-text {
    margin: 0;
    font-size: 14px;
    color: var(--un-muted);
    font-weight: 500;
    max-width: 260px;
    line-height: 1.45;
  }

  .un-home-posts-empty {
    margin: 0;
    padding: 16px;
    color: #6b7280;
  }

  .un-right-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .un-right-item {
    background: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #bfe3ee;
    padding: 10px 0 12px;
    text-decoration: none;
    color: var(--un-text);
    display: block;
  }

.un-right-item:last-child {
  border-bottom: 0;
}

  .un-right-item-row.is-no-logo {
    gap: 0;
  }

  .un-right-item-title {
  font-size: 12px;
    font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.2;
  }

  .un-right-item-meta {
  font-size: 13px;
    color: var(--un-muted);
    margin: 0;
  }

  .un-right-section-title {
  font-size: 12px;
    font-weight: 700;
  margin: 0;
    text-transform: uppercase;
    color: #2f2f2f;
  }

.un-right-section-head-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.un-right-update-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  background: #cfe9ff;
  color: #2b537a;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
}

  .un-right-update-chip:disabled {
    opacity: 0.6;
    cursor: wait;
  }

  .un-right-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  margin-bottom: 8px;
  }

  .un-right-more-link {
  font-size: 11px;
    color: #2088d8;
    text-decoration: none;
    font-weight: 600;
  }

  .un-right-item-row {
    display: flex;
  gap: 14px;
  align-items: flex-start;
  }

  .un-right-thumb {
  width: 58px;
  height: 58px;
  border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    background: #eef3f9;
  }

.un-right-doc-preview {
  width: 180px;
  height: 105px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #eceff3;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex-shrink: 0;
}

.un-right-doc-page {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #edf1f4;
}

.un-right-doc-page-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.un-right-doc-page-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.un-right-doc-loading {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

  .un-right-thumb-job {
  border-radius: 18px;
  }

  .un-right-item-content {
    min-width: 0;
    flex: 1;
  }

  /* Căn giữa theo chiều dọc trong hàng cột; không đặt top để flex align-self không bị sticky kéo lên mép trên */
  .un-board-add-wrap {
    position: sticky;
    align-self: center;
    flex-shrink: 0;
    width: 112px;
    box-sizing: border-box;
    isolation: isolate;
  }

  /* Menu phải nổi trên các cột feed / stacking contexts — z-index cũ (6) bị đè */
  .un-board-add-wrap.is-popup-open {
    z-index: 80;
  }

  .un-board-add-btn {
    width: 112px;
    min-height: 164px;
    border: 1px solid var(--un-blue);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    color: #0d3375;
    font: 600 14px/1.25 "Lexend", sans-serif;
    padding: 14px 8px;
    text-align: center;
    transition:
      box-shadow 0.25s ease,
      transform 0.22s ease,
      border-color 0.22s ease,
      background-color 0.22s ease;
  }

  .un-board-add-btn:hover {
    transform: translateY(-1px);
  }

  .un-board-add-btn:active {
    transform: translateY(0);
  }

  .un-board-add-btn img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 8px;
  }

  .un-board-popup {
    position: absolute;
    right: calc(100% + 10px);
    left: auto;
    top: 0;
    width: min(230px, calc(100vw - 24px));
    max-width: 230px;
    background: #f2f2f2;
    border-radius: 26px;
    box-shadow: 0 8px 24px rgba(28, 63, 117, 0.25);
    padding: 12px 0;
    display: block;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(10px);
    transition:
      opacity var(--un-motion-duration) var(--un-motion-ease),
      transform var(--un-motion-duration) var(--un-motion-ease),
      visibility 0s linear var(--un-motion-duration);
  }

  .un-board-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition:
      opacity var(--un-motion-duration) var(--un-motion-ease),
      transform var(--un-motion-duration) var(--un-motion-ease),
      visibility 0s linear 0s;
  }

  .un-board-popup button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 20px;
    font: 600 13px/1.22 "Lexend", sans-serif;
    color: #121212;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
  }

  .un-board-popup button:hover {
    background: #ececec;
  }

  .un-board-popup .un-board-toggle-btn {
    cursor: pointer;
  }

  .un-board-popup .un-board-toggle-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .un-board-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #c5d4eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
  }

  .un-board-toggle-btn.is-active .un-board-check {
    background: var(--un-blue);
    border-color: var(--un-blue);
  }

  .un-board-toggle-btn.is-active .un-board-check::after {
    content: '\2713';
    font-weight: 700;
    line-height: 1;
  }

  .un-board-popup-arrow {
    font-size: 16px;
  }

  .un-board-popup .un-board-topic-btn {
    cursor: pointer;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 20px;
    font: 600 13px/1.22 "Lexend", sans-serif;
    color: #121212;
  }

  .un-board-popup .un-board-topic-btn:hover {
    background: #ececec;
  }

  .un-home-topic-columns {
    display: contents;
  }

  .un-home-board-col--topic .un-topic-col-loading {
    margin: 24px 16px;
    text-align: center;
    color: #64748b;
    font: 500 14px/1.4 "Lexend", sans-serif;
  }

  .un-topic-board-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .un-topic-board-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .un-topic-board-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
  }

  .un-topic-board-dialog {
    position: relative;
    width: min(420px, 100%);
    max-height: min(80vh, 560px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(28, 63, 117, 0.25);
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .un-topic-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .un-topic-board-heading {
    margin: 0;
    font: 700 18px/1.25 "Lexend", sans-serif;
    color: #0d3375;
  }

  .un-topic-board-close {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 4px 8px;
  }

  .un-topic-board-desc {
    margin: 0;
    font: 400 13px/1.45 "Lexend", sans-serif;
    color: #64748b;
  }

  .un-topic-board-search {
    width: 100%;
    border: 1px solid #c5d4eb;
    border-radius: 12px;
    padding: 10px 14px;
    font: 500 14px/1.3 "Lexend", sans-serif;
    box-sizing: border-box;
  }

  .un-topic-board-list {
    flex: 1;
    min-height: 120px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .un-topic-board-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .un-topic-board-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  .un-topic-board-item.is-selected {
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 1px rgba(49, 109, 211, 0.12);
  }

  .un-topic-board-item.is-added {
    cursor: default;
    opacity: 0.92;
  }

  .un-topic-board-check-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .un-topic-board-item-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
  }

  .un-topic-board-check {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    pointer-events: none;
  }

  .un-topic-board-item-input:checked + .un-topic-board-check {
    background: var(--un-blue);
    border-color: var(--un-blue);
    transform: scale(1.02);
  }

  .un-topic-board-item-input:checked + .un-topic-board-check::after {
    content: '\2713';
    font-weight: 800;
  }

  .un-topic-board-item-input:focus-visible + .un-topic-board-check {
    outline: 2px solid var(--un-blue);
    outline-offset: 2px;
  }

  .un-topic-board-item-input:disabled + .un-topic-board-check {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #64748b;
  }

  .un-topic-board-item-input:disabled:checked + .un-topic-board-check {
    background: #94a3b8;
    border-color: #94a3b8;
    color: #fff;
  }

  .un-topic-board-item-title {
    flex: 1;
    font: 600 14px/1.3 "Lexend", sans-serif;
    color: #1e293b;
  }

  .un-topic-board-item-badge {
    font: 600 11px/1 "Lexend", sans-serif;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 4px 8px;
  }

  .un-topic-board-empty,
  .un-topic-board-loading {
    margin: 0;
    font: 500 13px/1.4 "Lexend", sans-serif;
    color: #64748b;
    text-align: center;
  }

  .un-topic-board-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
  }

  .un-topic-board-btn {
    border-radius: 12px;
    padding: 10px 18px;
    font: 600 14px/1 "Lexend", sans-serif;
    cursor: pointer;
    border: 0;
  }

  .un-topic-board-btn--ghost {
    background: #f1f5f9;
    color: #475569;
  }

  .un-topic-board-btn--primary {
    background: var(--un-blue);
    color: #fff;
  }

  .un-topic-board-btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .un-right-item-company {
  font-size: 11px;
    color: #707070;
  margin: 0 0 4px;
    line-height: 1.2;
  }

  .un-right-date {
    color: #c43131;
    font-weight: 600;
    margin-left: 8px;
  }

.un-right-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f1f1;
  border-radius: 999px;
  padding: 3px 10px;
}

  @media (max-width: 1200px) {
    .un-home-layout {
      grid-template-columns: 250px minmax(0, 1fr);
    }

    .un-home-layout.un-sidebar-expanded {
      grid-template-columns: 250px minmax(0, 1fr);
    }

    .un-board-add-wrap {
      display: block;
    }
  }

  @media (max-width: 992px) {
    .un-home-layout {
      grid-template-columns: 1fr;
    }

    .un-home-sidebar {
      display: none;
    }
  }

  /* Trùng breakpoint bottom nav trong module/header: chừa chỗ cuộn nội dung khỏi nav cố định */
  @media (max-width: 79.9375rem) {
    .un-home-posts-list {
      padding-bottom: max(5.5rem, calc(5.375rem + env(safe-area-inset-bottom, 0px)));
      scroll-padding-bottom: max(5.25rem, calc(5rem + env(safe-area-inset-bottom, 0px)));
    }

    .un-home-layout--post-detail .un-home-posts-list--detail {
      padding-bottom: max(5.5rem, calc(5.375rem + env(safe-area-inset-bottom, 0px)));
      scroll-padding-bottom: max(5.25rem, calc(5rem + env(safe-area-inset-bottom, 0px)));
    }
  }

  @media (max-width: 1100px) {
    .un-home-layout--post-detail .un-home-columns--post-detail {
      max-width: min(640px, 100%);
    }
  }

  /* Trang chi tiết desktop: widget cố định footer không đè cột phải */
  @media (min-width: 1101px) {
    .path--studyfeed-post-view .ai-chat-widget {
      right: calc(320px + 24px);
    }

    .path--studyfeed-post-view #arcontactus {
      right: calc(320px + 24px) !important;
    }
  }

  /* Trang phân tích hiệu suất chi tiết */
  .un-perf-detail-page {
    padding: 8px 12px 24px;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .un-perf-detail-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .un-perf-detail-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
  }

  .un-perf-detail-sub {
    margin: 0;
    font-size: 13px;
    color: var(--un-muted);
  }

  .un-perf-detail-back-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--un-blue);
    text-decoration: none;
    white-space: nowrap;
  }

  .un-perf-detail-back-link:hover {
    text-decoration: underline;
  }

  .un-perf-detail-guest-note {
    background: #fff8e6;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    color: #92400e;
    margin-bottom: 16px;
  }

  .un-perf-detail-filter {
    margin-bottom: 14px;
  }

  .un-perf-detail-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: var(--un-white);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 4px 14px rgba(28, 63, 117, 0.08);
  }

  .un-perf-detail-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
  }

  .un-perf-detail-select {
    min-width: 120px;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #111827;
  }

  .un-perf-detail-submit {
    border: 0;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
    color: #fff;
  }

  .un-perf-detail-submit:hover {
    filter: brightness(1.03);
  }

  .un-perf-detail-period-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e8f1fc;
    color: #1e40af;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
  }

  .un-perf-detail-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
  }

  .un-perf-detail-kpi {
    background: var(--un-white);
    border-radius: 14px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(28, 63, 117, 0.08);
  }

  .un-perf-detail-kpi-val {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
  }

  .un-perf-detail-kpi-cap {
    font-size: 11px;
    font-weight: 600;
    color: var(--un-muted);
    margin-top: 4px;
    display: block;
  }

  .un-perf-detail-chart-section {
    margin-bottom: 24px;
  }

  .un-perf-detail-section-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
  }

  .un-perf-detail-chart-wrap {
    background: var(--un-white);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(28, 63, 117, 0.08);
    height: min(380px, 55vh);
    position: relative;
  }

  .un-perf-detail-table-section {
    margin-bottom: 24px;
  }

  .un-perf-detail-table-scroll {
    overflow-x: auto;
    background: var(--un-white);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(28, 63, 117, 0.08);
  }

  .un-perf-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .un-perf-detail-table th,
  .un-perf-detail-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
  }

  .un-perf-detail-table th {
    font-weight: 700;
    color: #374151;
    background: #f8fafc;
    white-space: nowrap;
  }

  .un-perf-detail-table-link {
    color: var(--un-blue);
    font-weight: 600;
    text-decoration: none;
  }

  .un-perf-detail-table-link:hover {
    text-decoration: underline;
  }

  .un-perf-detail-table-empty {
    text-align: center;
    color: var(--un-muted);
    padding: 20px !important;
  }

  .un-feed-search-panel {
    position: relative;
    z-index: 20;
    padding: 0;
    margin-bottom: 6px;
    overflow: visible;
  }

  .un-feed-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }

  .un-feed-search-row--compact .un-feed-search-filter,
  .un-feed-search-row--compact .un-feed-search-tab,
  .un-feed-search-row--compact .un-feed-search-btn {
    height: 32px;
    min-height: 32px;
    font-size: 12px;
  }

  .un-feed-search-row.is-hidden {
    display: none;
  }

  .un-feed-search-input,
  .un-feed-search-filter {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    padding: 0 12px;
    background: #fff;
    color: #172033;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .un-feed-search-input:focus,
  .un-feed-search-filter:focus {
    border-color: rgba(37, 99, 235, 0.72);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    outline: none;
  }

  .un-feed-search-input-wrap {
    flex: 1;
    min-width: 260px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
  }

  .un-feed-search-input-wrap .fas {
    color: #2563eb;
    font-size: 15px;
  }

  .un-feed-search-input {
    flex: 1;
    min-width: 180px;
    height: 34px;
    font-size: 15px;
  }

  .un-feed-search-input-wrap .un-feed-search-input {
    height: 34px;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  .un-feed-search-input-wrap .un-feed-search-input:focus {
    border-color: transparent;
    box-shadow: none;
  }

  .un-feed-search-btn,
  .un-feed-search-tab {
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 12px;
    padding: 0 14px;
    background: #fff;
    color: #172033;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }

  .un-feed-search-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-color: transparent;
    background: linear-gradient(135deg, #2563eb 0%, #18a8f4 100%);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
  }

  .un-feed-search-tab.is-active,
  .un-feed-search-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }

  .un-feed-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.28);
  }

  .un-feed-search-btn--ghost {
    background: #f4f7fb;
  }

  .un-feed-search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: #fff;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .un-feed-search-suggest::-webkit-scrollbar {
    display: none;
  }

  .un-feed-search-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 11px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.35;
    color: #172033;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .un-feed-search-suggest-item:hover {
    background: #eef4ff;
    color: #2563eb;
  }

  .un-feed-search-suggest-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
  }

  .un-feed-search-suggest-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .un-search-mark {
    background: linear-gradient(180deg, rgba(253, 224, 71, 0.52), rgba(253, 186, 116, 0.34));
    border-radius: 5px;
    padding: 0 3px;
  }

  .un-feed-search-title {
    margin: 6px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
  }

  .un-home-feed-col--search-page {
    max-width: 1040px;
    min-width: 760px;
    margin: 0 auto;
    padding-top: 10px;
  }

  .un-home-columns--search-page {
    justify-content: center;
   }

  .un-feed-search-layout {
    display: block;
  }

  .un-feed-search-left-card,
  .un-feed-search-right-card {
    min-height: 0;
    position: relative;
    overflow: visible;
  }

  .un-feed-search-left-card {
    position: static;
  }

  .un-feed-search-left-body,
  .un-feed-search-right-body {
    position: relative;
    padding: 12px 18px 18px;
    background: #fff;
  }

  .un-feed-search-right-body.is-loading {
    cursor: progress;
  }

  .un-feed-search-right-body.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.28);
  }

  .un-home-posts-list--search {
    padding: 6px 0 8px;
    height: auto;
    max-height: none;
    background: transparent;
    border-radius: 0;
  }

  .un-feed-search-result-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #4b5563;
    padding: 5px 4px 6px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  .un-feed-search-result-head strong {
    color: #111827;
    font-size: 14px;
    font-weight: 850;
  }

  .un-feed-search-result-head span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #2563eb;
    font-weight: 800;
  }

  .un-feed-search-trending {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 0 8px;
  }

  .un-feed-search-trending-title {
    grid-column: 1 / -1;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    padding: 2px 4px 2px;
    color: #111827;
  }

  .un-feed-search-trend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .un-feed-search-trend-item:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.24);
    background: #fff;
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.13);
  }

  .un-feed-search-trend-rank {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
  }

  .un-feed-search-trend-copy {
    min-width: 0;
    flex: 1;
  }

  .un-feed-search-trend-name {
    display: block;
    font-size: 16px;
    font-weight: 850;
    color: #111827;
    margin-bottom: 4px;
    word-break: break-word;
  }

  .un-feed-search-trend-meta {
    display: block;
    font-size: 12px;
    color: #6b7280;
  }

  .un-feed-search-trend-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
  }

  .un-feed-search-empty {
    padding: 16px;
    font-size: 13px;
    color: #6b7280;
  }

  .un-feed-search-post {
    position: relative;
    padding: 14px 16px;
    margin-top: 10px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .un-feed-search-post::before {
    content: "";
    position: absolute;
    inset: 16px auto 16px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, #2563eb, #14b8a6);
  }

  .un-feed-search-post:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
  }

  .un-feed-search-post-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .un-feed-search-post-head img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
  }

  .un-feed-search-post-author {
    min-width: 0;
    flex: 1;
  }

  .un-feed-search-post-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
  }

  .un-feed-search-post-name-row strong {
    font-size: 14px;
    color: #111827;
    line-height: 1.2;
  }

  .un-feed-search-post-author p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
  }

  .un-feed-search-post-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    text-decoration: none;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    background: #eff6ff;
  }

  .un-feed-search-post-link:hover {
    background: #2563eb;
    color: #fff;
  }

  .un-feed-search-post-title {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    color: #111827;
  }

  .un-feed-search-post-title a {
    color: inherit;
    text-decoration: none;
  }

  .un-feed-search-post-snippet {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #374151;
    word-break: break-word;
  }

  .un-feed-search-top-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    margin: 6px 0 4px;
    background: rgba(248, 250, 252, 0.86);
  }

  .un-feed-search-top-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
  }

  .un-feed-search-top-tab.is-active {
    color: #fff;
    background: #111827;
    border-color: #111827;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.12);
  }

  .un-feed-search-school-friends {
    position: relative;
    margin: 10px 0 18px;
    padding: 14px;
    border: 1px solid rgba(186, 210, 244, 0.9);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(37, 99, 235, 0.07) 0%, rgba(20, 184, 166, 0.08) 100%),
      #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
    overflow: hidden;
  }

  .un-feed-search-school-friends::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #2563eb 0%, #14b8a6 100%);
  }

  .un-feed-search-school-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-left: 4px;
    color: #111827;
  }

  .un-feed-search-school-head strong {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
  }

  .un-feed-search-school-kicker,
  .un-feed-search-school-name-line {
    display: block;
  }

  .un-feed-search-school-kicker {
    width: max-content;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
  }

  .un-feed-search-school-name-line {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
  }

  .un-feed-search-school-count {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    background: rgba(236, 254, 255, 0.88);
    color: #0e7490;
    font-size: 12px;
    font-weight: 850;
  }

  .un-feed-search-school-count .fas {
    font-size: 13px;
  }

  .un-feed-search-school-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .un-feed-search-school-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 82px;
    padding: 10px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }

  .un-feed-search-school-item:hover,
  .un-feed-search-school-item:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.34);
    background: #fff;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
    outline: none;
  }

  .un-feed-search-school-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  .un-feed-search-school-avatar::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #14b8a6;
  }

  .un-feed-search-school-avatar img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  }

  .un-feed-search-school-copy {
    min-width: 0;
    flex: 1;
  }

  .un-feed-search-school-name,
  .un-feed-search-school-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .un-feed-search-school-name {
    font-size: 15px;
    font-weight: 900;
    color: #111827;
    line-height: 1.25;
  }

  .un-feed-search-school-meta {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
  }

  .un-feed-search-school-badge {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-top: 7px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
  }

  .un-feed-search-school-action {
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .un-feed-search-school-item:hover .un-feed-search-school-action,
  .un-feed-search-school-item:focus-visible .un-feed-search-school-action {
    background: #2563eb;
    color: #fff;
  }

  .un-feed-search-school-empty {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed rgba(148, 163, 184, 0.7);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    font-weight: 750;
    color: #64748b;
  }

  .un-feed-search-school-loader {
    grid-column: 1 / -1;
    min-height: 54px;
    margin-top: 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #2563eb;
    background: rgba(239, 246, 255, 0.8);
    font-size: 13px;
  }

  .un-feed-search-school-loader span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid rgba(37, 99, 235, 0.18);
    border-top-color: #2563eb;
    animation: un-school-loader-spin 0.8s linear infinite;
  }

  .un-feed-posts-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px 8px;
    color: #66758e;
    font-size: 14px;
  }

  .un-feed-posts-loader span {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(49, 109, 211, 0.16);
    border-top-color: #316dd3;
    border-radius: 999px;
    animation: un-school-loader-spin 0.8s linear infinite;
  }

  @keyframes un-school-loader-spin {
    to { transform: rotate(360deg); }
  }

  .un-feed-search-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
  }

  .un-feed-search-person img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .un-feed-search-person-body {
    min-width: 0;
    flex: 1;
  }

  .un-feed-search-person-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
  }

  .un-feed-search-person-user {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
  }

  .un-feed-search-person-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    color: #2563eb;
    background: #eff6ff;
  }

  .un-feed-search-person-link:hover {
    background: #2563eb;
    color: #fff;
  }

  @media (max-width: 1180px) {
    .un-home-feed-col--search-page {
      min-width: 0;
      max-width: 100%;
    }

    .un-feed-search-trending {
      grid-template-columns: 1fr;
    }

    .un-feed-search-school-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 720px) {
    .un-home-columns--search-page {
      width: calc(100vw - (var(--un-sf-mobile-gutter, 12px) * 2)) !important;
      max-width: calc(100vw - (var(--un-sf-mobile-gutter, 12px) * 2)) !important;
      min-width: 0 !important;
      display: block;
      overflow: visible;
    }

    .un-home-feed-col--search-page {
      padding-top: 8px;
      width: calc(100vw - (var(--un-sf-mobile-gutter, 12px) * 2)) !important;
      max-width: calc(100vw - (var(--un-sf-mobile-gutter, 12px) * 2)) !important;
      min-width: 0 !important;
    }

    .un-feed-search-left-body,
    .un-feed-search-right-body {
      padding: 16px;
      border-radius: 22px;
    }

    .un-feed-search-left-card,
    .un-feed-search-right-card {
      width: calc(100vw - (var(--un-sf-mobile-gutter, 12px) * 2)) !important;
      max-width: calc(100vw - (var(--un-sf-mobile-gutter, 12px) * 2)) !important;
      border-radius: 22px;
    }

    .un-feed-search-input-wrap {
      min-width: 100%;
    }

    .un-feed-search-btn {
      width: 100%;
      justify-content: center;
    }

    .un-feed-search-top-tabs {
      overflow-x: auto;
      scrollbar-width: none;
    }

    .un-feed-search-top-tabs::-webkit-scrollbar {
      display: none;
    }

    .un-feed-search-top-tab {
      flex: 0 0 auto;
    }

    .un-feed-search-result-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 8px;
    }

    .un-feed-search-school-list {
      grid-template-columns: 1fr;
    }

    .un-feed-search-school-head {
      flex-direction: column;
      gap: 10px;
    }

    .un-feed-search-school-count {
      align-self: flex-start;
    }

    .un-feed-search-school-item {
      align-items: flex-start;
    }

    .un-feed-search-school-action span {
      display: none;
    }

    .un-feed-search-post-title {
      font-size: 18px;
    }

    .un-feed-search-post-snippet {
      font-size: 14px;
    }
  }


  /* ========== StudyFeed responsive (mobile / tablet) — desktop ≥993px giữ nguyên ========== */

  :root {
    --un-sf-mobile-gutter: 14px;
  }

  .un-sf-mobile-nav {
    display: none;
  }

  /* Tablet: cuộn ngang có snap, vẫn nhiều cột */
  @media (max-width: 1200px) and (min-width: 993px) {
    .un-home-main {
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
    }

    .un-home-columns > .un-home-feed-col,
    .un-home-columns > .un-home-board-col:not(.is-board-collapsed) {
      scroll-snap-align: start;
    }
  }

  @media (max-width: 992px) {
    /* Ẩn header tab cột (trùng với thanh tab / nav mobile) */
    .un-feed-col-head-wrap,
    .un-home-layout--topic-detail .un-home-board-col[data-un-board^="topic-"] .un-feed-col-head-wrap {
      display: none !important;
    }

    /* Cuộn dọc: khung chính .un-home-main (ghi đè path--common-home khóa overflow) */
    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) {
      overflow: hidden !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
    }

    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home:not(.un-home--post-detail) {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
    }

    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-main,
    .path--studyfeed-topic-view .un-home-layout--topic-detail .un-home-main,
    .path--common-topics .un-home-main.un-topics-main {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-height: 100% !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      touch-action: pan-y;
    }

    .path--common-topics .un-home {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
    }

    .path--common-topics .un-home-layout {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
    }

    .path--common-topics .un-home-main.un-topics-main {
      padding-left: var(--un-sf-mobile-gutter) !important;
      padding-right: var(--un-sf-mobile-gutter) !important;
      padding-bottom: max(5.5rem, env(safe-area-inset-bottom, 0px)) !important;
      scroll-padding-bottom: max(5.5rem, env(safe-area-inset-bottom, 0px));
    }

    .path--common-topics .un-topics-page-inner.sm\:px-5 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .path--studyfeed-topic-view .un-home.un-home--topic-detail {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
    }

    .path--studyfeed-topic-view .un-home-layout--topic-detail {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow: hidden !important;
    }

    .path--studyfeed-topic-view .un-home-main.un-topic-detail-main {
      padding-left: var(--un-sf-mobile-gutter) !important;
      padding-right: var(--un-sf-mobile-gutter) !important;
      padding-bottom: max(5.5rem, env(safe-area-inset-bottom, 0px)) !important;
      scroll-padding-bottom: max(5.5rem, env(safe-area-inset-bottom, 0px));
    }

    .un-topic-detail-main > .un-sf-col-tabs {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }

    .un-topic-detail-main > .un-sf-col-tabs .un-sf-col-tabs__btn {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
      font-size: 11px;
      padding: 7px 10px;
    }

    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-columns,
    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-col,
    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-posts-list:not(.un-home-posts-list--detail) {
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-posts-list:not(.un-home-posts-list--detail) {
      flex: none !important;
    }

    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .un-home-layout:not(.un-home-layout--post-detail) .un-home-columns {
      flex: 0 0 auto;
    }

    .un-sf-mobile-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      margin: 0 var(--un-sf-mobile-gutter) 10px;
      padding: 7px 8px 7px 10px;
      background: #fff;
      border: 1px solid rgba(201, 220, 244, 0.85);
      border-radius: 20px;
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 20px rgba(49, 109, 211, 0.1);
      position: sticky;
      top: 0;
      z-index: 90;
      -webkit-tap-highlight-color: transparent;
    }

    .un-sf-mobile-nav__scroll {
      display: flex;
      align-items: stretch;
      gap: 3px;
      flex: 1 1 auto;
      min-width: 0;
      padding: 4px;
      border-radius: 14px;
      background: linear-gradient(180deg, #f0f6fc 0%, #e8f1fa 100%);
      box-shadow: inset 0 1px 2px rgba(49, 109, 211, 0.06);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .un-sf-mobile-nav__scroll::-webkit-scrollbar {
      display: none;
    }

    .un-sf-mobile-nav__item {
      flex: 1 1 0;
      min-width: 3.25rem;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 7px 6px 6px;
      border: 0;
      border-radius: 11px;
      text-decoration: none;
      color: #64748b;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: 0.01em;
      white-space: nowrap;
      background: transparent;
      transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
    }

    .un-sf-mobile-nav__item i {
      font-size: 16px;
      line-height: 1;
      color: #94a3b8;
      transition: color 0.2s ease, transform 0.15s ease;
    }

    .un-sf-mobile-nav__item:active:not(.is-active) {
      transform: scale(0.97);
    }

    .un-sf-mobile-nav__item.is-active {
      color: #1e4a8c;
      background: #fff;
      box-shadow:
        0 1px 3px rgba(49, 109, 211, 0.12),
        0 4px 12px rgba(49, 109, 211, 0.14);
    }

    .un-sf-mobile-nav__item.is-active i {
      color: #316dd3;
      transform: scale(1.05);
    }

    .un-sf-mobile-nav__item.is-active span {
      font-weight: 700;
    }

    .un-sf-mobile-nav__compose {
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 13px;
      background: linear-gradient(145deg, #316dd3 0%, #1eb8ff 100%);
      color: #fff;
      font-size: 17px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 2px 6px rgba(49, 109, 211, 0.25),
        0 6px 16px rgba(30, 184, 255, 0.28);
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }

    .un-sf-mobile-nav__compose:hover {
      filter: brightness(1.04);
    }

    .un-sf-mobile-nav__compose:active {
      transform: scale(0.94);
      box-shadow: 0 2px 8px rgba(49, 109, 211, 0.3);
    }

    .un-home {
      padding: 6px 0 0;
    }

    .un-home-layout {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 0;
    }

    .un-home-sidebar {
      display: none;
    }

    .un-sf-mobile-nav {
      grid-column: 1;
      grid-row: 1;
    }

    .un-home-main {
      grid-column: 1;
      grid-row: 2;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 var(--un-sf-mobile-gutter);
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .un-home-columns {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 10px;
      height: auto;
      max-height: none;
      overflow: visible;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
    }

    .un-home-columns > .un-home-feed-col,
    .un-home-columns > .un-home-board-col:not(.is-board-collapsed) {
      flex-shrink: 1;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .un-home-board-col[data-un-board] {
      min-width: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      overflow: hidden;
      box-sizing: border-box;
    }

    /* Tài liệu & CV: ghi đè width 400px desktop — tránh tràn ngang / lộ cột kế bên */
    .un-home-board-col[data-un-board='docs-jobs'],
    .un-home-board-col[data-un-board='docs-jobs'] .un-home-right-col,
    .un-home-board-col[data-un-board='docs-jobs'] .un-right-card {
      flex: 0 0 auto !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-stack {
      height: auto;
      gap: 12px;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-home-posts-list {
      padding: 12px !important;
      overflow: visible !important;
      width: 100%;
      box-sizing: border-box;
      height: auto;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-item {
      display: block;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-item-row {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      max-width: 100%;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-doc-preview {
      width: 100% !important;
      max-width: 100% !important;
      height: auto;
      min-height: 100px;
      box-sizing: border-box;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-item-content {
      min-width: 0;
      width: 100%;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-section-head {
      flex-wrap: wrap;
      gap: 8px;
      align-items: flex-start;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-section-head-left {
      flex-wrap: wrap;
      max-width: 100%;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-more-link {
      flex-shrink: 0;
      white-space: nowrap;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-thumb,
    .un-home-board-col[data-un-board='docs-jobs'] .un-right-thumb-job {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 120px;
      object-fit: contain;
    }

    .un-home-board-col[data-un-board='docs-jobs'] .un-right-location-pill {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .un-home-board-col[data-un-board]:has(.un-home-feed-col--empty),
    .un-home-columns:not(.un-home-columns--my-posts):not(.un-home-columns--single-feed) > .un-home-feed-col.un-home-feed-col--empty:first-child {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    .un-home-columns--single-feed .un-home-feed-col,
    .un-my-posts-feed-wrap {
      max-width: 100%;
      width: 100%;
    }

    .un-home-columns--my-posts {
      flex-direction: column;
      align-items: stretch;
    }

    .un-home-columns--my-posts .un-perf-col {
      max-width: 100%;
      flex: 1 1 auto;
    }

    /* Tab chuyển cột (JS .un-sf-tabs-mode) */
    .un-sf-col-tabs {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      flex-shrink: 0;
      margin: 0 0 8px;
      padding: 2px 0 4px;
      scrollbar-width: none;
      width: 100%;
      box-sizing: border-box;
      position: relative;
      z-index: 12;
    }

    .un-sf-col-tabs::-webkit-scrollbar {
      display: none;
    }

    .un-sf-col-tabs__btn {
      flex: 0 0 auto;
      border: 1px solid #d4e4f7;
      border-radius: 999px;
      background: #f8fbff;
      color: #316dd3;
      font: 600 12px/1.2 "Lexend", sans-serif;
      padding: 7px 14px;
      cursor: pointer;
      white-space: nowrap;
      max-width: 11rem;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .un-sf-col-tabs__btn.is-active {
      border-color: transparent;
      background: linear-gradient(90deg, #316dd3 0%, #1eb8ff 100%);
      color: #fff;
    }

    /* Chỉ ẩn cột KHÔNG active — :not(.is-board-collapsed) trước đây thắng .un-sf-mcol-active (specificity cao hơn) */
    .un-home-columns.un-sf-tabs-mode > .un-home-feed-col:not(.un-sf-mcol-active),
    .un-home-columns.un-sf-tabs-mode > .un-home-board-col:not(.is-board-collapsed):not(.un-sf-mcol-active),
    .un-home-columns.un-sf-tabs-mode > #un-home-topic-columns > .un-home-board-col:not(.is-board-collapsed):not(.un-sf-mcol-active),
    .un-topic-detail-columns.un-sf-tabs-mode > .un-home-board-col:not(.is-board-collapsed):not(.un-sf-mcol-active),
    .un-topics-split.un-sf-tabs-mode > .un-topics-followed-col:not(.un-sf-mcol-active),
    .un-topics-split.un-sf-tabs-mode > .un-topics-discovery-section:not(.un-sf-mcol-active),
    .un-home-columns--my-posts.un-sf-tabs-mode > .un-perf-col:not(.un-sf-mcol-active),
    .un-home-columns--my-posts.un-sf-tabs-mode > .un-my-posts-feed-wrap:not(.un-sf-mcol-active) {
      display: none !important;
    }

    .un-home-columns.un-sf-tabs-mode > .un-sf-mcol-active,
    .un-topic-detail-columns.un-sf-tabs-mode > .un-sf-mcol-active,
    .un-home-columns--my-posts.un-sf-tabs-mode > .un-sf-mcol-active {
      display: flex !important;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 0;
      flex: 0 0 auto !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

    .un-topics-split.un-sf-tabs-mode > .un-sf-mcol-active {
      display: block !important;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      margin-top: 0 !important;
    }

    .un-topics-page-frame > .un-sf-col-tabs {
      margin: 0 0 12px;
    }

    .un-topics-page-frame > .un-sf-col-tabs .un-sf-col-tabs__btn {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    .un-topics-split.un-sf-tabs-mode {
      gap: 0;
    }

    .un-home-columns.un-sf-tabs-mode > .un-home-board-col.un-sf-mcol-active > .un-home-feed-col,
    .un-home-columns.un-sf-tabs-mode > .un-home-board-col.un-sf-mcol-active > .un-home-right-col,
    .un-home-columns.un-sf-tabs-mode > .un-home-board-col.un-sf-mcol-active > .un-right-stack {
      display: flex !important;
      flex-direction: column;
      flex: 0 0 auto !important;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

    .un-home-columns.un-sf-tabs-mode > #un-home-topic-columns {
      display: contents;
    }

    .un-home-columns.un-sf-tabs-mode > .un-board-add-wrap {
      order: 99;
    }

    /* Nút thêm bảng → FAB góc phải (trên bottom nav site) */
    .un-home-columns > .un-board-add-wrap {
      position: fixed;
      right: calc(var(--un-sf-mobile-gutter) + 4px);
      bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
      z-index: 950;
      width: auto;
      align-self: auto;
      padding: 0 !important;
    }

    .un-board-add-btn {
      width: 52px;
      min-height: 52px;
      height: 52px;
      padding: 0;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      box-shadow: 0 6px 18px rgba(49, 109, 211, 0.35);
    }

    .un-board-add-btn img {
      width: 32px;
      height: 32px;
      margin: 0;
    }

    .un-board-popup {
      right: 0;
      left: auto;
      bottom: calc(100% + 8px);
      top: auto;
      transform: none;
    }

    .un-board-add-wrap {
      display: block;
    }

    .un-home-posts-list {
      padding: 12px;
      border-radius: 16px;
      box-sizing: border-box;
    }

    .un-home-col.un-home-feed-col,
    .un-home-board-col .un-home-col {
      border-radius: 16px;
      overflow: hidden;
    }

    .un-feed-card {
      padding: 12px;
      box-sizing: border-box;
      overflow: hidden;
    }

    .un-feed-card .un-feed-embed-video,
    .un-feed-card .un-feed-gallery-swiper {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .un-feed-title {
      font-size: 18px;
    }

    .un-feed-author-row {
      flex-wrap: wrap;
      gap: 6px;
    }

    .un-feed-topic-badge {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .un-feed-actions {
      flex-wrap: wrap;
      gap: 8px;
    }

    .un-feed-left-actions {
      flex-wrap: wrap;
      gap: 6px;
    }

    .un-feed-left-actions button,
    .un-feed-left-actions a.un-action-btn,
    .un-feed-share {
      padding: 6px 12px;
      font-size: 12px;
    }

    .un-feed-embed-video .stf-embed-video-wrap.stf-embed-youtube,
    .un-feed-embed-video .stf-embed-video-wrap.stf-embed-tiktok {
      width: 100%;
      max-width: 100%;
    }

    .un-feed-gallery-swiper:not(.un-feed-gallery-swiper--single):not(.swiper-initialized) .swiper-slide {
      width: calc(85% - var(--un-feed-gallery-gap, 12px));
      margin-right: var(--un-feed-gallery-gap, 12px);
    }

    .un-feed-gallery-swiper:not(.un-feed-gallery-swiper--single):not(.swiper-initialized) .swiper-slide:last-child {
      margin-right: 0;
    }

    .un-feed-gallery-swiper--double:not(.swiper-initialized) .swiper-slide {
      width: calc((100% - var(--un-feed-gallery-gap, 12px)) / 2);
    }

    .un-topic-detail-hero {
      padding: 16px 14px;
      border-radius: 18px;
      margin-bottom: 12px;
    }

    .un-topic-detail-hero-title {
      font-size: 20px;
      word-break: break-word;
    }

    .un-topic-detail-hero-actions {
      width: 100%;
      min-width: 0;
    }

    .un-topic-detail-columns.un-sf-tabs-mode > .un-sf-mcol-active .un-home-posts-list {
      padding-bottom: 8px;
    }

    .un-perf-detail-page {
      padding: 4px 4px 20px;
    }

    .un-perf-detail-toolbar {
      flex-direction: column;
      align-items: stretch;
    }

    .un-perf-detail-kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .un-perf-detail-chart-wrap {
      height: min(320px, 50vh);
    }

    .un-perf-stats-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .un-perf-stat-value {
      font-size: 18px;
    }

    .un-right-section-head {
      flex-wrap: wrap;
      gap: 8px;
    }

    .un-right-item {
      flex-direction: column;
      align-items: stretch;
    }

    .un-right-doc-preview {
      width: 100%;
      max-width: 100%;
    }

    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) .ai-chat-widget,
    .path--common-topics .ai-chat-widget,
    .path--studyfeed-post-view .ai-chat-widget,
    .path--studyfeed-topic-view .ai-chat-widget {
      right: calc(var(--un-sf-mobile-gutter) + 2px) !important;
      bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    :is(.path--common-home, .path--common-home-saved, .path--common-home-my_posts) #arcontactus,
    .path--common-topics #arcontactus,
    .path--studyfeed-post-view #arcontactus,
    .path--studyfeed-topic-view #arcontactus {
      right: calc(var(--un-sf-mobile-gutter) + 2px) !important;
      bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Popup chi tiết bài: bottom sheet, cuộn trong .un-feed-post-comment-popup-body */
    .un-feed-popup.un-feed-popup--post-comments {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      max-height: min(94vh, 720px);
      border-radius: 18px 18px 0 0;
      transform: translateY(100%);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .un-feed-popup.un-feed-popup--post-comments.is-open {
      transform: translateY(0);
    }

    .un-feed-popup.un-feed-popup--post-comments .un-post-comment-popup-inner {
      padding: 16px 14px max(14px, env(safe-area-inset-bottom, 0px));
      max-height: 100%;
    }

    .un-feed-popup.un-feed-popup--post-comments .un-post-comment-popup-title {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .un-feed-popup.un-feed-popup--post-comments .un-share-popup-close {
      top: 10px;
      right: 10px;
    }
  }

  /* Chi tiết bài: cột phải xuống dưới thay vì ẩn */
  @media (max-width: 1100px) {
    .un-home-layout--post-detail .un-home-main {
      padding-left: var(--un-sf-mobile-gutter);
      padding-right: var(--un-sf-mobile-gutter);
    }

    .un-home-layout--post-detail .un-home-columns--post-detail {
      flex-direction: column;
      max-width: min(640px, 100%);
      height: auto;
      max-height: none;
      overflow: visible;
      padding: 0;
      gap: 12px;
    }

    .un-home-layout--post-detail .un-home-columns--post-detail > .un-home-feed-col--detail {
      flex: 0 0 auto;
      max-width: 100%;
      height: auto;
      max-height: none;
      overflow: visible;
    }

    .un-home-layout--post-detail .un-home-posts-list--detail {
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
    }

    .path--studyfeed-post-view .un-home-layout--post-detail {
      height: auto;
      max-height: none;
      overflow: visible;
    }

    .path--studyfeed-post-view .un-home.un-home--post-detail {
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .un-home-layout--post-detail .un-post-detail-right-col {
      display: block;
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: auto;
      max-height: none;
      overflow: visible;
    }

    .un-home-layout--post-detail .un-post-detail-right-inner {
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
    }

    .un-home-layout--post-detail .un-home-main {
      height: auto;
      max-height: none;
      overflow: visible;
    }

    .path--studyfeed-post-view .un-home--post-detail {
      overflow-y: auto;
    }
  }

  /*
   * Chi tiết bài (mobile/tablet): bỏ khóa viewport + flex cuộn lồng nhau.
   * Đặt cuối file để thắng mọi rule !important trong @media (max-width: 992px).
   */
  @media (max-width: 1100px) {
    .path--studyfeed-post-view {
      position: static !important;
      inset: auto !important;
      overflow: visible !important;
      height: auto !important;
      min-height: 100vh;
    }

    .path--studyfeed-post-view > .site {
      display: block !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
    }

    .path--studyfeed-post-view .un-home.un-home--post-detail,
    .path--studyfeed-post-view .un-home-layout--post-detail {
      height: auto !important;
      max-height: none !important;
      min-height: 0 !important;
      overflow: visible !important;
    }

    .path--studyfeed-post-view .un-home-layout--post-detail .un-home-main {
      flex: none !important;
      height: auto !important;
      max-height: none !important;
      min-height: 0 !important;
      overflow: visible !important;
    }

    .path--studyfeed-post-view .un-home-layout--post-detail .un-home-columns--post-detail,
    .path--studyfeed-post-view .un-home-layout--post-detail .un-home-feed-col--detail,
    .path--studyfeed-post-view .un-home-layout--post-detail .un-home-posts-list--detail {
      flex: none !important;
      min-height: auto !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

    .path--studyfeed-post-view .un-home-layout--post-detail .un-home-posts-list--detail {
      overflow-y: visible !important;
    }
  }

  @media (max-width: 576px) {
    :root {
      --un-sf-mobile-gutter: 12px;
    }

    .un-sf-mobile-nav {
      margin-bottom: 8px;
      padding: 6px 7px 6px 8px;
      gap: 8px;
    }

    .un-sf-mobile-nav__scroll {
      padding: 3px;
      gap: 2px;
    }

    .un-sf-mobile-nav__item {
      min-width: 2.85rem;
      padding: 6px 4px 5px;
      font-size: 9px;
      gap: 2px;
    }

    .un-sf-mobile-nav__item i {
      font-size: 15px;
    }

    .un-sf-mobile-nav__compose {
      width: 38px;
      height: 38px;
      font-size: 16px;
      border-radius: 12px;
    }

    .un-sf-col-tabs__btn {
      max-width: 9.5rem;
      padding: 6px 12px;
      font-size: 11px;
    }

    .un-feed-card--detail .un-feed-head {
      gap: 6px;
    }

    .un-feed-popup,
    .un-feed-popup.un-post-report-popup,
    .un-feed-popup.un-post-block-popup {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      max-height: min(92vh, 640px);
      border-radius: 18px 18px 0 0;
      transform: translateY(100%);
    }

    .un-feed-popup.un-feed-popup--post-comments {
      display: flex;
      flex-direction: column;
      max-height: min(94vh, 720px);
      overflow: hidden;
    }

    .un-feed-popup.un-feed-popup--post-comments .un-post-comment-popup-inner {
      padding: 16px 14px max(14px, env(safe-area-inset-bottom, 0px));
      max-height: 100%;
    }

    .un-feed-popup.un-feed-popup--post-comments .un-post-comment-popup-title {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .un-feed-popup.un-feed-popup--post-comments .un-share-popup-close {
      top: 10px;
      right: 10px;
    }

    .un-feed-post-comment-popup-body .un-feed-card {
      padding: 0 0 6px;
    }

    .un-feed-post-comment-popup-body .un-feed-gallery-swiper .swiper-slide {
      border-radius: 14px;
    }

    .un-feed-post-comment-popup-body .un-feed-embed-video .stf-embed-video-wrap {
      width: 100%;
      max-width: 100%;
    }

    .un-feed-post-comment-popup-body .un-feed-actions {
      flex-wrap: wrap;
      gap: 6px;
    }

    .un-feed-post-comment-popup-body .un-feed-comments-head {
      flex-wrap: wrap;
    }

    .un-feed-post-comment-popup-body .un-feed-comment-composer,
    .un-feed-post-comment-popup-body .un-feed-comment-pill-wrap {
      max-width: 100%;
    }

    .un-feed-popup.is-open,
    .un-feed-popup.un-post-report-popup.is-open,
    .un-feed-popup.un-post-block-popup.is-open {
      transform: translateY(0);
    }

    .un-feed-popup.un-feed-popup--post-comments.is-open {
      transform: translateY(0);
    }

    #un-share-popup.un-feed-popup--share {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      border-radius: 18px 18px 0 0;
      transform: translateY(100%);
    }

    #un-share-popup.un-feed-popup--share.is-open {
      transform: translateY(0);
    }

    .un-user-follow-popup {
      width: calc(100vw - 20px);
    }

    .un-perf-detail-filter-row {
      flex-direction: column;
      align-items: stretch;
    }

    .un-perf-detail-select {
      width: 100%;
      min-width: 0;
    }

    .un-perf-stats-row {
      grid-template-columns: 1fr;
    }

    .un-perf-detail-kpis {
      grid-template-columns: 1fr 1fr;
    }

    .un-home--profile .un-profile-layout {
      grid-template-columns: 1fr;
    }

    .un-home--profile .un-profile-sidebar {
      order: 2;
    }

    .un-home--profile .un-profile-main {
      order: 1;
    }

    .un-home--profile .un-profile-hero-stats {
      gap: 1rem;
    }
  }


  @media (prefers-reduced-motion: reduce) {
    .un-home-board-col[data-un-board],
    .un-home-board-col[data-un-board].is-board-collapsed,
    .un-board-popup,
    .un-board-popup.is-open,
    .un-giphy-picker-backdrop,
    .un-giphy-picker-backdrop.is-open,
    .un-giphy-picker,
    .un-giphy-picker.is-open,
    .un-feed-popup-overlay,
    .un-feed-popup-overlay.is-open,
    .un-feed-popup,
    .un-feed-popup.is-open,
    .un-feed-col-remove,
    .un-feed-left-actions button,
    .un-feed-share,
    .un-board-add-btn,
    .un-sidebar-link,
    .un-sidebar-button,
    .un-topic-item {
      transition-duration: 0.01ms !important;
    }
  }

/* Perf: thay Tailwind px-0 trên các trang StudyFeed */
.un-home.home_page,
.un-home.un-home--post-detail,
.un-home.un-home--topic-detail,
.path--common-home-saved .un-home,
.path--common-home-my_posts .un-home,
.path--common-home-performance_detail .un-home {
  padding-left: 0;
  padding-right: 0;
}

.path--common-topics .un-home,
.un-home.un-home--topics-all {
  padding-left: 0;
  padding-right: 0;
}

.un-home.un-home--profile {
  padding-left: 0;
  padding-right: 0;
}