/* ==========================================================================
   REFERENCE ADAPTER CSS & MOBILE RESPONSIVE - VAFHP USER WEB
   ========================================================================== */

/* --- 1. Accessibility & Navigation --- */
.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 3px solid #3157c8;
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- 2. States & Skeleton Loading --- */
.reference-state {
  padding: 38px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-muted);
  text-align: center;
}

.reference-state.error {
  border-color: #d99;
  color: #9b2727;
}

.is-loading {
  min-height: 120px;
  background: linear-gradient(90deg, #e9edf4 25%, #f7f8fa 50%, #e9edf4 75%);
  background-size: 200% 100%;
  animation: referenceSkeleton 1.3s infinite;
}

@keyframes referenceSkeleton {
  to {
    background-position: -200% 0;
  }
}

/* --- 3. Preview Notes & Demo Features --- */
.preview-note {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: #1a2b3c;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: var(--shadow-md);
}

[data-demo-feature] {
  cursor: pointer;
}

.demo-status {
  margin-top: 10px;
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 700;
}

/* --- 4. Cards & Links Layout --- */
.search-result-card a,
.cat-post-card a {
  color: inherit;
}

.side-card > a,
.news-card > a,
.cat-post-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.side-card > a > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.search-result-card > a {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 100%;
  color: inherit;
  align-items: flex-start;
}

/* Grid/flex children must be allowed to shrink on narrow viewports. Without
   min-width: 0, a long article title or date can set a wider intrinsic width
   and make the card look shifted/cropped on the right. */
.news-card,
.news-card > a,
.news-card .nc-body {
  min-width: 0;
  max-width: 100%;
}

.news-card .meta {
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.news-card .meta span {
  min-width: 0;
  max-width: 100%;
}

.news-card h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   5. RESPONSIVE MOBILE WEB (TỐI ƯU TOÀN DIỆN CHO ĐIỆN THOẠI & TABLET)
   ========================================================================== */

/* --- Tablet & Màn hình vừa (Dưới 1200px) --- */
@media (max-width: 1199px) {
  /* Ẩn 2 banner quảng cáo trượt hai bên cản trở tầm nhìn trên màn hình nhỏ */
  .sponsored-card--left,
  .sponsored-card--right {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  /* Hero chính: Chuyển từ chia cột sang xếp chồng */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .hero-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Bố cục 2 cột (Video nổi bật + Đang quan tâm, Tin mới + Sidebar) gập thành 1 cột */
  .layout-2col {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* --- Điện thoại Mobile (Dưới 768px) --- */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  header.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    isolation: isolate;
  }

  .main-header,
  .header-inner,
  .category-tabs-bar,
  .page-with-banners,
  .page-with-banners .container {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Căn chỉnh lại Search Result Card */
  .search-result-card > a {
    width: 100%;
    min-width: 0;
    flex-direction: column;
  }

  .search-result-card .src-body,
  .cat-post-card .cpc-body {
    min-width: 0;
  }

  /* Header & Thanh tìm kiếm */
  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
  }

  .logo-block .logo-text .name-vi {
    font-size: 14px;
    line-height: 1.3;
  }

  .logo-block .logo-text .tag-vi {
    font-size: 11px;
  }

  /* Đẩy ô tìm kiếm xuống hàng thứ 2, chiếm 100% chiều rộng */
  .search-box {
    order: 4;
    width: 100%;
    margin-top: 4px;
  }

  .header-right {
    order: 2;
  }

  /* Giới hạn nút Hamburger chỉ tác động lên button trong header */
  .main-header button.mobile-toggle,
  button.mobile-toggle {
    display: inline-flex !important;
    order: 3;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--border, #dfe4ec);
    border-radius: 8px;
    background: #fff;
    color: var(--primary, #1a2b6d);
    cursor: pointer;
  }

  /* Mobile Navigation Drawer (Menu trượt ngăn kéo cạnh phải) */
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 80vw);
    height: 100vh;
    background: #ffffff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
    z-index: 99999;
    padding: 68px 20px 24px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }

  body.nav-open .main-nav {
    right: 0;
  }

  .main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .main-nav ul li a {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    background: #f8fafc;
    color: #1e293b;
  }

  .main-nav ul li.active a {
    background: var(--primary, #1a2b6d);
    color: #ffffff;
  }

  /* --- Xử lý thanh Chuyên mục trên Mobile --- */
  .category-tabs-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    user-select: none;
  }

  /* Ẩn khung chuyên mục mặc định trên mobile */
  .category-tabs-panel {
    display: none;
  }

  /* Hỗ trợ ĐỒNG THỜI cả class .open và .show khi bấm xổ xuống */
  #categoryTabsPanel.open,
  #categoryTabsPanel.show,
  .category-tabs-panel.open,
  .category-tabs-panel.show {
    display: block !important;
    max-height: min(60vh, 360px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 0 16px 0 !important;
    width: 100% !important;
  }

  /* Trả lại đúng kích thước và bố cục cho danh sách chip chuyên mục */
  #category-chips-container,
  .category-tabs-panel .category-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  #category-chips-container .chip,
  .category-tabs-panel .chip {
    display: inline-flex !important;
    align-items: center;
    padding: 6px 14px !important;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  #category-chips-container .chip.active,
  .category-tabs-panel .chip.active {
    background: var(--primary, #1a2b6d) !important;
    color: #ffffff !important;
  }

  /* Mobile category navigation is a single aligned column. Category groups
     previously mixed wrapped root chips with expanded child rows, which made
     the list appear to jump between columns. */
  #category-chips-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 8px 8px !important;
  }

  #category-chips-container > .chip,
  #category-chips-container > .category-chip-group {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  #category-chips-container > .chip,
  #category-chips-container .category-chip-group > .category-chip--root {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px;
    padding: 10px 12px !important;
  }

  #category-chips-container > .category-chip-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  #category-chips-container .category-chip__submenu {
    display: flex !important;
    position: static !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  #category-chips-container .category-chip__submenu .chip {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 40px;
    padding: 9px 12px 9px 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.78) !important;
    white-space: normal;
  }

  #category-chips-container .category-chip--root::after {
    display: none;
  }

  /* Grids: Chuyển toàn bộ danh sách bài viết, kiến thức, cộng đồng thành 1 cột */
  .hero-side,
  .news-grid,
  .knowledge-grid,
  .community-grid,
  .stats-grid,
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Section Đăng ký Hội viên */
  .membership-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .membership-card-form {
    padding: 20px !important;
  }

  /* Section Newsletter */
  .newsletter {
    flex-direction: column !important;
    text-align: center;
    gap: 16px !important;
    padding: 24px 16px !important;
  }

  .newsletter-form {
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100% !important;
  }

  /* Floating Hotline & Chatbot Widget (Thu gọn cho vừa màn hình điện thoại) */
  .floating-hotline--left {
    left: 12px;
    bottom: 16px;
  }

  .floating-hotline--left .hotline-bubble {
    display: none;
  }

  .chatbot-widget {
    right: 12px;
    bottom: 16px;
  }

  .chatbot-popup {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 68px !important;
    max-height: calc(100vh - 100px);
  }
}

