/* MissAV-like styling for NaughtyWP (Bootstrap-based) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
/* Global dark palette (MissAV-like) */
:root,
[data-bs-theme="dark"]{
  --bs-body-bg: #0b0f17;        /* page backdrop */
  --bs-body-color: #e5e7eb;     /* base text */
  --bs-dark: #0e121a;           /* for .bg-dark (header/footer) */
  --bs-secondary-bg: #0f131b;   /* subtle panels */
  --bs-card-bg: #111317;        /* card background */
  --bs-border-color: #1f2430;   /* borders */
}

body{ background-color: var(--bs-body-bg) !important; color: var(--bs-body-color); }

/* Make dark cards match palette */
.card.bg-dark{ background-color: var(--bs-card-bg) !important; }

/* Optional: soften header dark panel */
.header.bg-dark{ background-color: rgba(10,12,18,0.95) !important; }

/* Ensure Polylang language switcher dropdown above cards */
.header .navbar .lang-switcher, .header .navbar .lang-switcher *,
.header .navbar .pll-switcher, .header .navbar .pll-switcher *,
.header .navbar .dropdown-menu.lang, .header .navbar .pll-parent-menuitem .sub-menu,
.header .navbar .pll-parent-menuitem .dropdown-menu,
.header .navbar .menu .pll-switcher .sub-menu,
.header .navbar .menu .pll-switcher .dropdown-menu{
  position: relative;
  z-index: 1100; /* above cards and video-preview (z-index: 1) */
}

/* Also ensure nav dropdowns sit above content */
.header .navbar .dropdown-menu{ z-index: 1050; }



/* Utility: Visually hidden (for accessible hidden H1) */
.visually-hidden { 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; }

