@charset "UTF-8";

/********* public:vnxf_style.less ********/
/* ==========================================================================
   VNXF STYLE 2 - TỔNG HỢP GIAO DIỆN CHÍNH (ĐÃ GOM TỪ VNXF_PORTAL_STYLE2)
   ========================================================================== */
.p-nav-smallLogo img {
  max-height: 34.2px;
}
/* ── 1. LAYOUT & CẤU TRÚC CHUNG ── */
.p-body-sideNavCol {
  width: 180px;
}
.p-header {
  display: none;
}
.p-sectionLinks {
  display: none;
}
.p-nav {
  overflow: visible;
}
.p-nav-inner {
  align-items: center;
}
.p-body-inner {
  margin-top: 10px;
}
.p-footer-copyright,
.p-footer-debug,
.p-breadcrumbs--bottom {
  display: none;
}
/* ── 2. HEADER TẦNG 1: NAVIGATION MENU CHÍNH & LOGIN BUTTON ── */
.p-nav {
  background: hsla(var(--xf-contentBg)) !important;
  border-bottom: 1px solid hsla(var(--xf-borderColor)) !important;
  box-shadow: 0 1px 3px hsla(
    var(--xf-paletteNeutral3--h), 
    var(--xf-paletteNeutral3--s), 
    var(--xf-paletteNeutral3--l), 
    5%
  );
}
.p-nav .p-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 6px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-nav .p-nav-list .p-navEl-link {
  font-weight: 600;
  font-size: 14.5px;
  color: hsla(var(--xf-textColor));
  transition: color 0.2s ease;
}
.p-nav .p-nav-list .p-navEl-link:hover,
.p-nav .p-nav-list .p-navEl-link.is-selected {
  color: hsla(var(--xf-paletteColor3)) !important;
  background: transparent !important;
}
.p-nav .p-navgroup-link--style2Login {
  background: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    15%
  ) !important;
  color: hsla(var(--xf-paletteColor3)) !important;
  border: 1px solid hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    25%
  ) !important;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.p-nav .p-navgroup-link--style2Login i {
  font-size: 16px;
  font-weight: 600;
}
.p-nav .p-navgroup-link--style2Login:hover {
  background: hsla(var(--xf-paletteColor3)) !important;
  color: #ffffff !important;
}
.p-nav .header-search .header-search-input:focus {
  border-color: hsla(var(--xf-paletteColor3)) !important;
  background: hsla(var(--xf-contentBg)) !important;
}
.p-nav .p-nav-opposite .p-navgroup-link i.fa-pen {
  color: hsla(var(--xf-paletteColor3)) !important;
  border-color: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    30%
  ) !important;
}
[data-color-scheme="dark"] .p-nav .p-nav-list .p-navEl-link,
:root[data-variation="alternate"] .p-nav .p-nav-list .p-navEl-link {
  color: hsla(var(--xf-textColorMuted));
}
[data-color-scheme="dark"] .p-nav .p-nav-list .p-navEl-link:hover,
:root[data-variation="alternate"] .p-nav .p-nav-list .p-navEl-link:hover,
[data-color-scheme="dark"] .p-nav .p-nav-list .p-navEl-link.is-selected,
:root[data-variation="alternate"] .p-nav .p-nav-list .p-navEl-link.is-selected {
  color: hsla(var(--xf-paletteColor3)) !important;
}
/* ── 3. LOGO BADGE PORTAL ── */
.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsla(var(--xf-textColor));
  text-decoration: none;
}
.logo .logo-badge {
  background: hsla(var(--xf-paletteColor3));
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}
/* ── 4. HEADER TẦNG 2: THANH XU HƯỚNG / VIRAL TRACK ── */
.header-viral {
  background: hsla(var(--xf-contentAltBg));
  border-bottom: 1px solid hsla(var(--xf-borderColor));
  padding: 8px 0;
  font-size: 13px;
  position: relative;
}
.header-viral .viral-track {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.header-viral .viral-track::-webkit-scrollbar {
  display: none;
}
.header-viral .viral-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: hsla(var(--xf-paletteColor3));
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.header-viral .viral-label i {
  font-size: 13px;
}
.header-viral .tag-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsla(var(--xf-contentBg));
  border: 1px solid hsla(var(--xf-borderColor));
  color: hsla(var(--xf-textColorMuted));
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.header-viral .tag-bubble:hover {
  border-color: hsla(var(--xf-paletteColor3));
  color: hsla(var(--xf-paletteColor3));
  background: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    8%
  );
}
.header-viral .tag-bubble span.badge {
  font-size: 11px;
  background: hsla(var(--xf-contentAltBg));
  color: hsla(var(--xf-textColor));
  padding: 1px 6px;
  border-radius: 10px;
}
/* ── 5. NÚT BẤM CHÍNH (PRIMARY BUTTONS) ── */
.button.button--primary,
a.button.button--primary {
  background: hsla(var(--xf-paletteColor3)) !important;
  border-color: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    calc(var(--xf-paletteColor3--l) - 8%), 
    var(--xf-paletteColor3--a)
  ) !important;
  color: #ffffff !important;
}
.button.button--primary:hover,
a.button.button--primary:hover,
.button.button--primary:active,
a.button.button--primary:active,
.button.button--primary:focus,
a.button.button--primary:focus {
  background: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    calc(var(--xf-paletteColor3--l) - 8%), 
    var(--xf-paletteColor3--a)
  ) !important;
  border-color: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    calc(var(--xf-paletteColor3--l) - 8%), 
    var(--xf-paletteColor3--a)
  ) !important;
  color: #ffffff !important;
}
/* ── 7. P-NAV-OPPOSITE & ICONS ── */
.p-nav-opposite .p-navgroup-link i:after {
  color: hsla(var(--xf-paletteColor3));
  transition: color 0.2s ease;
}
.p-nav-opposite .p-navgroup-link:hover i:after,
.p-nav-opposite .p-navgroup-link:focus i:after {
  color: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    calc(var(--xf-paletteColor3--l) + 10%), 
    var(--xf-paletteColor3--a)
  );
}
[data-variation="alternate"] .p-nav-opposite .p-navgroup-link:hover i:after,
[data-color-scheme="dark"] .p-nav-opposite .p-navgroup-link:hover i:after,
:root[data-variation="alternate"] .p-nav-opposite .p-navgroup-link:hover i:after,
[data-variation="alternate"] .p-nav-opposite .p-navgroup-link:focus i:after,
[data-color-scheme="dark"] .p-nav-opposite .p-navgroup-link:focus i:after,
:root[data-variation="alternate"] .p-nav-opposite .p-navgroup-link:focus i:after {
  color: #ffffff;
}
a.p-navgroup-link {
  background: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    15%
  ) !important;
  border: 1px solid hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    25%
  ) !important;
  font-weight: 700;
  font-size: 13.5px;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  padding: 5px;
  border-radius: 20px !important;
  margin-top: 2px;
  margin-left: 6px;
  color: hsla(var(--xf-textColor));
}
.footer-middle {
  font-size: 0.91rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  padding-top: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid hsla(var(--xf-borderColor));
}
.footer-canvas {
  padding: 10px;
  padding-top: 0;
  font-size: 0.9rem;
}
/* ── 8. LOGIN MENU DROPDOWN ── */
.login_menu.menu .menu-content {
  min-width: 260px;
  border-radius: 14px;
  border: 1px solid hsla(var(--xf-borderColor));
  box-shadow: 0 8px 28px hsla(0, 0%, 0%, 0.1), 0 2px 6px hsla(0, 0%, 0%, 0.06);
  overflow: hidden;
  padding: 8px 0;
}
.login_menu.menu .menu-header {
  font-size: 15px;
  font-weight: 800;
  color: hsla(var(--xf-textColor));
  padding: 14px 20px 10px;
  border-bottom: 1px solid hsla(var(--xf-borderColor));
  margin-bottom: 4px;
  background: transparent;
}
.login_menu.menu .menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: hsla(var(--xf-textColor));
  text-decoration: none;
  transition: background .15s;
}
.login_menu.menu .menu-row:hover {
  background: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    8%
  );
  color: hsla(var(--xf-paletteColor3));
}
.login_menu.menu .menu-row-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: hsla(var(--xf-contentAltBg));
  font-size: 15px;
  color: hsla(var(--xf-textColorMuted));
  flex-shrink: 0;
}
.login_menu.menu .menu-row:hover .menu-row-icon {
  background: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    var(--xf-paletteColor3--l), 
    12%
  );
  color: hsla(var(--xf-paletteColor3));
}
.login_menu.menu .menu-arrow {
  display: none;
}
.p-nav-smallLogo {
  display: flex;
  align-items: center;
  width: auto;
  max-width: none;
  margin-right: 4px;
}
.p-nav-list .p-navEl-link {
  font-size: 16px;
}
.p-nav-opposite .p-navgroup-link i.fa-phone {
  color: hsla(var(--xf-paletteColor3));
}
.p-footer .links {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
}
.p-footer .links > .p-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.p-footer .links .item {
  flex: 1 1 320px;
  min-width: 280px;
}
.p-footer .links .item ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-footer .links .item li {
  padding: 5px 0;
  line-height: 1.5;
}
.p-footer .links .item li > i {
  width: 20px;
  margin-right: 8px;
  text-align: center;
  opacity: 0.85;
}
.p-footer .links a {
  color: inherit;
  text-decoration: none;
}
.p-footer .links a:hover {
  text-decoration: underline;
}
.p-nav-inner .header-search {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  margin: 0 15px 0 20px;
}
.p-nav-inner .header-search .header-search-input {
  width: 100%;
  height: 34px;
  line-height: 34px;
  border-radius: 8px;
  border: 1px solid hsla(var(--xf-pageBg));
  background: hsla(var(--xf-pageBg));
  padding: 0 14px 0 36px;
  font-size: 15px;
  color: hsla(var(--xf-textColor));
  outline: none;
  -webkit-appearance: none;
}
.p-nav-inner .header-search .header-search-input::placeholder {
  color: hsla(var(--xf-textColorMuted));
}
.p-nav-inner .header-search .header-search-input:focus {
  border-color: hsla(var(--xf-paletteColor3));
  background: hsla(var(--xf-contentBg));
}
.p-nav-inner .header-search .header-search-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: hsla(var(--xf-textColorMuted));
  opacity: 0.75;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.p-nav-inner .header-search .header-search-icon:hover {
  opacity: 1;
}
@media (max-width: 900px) {
  .p-nav-inner .header-search {
    display: none;
  }
}
.p-navgroup-link--search {
  display: none;
}
.story_widget_carousel .vnxf-storySwiper__card--create {
  background: linear-gradient(135deg, hsl(6, 70%, 36%), hsl(206, 100%, 35%));
}
.top5-grid-container .vnxfNews-heartReact .reaction {
  color: unset;
}
.p-navgroup {
  background: none;
}
.p-navgroup-link.p-navgroup-link--iconic .p-navgroup-linkText,
.p-navgroup-link.p-navgroup-link--textual i {
  display: none;
}
@media (max-width: 650px) {
  .p-navgroup-link--whatsnew {
    display: none;
  }
}
/* ── 9. THREAD VIEW: KHỐI TÁC GIẢ & BÀI ĐẦU TIÊN TRÌNH BÀY NHƯ BÀI BÁO ── */
.info-block--left,
.info-block--right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.info-block--right {
  justify-content: flex-end;
}
.info-block--left .avatar {
  position: relative;
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  margin-right: 15px;
  background-color: #e0e0e0;
  border: 2px solid #02bad6;
}
.author-name {
  font-size: 1rem;
  color: #f35e74;
  font-weight: 700;
  margin-bottom: 3px;
}
.author-name i {
  color: #40c9df;
  margin-left: 7px;
}
.date-comment-view {
  font-size: 0.8rem;
  flex-flow: wrap;
  display: flex;
}
.date-comment-view .comment {
  margin: 0 5px;
}
.date-comment-view .comment:before,
.date-comment-view .view:before {
  content: '\2022';
  margin-right: 5px;
}
.info-block--left .FollowLink {
  margin-left: 12px;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  color: hsla(var(--xf-pageBg));
  background-color: hsla(var(--xf-paletteColor3));
}
.info-block--left .date-comment-view {
  margin-top: 10px;
  font-size: 0.8rem;
}
.p-description ul.listInline.listInline--bullet {
  display: none;
}
/* Tags hScroller dưới bài đầu */
.new_tags {
  position: relative;
  margin-top: -10px;
  margin-bottom: 5px;
  padding: 0 25px 20px;
  background: hsla(var(--xf-contentBg));
}
.new_tags ul {
  list-style: none;
  padding-left: 0;
}
.new_tags .tagItem {
  font-size: 15px;
  text-decoration: none;
  background: hsla(var(--xf-contentAltBg));
  border: none;
  margin-left: 6px;
  text-transform: capitalize;
}
/* Sidenav trái + left menu (widget vnxf_widgets_left_menu) */
.p-body-sideNavInner {
  position: sticky;
  top: 70px;
  left: 0;
}
.p-body-sideNavTrigger,
.shareButtons.shareButtons--iconic,
.offCanvasMenu-header {
  display: none;
}
.sidenav_menu > .categoryList.toggleTarget.is-active {
  overflow: auto;
  max-height: 200px;
}
.user_verified {
  color: hsla(
    var(--xf-paletteColor3--h), 
    var(--xf-paletteColor3--s), 
    calc(var(--xf-paletteColor3--l) - 8%), 
    var(--xf-paletteColor3--a)
  );
  margin-left: 5px;
  font-weight: bold;
}
@media (max-width: 900px) {
  .left-menu a {
    padding: 6px 12px;
  }
  .offCanvasMenu-header {
    display: block;
  }
  .p-body-sideNav {
    display: block;
    width: 100%;
  }
}
.info-block--left .author-name,
.author-name {
  color: hsla(var(--xf-textColor));
  font-weight: 600;
}
/* BÀI ĐẦU: ẩn khung user bên trái + ẩn post attribution, nội dung full width */
.js-replyNewMessageContainer > .message--post:first-child .message-cell--user {
  display: none;
}
.js-replyNewMessageContainer > .message--post:first-child .message-attribution {
  display: none;
}
.js-replyNewMessageContainer > .message--post:first-child .message-cell--main {
  max-width: 100%;
  padding: 20px;
}
/* Bài đầu: trình bày như bài viết (đẹp, dễ đọc) */
.js-replyNewMessageContainer > .message--post:first-child .message-content,
.js-replyNewMessageContainer > .message--post:first-child .message-userContent {
  font-size: 16.5px;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper {
  font-size: 16.5px;
  line-height: 1.55;
  color: hsla(var(--xf-textColor));
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper p {
  margin: 0 0 1.15em;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper > br {
  line-height: 2.2;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper h1,
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper h2,
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper h3,
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper h4 {
  line-height: 1.35;
  margin: 1.5em 0 .6em;
  font-weight: 700;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper h2 {
  font-size: 1.5em;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper h3 {
  font-size: 1.28em;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper ul,
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
  line-height: 1.75;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper li {
  margin-bottom: .4em;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper blockquote,
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper .bbCodeBlock {
  font-size: 16px;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper a {
  text-decoration: none;
}
.js-replyNewMessageContainer > .message--post:first-child .bbWrapper a:hover {
  text-decoration: underline;
}
/* ── 10. OFFCANVAS MENU ── */
.offCanvasMenu--nav .offCanvasMenu-content {
  background: hsla(var(--xf-contentBg));
}
.vnxf-ocm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid hsla(var(--xf-borderColor));
}
.vnxf-ocm-logo {
  display: flex;
  align-items: center;
}
.vnxf-ocm-logo img {
  height: 36px;
  width: auto;
}
.vnxf-ocm-logo-dark {
  display: none;
}
[data-color-scheme="dark"] .vnxf-ocm-logo-light,
:root[data-variation="alternate"] .vnxf-ocm-logo-light {
  display: none;
}
[data-color-scheme="dark"] .vnxf-ocm-logo-dark,
:root[data-variation="alternate"] .vnxf-ocm-logo-dark {
  display: block;
}
.offCanvasMenu--nav .offCanvasMenu-closer {
  position: static;
  float: none;
  padding: 8px;
  margin: 0;
  font-size: 18px;
  color: hsla(var(--xf-textColorMuted));
  border-radius: 8px;
}
.offCanvasMenu--nav .offCanvasMenu-closer:hover {
  background: hsla(var(--xf-contentHighlightBg));
}
.offCanvasMenu--nav .offCanvasMenu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 500;
  color: hsla(var(--xf-textColor));
  text-decoration: none;
  border-radius: 0;
  transition: background .15s;
}
.offCanvasMenu--nav .offCanvasMenu-link:hover {
  background: hsla(var(--xf-contentHighlightBg));
}
.offCanvasMenu--nav .offCanvasMenu-separator {
  border-top-color: hsla(var(--xf-borderColor));
  margin: 4px 0;
}
.offCanvasMenu--nav .p-navEl-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 500;
  color: hsla(var(--xf-textColor));
  text-decoration: none;
  transition: background .15s;
}
.offCanvasMenu--nav .p-navEl-link:hover {
  background: hsla(var(--xf-contentHighlightBg));
}
.offCanvasMenu--nav .p-navEl-link:before {
  font-size: 16px;
  width: 22px;
  text-align: center;
  color: hsla(var(--xf-textColorMuted));
}
.offCanvasMenu--nav .p-navEl--depth1 .p-navEl-link {
  padding-left: 46px;
  font-size: 14px;
  color: hsla(var(--xf-textColorMuted));
}
.offCanvasMenu--nav .p-navEl--depth2 .p-navEl-link {
  padding-left: 64px;
  font-size: 13px;
}
.vnxf-ocm-categories {
  padding: 8px 0;
  border-top: 1px solid hsla(var(--xf-borderColor));
}
.vnxf-ocm-cat-title {
  padding: 14px 18px 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: hsla(var(--xf-textColorMuted));
}
.vnxf-ocm-cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: hsla(var(--xf-textColor));
  text-decoration: none;
  transition: background .15s;
}
.vnxf-ocm-cat-link:hover {
  background: hsla(var(--xf-contentHighlightBg));
  text-decoration: none;
}
.vnxf-ocm-cat-link i {
  width: 22px;
  text-align: center;
  font-size: 15px;
  color: hsla(var(--xf-textColorMuted));
}
.vnxf-ocm-cat-link:hover i {
  color: hsla(var(--xf-paletteColor3));
}
/* ── 11. THANH 3 NÚT TƯƠNG TÁC DƯỚI BÀI ĐẦU ── */
.vnxf-postActions {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-top: 1px solid hsla(var(--xf-borderColorLight));
  padding: 10px;
  background: hsla(var(--xf-contentBg));
}
.vnxf-postAction {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 18px;
  color: hsla(var(--xf-textColorMuted));
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.vnxf-postAction .fa,
.vnxf-postAction svg {
  font-size: 18px;
}
.vnxf-postAction:hover {
  background: hsla(var(--xf-contentHighlightBg));
  color: hsla(var(--xf-textColor));
  text-decoration: none;
}
.vnxf-postAction--react .reaction {
  font-size: 18px !important;
  color: inherit !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
}
.vnxf-postAction--react .reaction-text,
.vnxf-postAction--react .js-reactionText {
  display: none !important;
}
/* ── 12. RESPONSIVE BREAKPOINTS CHUẨN XENFORO ── */
@media (max-width: 650px) {
  .site-footer .footer-top,
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  .header-viral .viral-track {
    gap: 8px;
  }
  .site-footer .footer-links {
    gap: 12px 16px;
  }
}
/* ── VNXF 2025 FOOTER STYLE ── */
.p-footer {
  background: hsla(var(--xf-contentBg));
  margin-top: 40px;
}
.p-footer .p-footer-inner {
  background: hsla(var(--xf-contentBg));
  border-bottom: 1px solid hsla(var(--xf-borderColor));
}
.p-footer-row {
  padding: 15px 0 0;
  margin-bottom: 0;
}
.p-footer-row a {
  color: hsla(var(--xf-textColorMuted));
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer.vnxf-footer-2025 {
  background: hsla(var(--xf-contentBg));
  border-top: 1px solid hsla(var(--xf-borderColor));
  padding: 40px 0 24px;
}
.vnxf-footer-2025 .site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}
.vnxf-footer-2025 .footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  padding-bottom: 32px;
  border-bottom: 1px solid hsla(var(--xf-borderColor));
}
.vnxf-footer-2025 .footer-left {
  flex: 0 0 35%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vnxf-footer-2025 .footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.vnxf-footer-2025 .footer-logo img {
  max-width: 140px;
  height: auto;
  display: block;
}
.vnxf-footer-2025 .footer-description {
  font-size: 13px;
  line-height: 1.6;
  color: hsla(var(--xf-textColorMuted));
}
.vnxf-footer-2025 .footer-description p {
  margin: 0 0 8px;
}
.vnxf-footer-2025 .footer-description p:last-child {
  margin-bottom: 0;
}
.vnxf-footer-2025 .footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}
.vnxf-footer-2025 .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsla(var(--xf-contentAltBg));
  color: hsla(var(--xf-textColor));
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 16px;
}
.vnxf-footer-2025 .footer-social a:hover {
  background: hsla(var(--xf-paletteColor3));
  color: #ffffff;
  transform: translateY(-2px);
}
.vnxf-footer-2025 .footer-right {
  flex: 1;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  min-width: 300px;
}
.vnxf-footer-2025 .footer-column {
  flex: 1;
  min-width: 180px;
}
.vnxf-footer-2025 .footer-column-sm {
  flex: 0 1 calc(33.333% - 20px);
  min-width: 150px;
}
.vnxf-footer-2025 .footer-column-title {
  font-size: 13px;
  font-weight: 800;
  color: hsla(var(--xf-textColor));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid hsla(var(--xf-paletteColor3));
  display: inline-block;
}
.vnxf-footer-2025 .footer-column-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vnxf-footer-2025 .footer-column-links li {
  margin: 0;
  padding: 0;
}
.vnxf-footer-2025 .footer-column-links a {
  font-size: 13px;
  color: hsla(var(--xf-textColorMuted));
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}
.vnxf-footer-2025 .footer-column-links a:hover {
  color: hsla(var(--xf-paletteColor3));
}
.vnxf-footer-2025 .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  font-size: 13px;
  color: hsla(var(--xf-textColorMuted));
}
.vnxf-footer-2025 .footer-bottom p {
  margin: 0;
}
.vnxf-footer-2025 .footer-bottom strong {
  color: hsla(var(--xf-textColor));
}
@media (max-width: 900px) {
  .vnxf-footer-2025 .footer-top {
    gap: 24px;
  }
  .vnxf-footer-2025 .footer-right {
    gap: 24px;
  }
  .vnxf-footer-2025 .footer-column-sm {
    flex: 0 1 calc(50% - 12px);
  }
}
@media (max-width: 650px) {
  .vnxf-footer-2025 .footer-top {
    flex-direction: column;
    gap: 24px;
  }
  .vnxf-footer-2025 .footer-left {
    flex: 1 1 100% !important;
    min-width: auto;
  }
  .vnxf-footer-2025 .footer-right {
    flex: 1 1 100%;
    flex-direction: column;
    width: 100%;
    gap: 24px;
  }
  .vnxf-footer-2025 .footer-column {
    width: 100%;
  }
  .vnxf-footer-2025 .footer-column-sm {
    flex: 1 1 100% !important;
    min-width: auto;
  }
}
/* ── MOBILE: an icon tin nhan + thong bao, da co trong offcanvas ── */
/* an icon tin nhan/chuong CHI o header, khong dung toi ban sao trong offcanvas */
@media (max-width: 900px) {
  .p-nav-opposite .p-navgroup--member .p-navgroup-link--conversations,
  .p-nav-opposite .p-navgroup--member .p-navgroup-link--alerts {
    display: none;
  }
}
/* ── OFFCANVAS: hang 3 nut, dung lai style cua .p-nav-opposite ── */
.vnxf-ocm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 10px;
}
.vnxf-ocm-actions .p-navgroup-link {
  margin: 0 !important;
  flex: 0 0 auto;
}
.vnxf-ocm-actions .p-navgroup-link i:after {
  color: hsla(var(--xf-paletteColor3));
}
/* ── OFFCANVAS: o tim kiem ── */
.vnxf-ocm-search {
  position: relative;
  margin: 8px 18px 12px;
}
.vnxf-ocm-search .vnxf-ocm-search-input {
  width: 100%;
  height: 38px;
  line-height: 38px;
  border-radius: 8px;
  border: 1px solid hsla(var(--xf-borderColor));
  background: hsla(var(--xf-pageBg));
  padding: 0 14px 0 38px;
  font-size: 15px;
  color: hsla(var(--xf-textColor));
  outline: none;
  -webkit-appearance: none;
}
.vnxf-ocm-search .vnxf-ocm-search-input::placeholder {
  color: hsla(var(--xf-textColorMuted));
}
.vnxf-ocm-search .vnxf-ocm-search-input:focus {
  border-color: hsla(var(--xf-paletteColor3));
  background: hsla(var(--xf-contentBg));
}
.vnxf-ocm-search .vnxf-ocm-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: hsla(var(--xf-textColorMuted));
  opacity: .75;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.vnxf-ocm-search .vnxf-ocm-search-icon:hover {
  opacity: 1;
}