/* --- Màn hình Mobile nhỏ (Dưới 576px - Code gốc VAFHP) --- */
@media (max-width: 576px) {
  .skip-link {
    left: 8px;
  }

  .preview-note {
    right: 8px;
    bottom: 8px;
  }

  .page-with-banners {
    overflow: hidden;
  }

  .article-title {
    overflow-wrap: anywhere;
  }
}

/* --- 6. Accessibility - Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .chip:hover,
  .news-card:hover,
  .knowledge-card:hover,
  .side-card:hover {
    transform: none !important;
  }
}

/* --- 7. Sidebar Ad Card Styles --- */
#sidebar-ad-slot {
  margin-top: 24px;
}

.sidebar-ad-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 20px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sidebar-ad-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary, #1a2b6d) 0%, var(--secondary, #3157c8) 100%);
}

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

.sidebar-ad-card__label {
  display: inline-block;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.sidebar-ad-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sidebar-ad-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eff6ff;
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 14px;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.15);
}

.sidebar-ad-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #1e293b);
  line-height: 1.4;
  margin-bottom: 8px;
}

.sidebar-ad-card__desc {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
  margin-bottom: 16px;
}

.sidebar-ad-card__price {
  font-size: 0.85rem;
  color: var(--text, #1e293b);
  margin-bottom: 16px;
}

.sidebar-ad-card__price strong {
  font-size: 1.1rem;
  color: var(--primary, #1a2b6d);
  font-weight: 800;
}

.sidebar-ad-card__cta {
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: var(--radius-md, 8px);
  background: var(--primary, #1a2b6d);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.sidebar-ad-card__cta:hover {
  background: var(--primary-hover, #142252);
}

/* Hide ad widget on screens smaller than 1100px */
@media (max-width: 1100px) {
  #sidebar-ad-slot {
    display: none !important;
  }
}

/* Final public-header fit guard after adapter overrides. */
@media (max-width: 420px) {
  .header-inner {
    gap: 6px !important;
  }

  .header-right {
    gap: 6px !important;
    margin-left: 0 !important;
  }
}

/* Final mobile width guard: a one-column CSS grid still uses the minimum
   content width of its children unless the track and grid items are allowed
   to shrink explicitly. This was making the homepage news column 440px wide
   on 320-420px viewports, so the right side of every card was clipped. */
@media (max-width: 1024px) {
  .layout-2col {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .layout-2col > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .news-grid,
  .hero-grid,
  .knowledge-grid,
  .community-grid,
  .stats-grid,
  .gallery-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .news-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Keep every top-level category on the same vertical axis. The base mobile
   rule adds an 8px start margin to non-first roots, but these roots already
   occupy the full list width and therefore became visibly misaligned. */
@media (max-width: 1024px) {
  #category-chips-container .category-chip--root {
    margin-inline-start: 0 !important;
  }
}

/* Responsive sponsored banners: keep the two promotions in normal document
   flow below the header instead of hiding them or pinning them over content. */
.promo-mobile-strip {
  position: relative;
  z-index: 90;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1440px) {
  .promo-mobile-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 24px 0;
  }

  .promo-mobile-strip .sponsored-card[hidden] {
    display: none !important;
  }

  .promo-mobile-strip .sponsored-card {
    position: relative;
    inset: auto;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 92px;
    max-height: 112px;
    border-radius: 12px;
    transform: none;
  }

  .promo-mobile-strip .sponsored-card__thumbnail {
    width: 104px;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
  }

  .promo-mobile-strip .sponsored-card__body {
    min-width: 0;
    overflow: hidden;
    padding: 10px 12px;
  }

  .promo-mobile-strip .sponsored-card__label {
    top: 7px;
    left: 7px;
    padding: 3px 6px;
    font-size: 0.56rem;
  }

  .promo-mobile-strip .sponsored-card__title {
    display: -webkit-box;
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .promo-mobile-strip .sponsored-card__desc {
    display: none;
  }

  .promo-mobile-strip .sponsored-card__action {
    justify-content: flex-start;
    font-size: 0.68rem;
  }
}

@media (max-width: 767px) {
  .promo-mobile-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 16px 0;
  }

  .promo-mobile-strip .sponsored-card {
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 78px;
    max-height: 96px;
  }

  .promo-mobile-strip .sponsored-card__thumbnail {
    width: 84px;
    min-height: 78px;
  }

  .promo-mobile-strip .sponsored-card__body {
    padding: 8px 10px;
  }
}