/* Sticky header look */
.header.sticky-top { position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(6px); background-color: rgba(0,0,0,0.9) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.header.sticky-top .navbar { min-height: 56px; }
/* Center nav and force white links */
.navbar .navbar-nav { justify-content: center; }
.navbar .navbar-nav .nav-link{ color:#fff !important; }

/* Mobile compact language switcher (flag-only) */
.mobile-tools{ display:flex; align-items:center; gap:.5rem; }
.mobile-lang-switcher{ position: relative; }
.mobile-lang-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:6px; background:transparent; }
.mobile-lang-switcher > .mobile-lang-btn img{ display:block; width:24px !important; height:16px !important; object-fit:cover; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; filter: saturate(1.08) contrast(1.05); }
/* ensure dropdown items not affected by above rule */
.mobile-lang-dropdown .mobile-lang-item img{ width:auto; height:auto; }
.mobile-lang-dropdown{ position:absolute; top:100%; right:0; background:#111; border:1px solid #333; border-radius:4px; padding:6px; display:none; z-index:1100; }
.mobile-lang-dropdown .mobile-lang-item{ display:flex; align-items:center; gap:.5rem; padding:6px; text-decoration:none; white-space:nowrap; }
.mobile-lang-dropdown .mobile-lang-item img{ display:inline-block; width:auto; height:auto; vertical-align:middle; }
.mobile-lang-switcher.open .mobile-lang-dropdown{ display:block; }

/* Style items in mobile-lang-dropdown (flag + name) */
.mobile-lang-item{ color:#fff; white-space:nowrap; display:flex; align-items:center; gap:.5rem; }
.mobile-lang-name{ font-size: 13px; opacity:.9; }
/* Ensure dropdown is above video cards */
.header .mobile-lang-dropdown{ z-index: 1100; }



/* Hide Polylang language items inside the collapsed navbar on mobile */
@media (max-width: 991.98px){
  /* Hide any Polylang language switcher/menu items inside collapsed navbar */
  #naughtywpNavbar .menu-item-language,
  #naughtywpNavbar .pll-parent-menuitem,
  #naughtywpNavbar li.lang-item,
  #naughtywpNavbar .pll-switcher,
  #naughtywpNavbar .lang-switcher,
  #naughtywpNavbar li[class*="lang"],
  #naughtywpNavbar li[class*="pll"],
  #naughtywpNavbar li[id*="lang"],
  #naughtywpNavbar li[id*="pll"] { display:none !important; }
}

@media (min-width: 992px){ .mobile-tools{ display:none !important; } }

.navbar .navbar-nav .nav-link:hover{ color:#fff !important; opacity:.9; }


/* Search style (header inline) */
.navbar .navbar-search .form-control { border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; background-color: #111317; }
.navbar .navbar-search .form-control::placeholder { color: #9ca3af; }
.navbar .navbar-search .btn.btn-primary { background-color: rgba(var(--bs-link-hover-color-rgb),1); border-color: rgba(var(--bs-link-hover-color-rgb),1); }
.navbar .navbar-search .btn.btn-primary:hover { filter: brightness(0.9); }


/* Big hero search below header (MissAV-like) */
.search-hero{ padding: 2rem 0; }
.search-hero .input-group{ height: 48px; max-width: 544px; margin: 0 auto; }
.search-hero .form-control{ height: 48px; background:#ffffff; color:#374151; font-size: 16px; padding-left: 14px; padding-right: 90px; border:1px solid #d1d5db; border-right: 0; border-radius: 6px 0 0 6px; }
.search-hero .form-control::placeholder{ color:#9ca3af; }
.search-hero .btn.btn-primary{ height:48px; width: 120px; border-radius: 0 6px 6px 0; background: #e5e7eb; border:1px solid #d1d5db; border-left: 0; color:#4b5563; font-weight:600; }
.search-hero .btn.btn-primary:hover{ filter:brightness(.97); }


/* Mobile spacing for hero search */
@media (max-width: 576px){
  .search-hero{ padding: 1rem 1rem; }
  .search-hero .input-group{ max-width: 100%; }
}

/* Section header (title + more link) */
.section-header { display:flex; align-items:center; justify-content:space-between; padding-top: .75rem; padding-bottom: .5rem; }
.section-title { margin:0; font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.2; }
.section-more { font-size: .875rem; color: #f87171; text-decoration: none; }
.section-more:hover { color: #ef4444; text-decoration: none; }

/* Cards */
.video-preview-container { overflow: hidden; border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.missav-card .card-img-top { transition: transform .25s ease, opacity .25s ease; }
.missav-card:hover .card-img-top { transform: scale(1.02); }

/* Skeleton */
@keyframes skeleton-loading { 0%{ background-position: -200px 0 } 100%{ background-position: calc(200px + 100%) 0 } }
.skeleton-image { background: linear-gradient(90deg,#1f2937 25%,#283141 50%,#1f2937 75%); background-size: 200px 100%; animation: skeleton-loading 1.5s infinite; border-radius: .5rem; height: 0; padding-bottom: 150%; }
.skeleton-line { background: linear-gradient(90deg,#272b33 25%,#2f3542 50%,#272b33 75%); background-size: 200px 100%; animation: skeleton-loading 1.5s infinite; border-radius: .25rem; }

/* Category label badge */
.category-label { font-weight: 600; letter-spacing: .2px; }

/* Grid spacing tweaks */
.row.g-3 > [class^="col-"] { margin-bottom: .5rem; }

/* Footer counter tint */
#imageCount .rounded-pill { background-color: rgba(239, 68, 68, 0.25) !important; }



/* Single page 2-col layout hardening (Option A) */

/* Ensure Top View Today sidebar hidden on mobile (global) */
@media (max-width: 575.98px){
  .single-sidebar{ display:none !important; }
}

@media (min-width: 576px){
  .single-layout{
    display:flex !important; flex-wrap: nowrap !important; align-items: flex-start;
    gap: .25rem !important; /* chừa 4px khoảng trống giữa 2 cột */
    --bs-gutter-x: .5rem; /* gutter tổng vừa phải */
    margin-top: 3rem; /* tăng gấp đôi lần nữa khoảng trống so với thanh menu */
  }
  .single-layout > .single-main{ flex: 1 1 auto; min-width: 0; padding-right: .25rem !important; }
  .single-layout > .single-sidebar{ flex: 0 0 auto; width: 280px; padding-left: .25rem !important; }
}
@media (min-width: 992px){
  .single-layout{ gap: .375rem !important; --bs-gutter-x: .75rem; margin-top: 4rem; }
  .single-layout > .single-sidebar{ width: 300px; }
}
@media (min-width: 1200px){
  .single-layout{ gap: .5rem !important; --bs-gutter-x: 1rem; margin-top: 4rem; }

/* --- Sidebar Top View Today: mimic MissAV --- */
.sidebar-top-today h2{ font-size: 1rem; margin-bottom: 1rem; font-weight: 600; }
.sidebar-top-today .item{ display:flex; gap:.5rem; margin-bottom:1rem; }
.sidebar-top-today .thumb{ position:relative; width:165px; aspect-ratio:16/9; overflow:hidden; border-radius:.5rem; }
.sidebar-top-today .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sidebar-top-today .thumb .badge-cat{ position:absolute; left:.25rem; bottom:.25rem; font-size:.75rem; color:#e5e7eb; background:rgba(31,41,55,.8); padding:.125rem .375rem; border-radius:.375rem; }
.sidebar-top-today .title{ width:119px; font-family:'Inter', system-ui, sans-serif; font-size:13px; line-height:1.3; color:#e5e7eb; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 575.98px){
  .sidebar-top-today .item{ gap:.5rem; }
  .sidebar-top-today .thumb{ width: 50%; }
  .sidebar-top-today .title{ width:50%; -webkit-line-clamp:3; }
}


/* Hide sidebar on mobile */
@media (max-width: 575.98px){
  .single-sidebar{ display:none !important; }
}

/* Enable preview in sidebar like homepage */
.sidebar-top-today .thumb{ position:relative; }
.sidebar-top-today .thumb .video-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease; }
.sidebar-top-today .thumb:hover .video-preview{ opacity:1; }

/* Sidebar Top View Today: zoom fallback when no preview */
.sidebar-top-today .video-preview-container:hover:not(.has-preview) .card-img-top{ transform: scale(1.03); }
.sidebar-top-today .card-img-top{ transition: transform .25s ease; }

/* Single: Title sizing + separator line before description */
.single .single-main .title h1.display-6{ font-size:30px !important; line-height:1.25; }
.single .single-main .title{ border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:.5rem; margin-bottom:.5rem; }



  .single-layout > .single-sidebar{ width: 320px; }
}