/* ============================================
   UNIFIED TYPOGRAPHY SYSTEM - MONTSERRAT
============================================ */

/* Override main body fonts - USE SAME FONT AS style.css */
html, body {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, button, input, select, textarea {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #000;
}

/* Override tagcloud Arial */
.tagcloud a {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Override widget title Arial */
h3.widget-title {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* Override sidebar Verdana/Arial */
#main #sidebar {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Override blockquote Georgia */
.article-content .content-page blockquote {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
}

/* Override ajax auth Arial */
form.ajax-auth {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Override inline h3 Arial */
.inline h3 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================
   MODERN TYPOGRAPHY SYSTEM
============================================ */

/* Import Google Fonts with optimized loading */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* GLOBAL FONT RESET - USE SYSTEM FONTS - NO EXTERNAL DEPENDENCIES */
*:not([class*="fa"]):not(i):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-),
*:before:not([class*="fa"]):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-),
*:after:not([class*="fa"]):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-) {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ENSURE FONTAWESOME ICONS KEEP THEIR FONT */
.fa, .fas, .far, .fal, .fab, 
[class^="fa-"], [class*=" fa-"],
i[class^="fa"], i[class*="fa"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.875rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 500; }
h5 { font-size: 1.125rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }

/* PARAGRAPHS & TEXT */
p, span, div {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.7;
}

/* BUTTONS & INPUTS - PRESERVE ICONS */
button:not([class*="fa"]), 
input:not([class*="fa"]), 
select:not([class*="fa"]), 
textarea:not([class*="fa"]) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
}

/* ENSURE BUTTON ICONS WORK */
button i, .btn i, .button i {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

/* LINKS */
a {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* ============================================
   NEW RESPONSIVE MENU SYSTEM + BASE
============================================ */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* RESET TOÀN BỘ LAYOUT CHO FULL WIDTH */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

body{
  padding-top: 70px !important;
  margin-top: 0 !important;
}

/* ĐẢM BẢO CONTENT KHÔNG BỊ CHE BỞI FIXED MENU */
#page {
  padding-top: 0 !important;
  margin-top: 0 !important;
  z-index: 1 !important; /* Much lower than search panel */
  position: relative !important;
}

#main {
  padding-top: 0 !important;
  margin-top: 0 !important;
  z-index: 1 !important; /* Much lower than search panel */
  position: relative !important;
}

/* ẨN HEADER CŨ KHI SỬ DỤNG RESPONSIVE MENU MỚI */
header {
  display: none !important;
}

/* ẨN CÁC MOBILE TEMPLATE CŨ */
.mobile_search,
#header-mobile-menu-toggle,
#header-mobile-search-toggle {
  display: none !important;
}

/* ĐẢM BẢO LAYOUT CONTAINER RESPONSIVE - KHÔNG GIỚI HẠN DESKTOP */
#page {
  margin: 0 auto !important;
  padding: 0 16px !important;
  width: 100% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Chỉ giới hạn max-width trên màn hình rất lớn để tránh text quá dài */
@media (min-width: 1600px) {
  #page {
    max-width: 1400px;
  }
}

#main {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* KHÔI PHỤC CONTAINER DESIGN - RESPONSIVE FULL WIDTH */
.container, .wrapper, div[class*="container"] {
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Chỉ giới hạn container trên màn hình rất lớn */
@media (min-width: 1600px) {
  .container, .wrapper, div[class*="container"] {
    max-width: 1400px;
  }
}

/* ĐẢM BẢO MOZAIQUE TRONG CONTAINER */
.mozaique {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================
   NAVIGATION 
============================================ */

nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid #242424;
  z-index: 1000; /* Above search panel */
}

nav .wrapper{
  margin: 0 auto;
  height: 70px;
  display: flex; /* MOBILE DEFAULT */
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 16px;
  width: 100%;
}

/* Chỉ giới hạn navigation trên màn hình rất lớn */
@media (min-width: 1600px) {
  nav .wrapper {
    max-width: 1400px;
  }
}

/* LOGO */
.logo a{
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.5px;
}

/* MOBILE BUTTONS - PRESERVE FONTAWESOME */
.btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: none;
  padding: 6px;
  z-index: 950;
  border: none;
  background: none;
}

.btn i {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

.btn.menu-btn{ 
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.btn.mobile-search-btn{ 
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Hide any text in mobile search button - only show icon */
.btn.mobile-search-btn {
  font-size: 0 !important;
  line-height: 0 !important;
}

.btn.mobile-search-btn i {
  font-size: 18px !important;
  line-height: normal !important;
}

/* Hide text in hero search button on mobile - only show icon */
@media (max-width: 970px) {
  .hero-search-btn {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 20px !important;
  }
  
  .hero-search-btn i {
    font-size: 16px !important;
    line-height: normal !important;
  }
}

.btn:hover {
  color: #ddd;
}

/* MENU LIST */
.nav-links{
  display: flex;
  list-style: none;
  gap: 10px;
}

.nav-links li a{
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  padding: 8px 18px;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.nav-links li a:hover{
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}

/* ============================================
   DESKTOP SEARCH
============================================ */
.desktop-search{
  position: relative;
  justify-self: end;
}

.desktop-search-icon{
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 12px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: all 0.25s ease;
}

.desktop-search-icon:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.75);
}

.desktop-search-icon i{
  font-size: 18px;
  color: #e4e4e4;
  transition: all 0.25s ease;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

.desktop-search-icon:hover i{
  color: #fff;
  transform: scale(1.1);
}

.desktop-search-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 438px;
  background: rgba(24, 24, 24, 0.95);
  /* border: 1px solid rgba(255,255,255,0.15); */
  border-radius: 12px;
  /* padding: 1px; */
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 950;
}

.desktop-search.expanded .desktop-search-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.desktop-search-box{
  display: flex;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  overflow: hidden;
}

.desktop-search-box input{
  flex: 1;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  outline: none;
  letter-spacing: 0.3px;
  min-height: 20px;
}

.desktop-search-box input::placeholder{
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

.desktop-search-box button{
  width: 56px;
  min-height: 52px;
  background: rgba(255,255,255,0.1);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-search-box button:hover{
  background: rgba(255,255,255,0.2);
}

.desktop-search-box button i{
  color: #fff;
  font-size: 16px;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

/* ============================================
   DESKTOP FIX (logo - menu - search)
============================================ */

@media(min-width: 971px){

  nav .wrapper{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .btn{
    display: none !important;
  }

  .nav-links{
    justify-self: center;
    display: flex !important;
  }

  .close-btn{
    display: none !important;
  }

  .desktop-search{
    display: flex !important;
  }
}

/* ============================================
   MOBILE RESPONSIVE
============================================ */

@media(max-width: 970px){

  .btn{
    display: block !important;
    z-index: 1000 !important;
    position: absolute !important;
  }

  nav .wrapper{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 60px;
  }

  .desktop-search{
    display: none !important;
  }

  .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, #1f1f1f 100%);
    flex-direction: column;
    padding-top: 90px;
    transition: .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 901;
    box-shadow: 8px 0 32px rgba(0,0,0,0.6);
    border-right: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
  }

    .nav-links li a {
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        margin: 0 12px;
        border-radius: 12px;
        display: block;
        letter-spacing: 0.3px;
    }

  .nav-links li a:hover{
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
    color: #fff;
    padding-left: 32px;
    border-bottom-color: rgba(255,255,255,0.2);
    transform: translateX(6px);
    box-shadow: 0 8px 25px rgba(255,255,255,0.1);
  }

  .nav-links li a:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
    transition: height 0.3s ease;
  }

  .nav-links li a:hover:before{
    height: 70%;
  }

 @media (max-width: 970px) {
    .close-btn {
        display: block;
        position: absolute;
        top: 30px;
        right: 16px;
        font-size: 20px;
        cursor: pointer;
        color: #fff;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Ẩn menu-btn khi menu mobile đang mở */
    body[style*="overflow: hidden"] .btn.menu-btn {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease;
    }
}

  .close-btn:hover{
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg) scale(1.1);
    border-color: rgba(255,255,255,0.3);
  }

  .menu-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    z-index: 800;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .menu-overlay.show{
    opacity: 1;
    visibility: visible;
  }
}


/* Mobile Search Panel - Default State */
html body div.mobile-search-panel#mobile-search-panel {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(18, 18, 18, 0.95) !important;
    padding: 0 16px !important;
    z-index: 998 !important;
    backdrop-filter: blur(8px) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease, padding 0.3s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile Search Panel - Open State */
html body div.mobile-search-panel#mobile-search-panel.open {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 120px !important;
    min-height: 80px !important;
    padding: 20px 16px !important;
    margin: 0 !important;
    background: rgba(18, 18, 18, 0.95) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    z-index: 998 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
    transition: max-height 0.4s ease, padding 0.3s ease !important;
}

/* Mobile Search Box */
.mobile-search-box {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  min-height: 40px;
}

.mobile-search-box input {
  flex: 1;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  outline: none;
  letter-spacing: 0.3px;
  min-height: 24px;
}

.mobile-search-box input::placeholder {
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

.mobile-search-box button {
  width: 60px;
  min-height: 40px;
  background: rgba(255,255,255,0.1);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-search-box button:hover {
  background: rgba(255,255,255,0.2);
}

.mobile-search-box button i {
  color: #fff;
  font-size: 16px;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

/* Mobile Search Overlay */
.mobile-search-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 2147483646 !important; /* Just below mobile search panel */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-search-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 2147483646 !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

/* SEARCH PANEL OPEN STATE - HIGHEST PRIORITY */
.search-panel.open,
#search-panel.open {
  max-height: 120px !important;
  min-height: 80px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background: rgba(255, 0, 0, 0.98) !important; /* DEBUG RED */
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 9999999 !important;
  overflow: visible !important;
}

/* Mobile responsive adjustments */
@media(max-width: 768px) {
  .mobile-search-panel {
    top: 70px;
  }
}

@media(max-width: 480px) {
  .mobile-search-panel {
    padding: 0 8px;
  }
  
  .mobile-search-panel.open {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  
  .mobile-search-box {
    margin: 0 8px;
    border-radius: 10px;
  }
  
  .mobile-search-box input {
    padding: 14px 16px;
    font-size: 15px;
  }
  
  .mobile-search-box button {
    width: 55px;
  }
}

.search-box{
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  min-height: 40px;
}

.search-box input{
  flex: 1;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  outline: none;
  letter-spacing: 0.3px;
  min-height: 24px;
}

.search-box input::placeholder{
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

.search-box button{
  width: 60px;
  min-height: 40px;
  background: rgba(255,255,255,0.1);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-box button:hover{
  background: rgba(255,255,255,0.2);
}

.search-box button i{
  color: #fff;
  font-size: 16px;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

/* SEARCH OVERLAY - DIM BACKGROUND */
.search-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 2147483646 !important; /* Just below search panel */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.search-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================
   CONTENT TYPOGRAPHY IMPROVEMENTS
============================================ */

/* VIDEO TITLES */
.thumbBlock h2,
.thumbBlock h2 a {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 1px 0 2px 0;
}

.thumbBlock h2 a:hover {
  color: #ff6b6b;
}

/* VIDEO METADATA */
.thumbBlock .metadata {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  line-height: 1.3;
}

/* DURATION BADGES */
.duration {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* SINGLE PAGE TITLES */
.single-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 16px;
}

/* CATEGORY TITLES */
.category-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px;
}

/* BUTTONS */
button,
.btn,
.button,
input[type="submit"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3px;
}

/* PAGINATION */
.pagination a,
.page-numbers a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

/* HOME BUTTONS & NAVIGATION TABS */
ul.home-buttons li a,
ul.home-buttons li,
.performer-block ul.tabs li {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
}

ul.home-buttons li.right-info a,
ul.home-buttons li.settings-icon a {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* NAVIGATION BADGES */
ul.home-buttons li a .navbadge,
.dropdown-content a span.navbadge {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* VISIBLE DESKTOP/MOBILE ELEMENTS */
.visible-desktop,
.visible-mobile {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
}

/* COPYRIGHT & FOOTER */
.copyright,
.copyright-l,
.copyright-r,
.powered_by,
footer .terms,
footer .slogan,
#footer-menu {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}

/* SIDEBAR & WIDGET TITLES */
#sidebar h3,
.widget-title,
h3.widget-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
}

/* SIDEBAR LINKS */
#sidebar ul li a,
#footer-widgets ul li a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 14px;
}

/* ADDITIONAL TYPOGRAPHY FIXES */
.tags_list li a,
.tagcloud a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 13px;
}

/* FORM ELEMENTS */
.s_input,
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 20px;
}

/* TAB CONTENT & COMMENTS */
.it-comments,
.comment-body,
.commentlist .comment-author {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

/* PERFORMER & CATEGORY META */
.performer-block .model-list p,
.tax-title,
.metadata {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
}

/* ============================================
   LEGACY RESPONSIVE STYLES (KEEP EXISTING)
============================================ */

.bp-wrap .thumbBlock {
  float: left;
}
@media only screen and (max-width:1216px){
.ft-widget img, .ft-widget embed, .ft-widget object, .ft-widget iframe {width: 100%;}

}
@media only screen and (max-width:1050px){
.v-overlay {display: none !important;}
/*.thumbInside img {height: 165px;}*/
.thumbInside img {height: 165px;object-fit: cover;}

}
@media only screen and (max-width:1024px){
#sidebar {display: none;}
}
@media only screen and (min-width:920px){
#main {min-height:600px;}
}
@media only screen and (max-width:920px){

header .header-icons a.user {display: block;}
.categories_mobile, #nav-toggle {display: none !important;}
header .header_mobile_icons{display: block;}
.dekstop_search {display: none;}
#x-messages {margin-top: 8px;}
header img#siteLogo {margin-top: 0px !important;}
div.inline {float:none;width: 100%;display: block;border-right:none !important;padding:10px;}
#mainMenu, #secondaryMenu, span.stripe_msg, #wpadminbar {display: none;}
.mobile_search {
  -webkit-transition:bottom .3s;
  -moz-transition:bottom .3s;
  -o-transition:bottom .3s;
  transition:bottom .3s;
position: fixed;
width: 100%;
text-align: center;
top: 40px;
z-index: 999;background:#161616; border-bottom: 1px solid #333;
padding-bottom: 8px;box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.mobile_search #searchForm {float: none;}
.mobile_search #searchForm input#q {width: 70%;border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;}
header {width: 100%;height: 40px;position: fixed;margin:0;padding:0;top: 0;background: #000;margin-left: -1px;z-index: 999;background:#fff;}
.redStripe {background: none !important;color: #000 !important;border-bottom: 1px solid #000;}
.redStripe a {color: #000 !important;}
.whiteStripe {padding:0;margin:0;background: #000;}
#mainLogo {float: none;display: block;max-width: 300px;position: relative;left: 10%;margin: 0 auto;}
#main {margin-top: 40px;}
.performer-block .model-list p {width: 50%}
}
@media screen and ( max-width: 780px ) {
.quarter {width: 48%;}
.quarter.left {margin-right: 2%;}
.footer-widgets-1,.footer-widgets-2,.footer-widgets-3,.footer-widgets-4{width: 48.717948717948715%;float: left;}
.quarter.right {margin-left: 2%;}
}
/* RESPONSIVE CONTAINER TRÊN MOBILE */
@media only screen and (max-width:767px){
#x-messages {margin-top: -4px;}

/* ĐẢM BẢO BODY PADDING ĐÚNG TRÊN MOBILE NHỎ */
body {
  padding-top: 70px !important;
  font-size: 14px;
  line-height: 1.6;
}

/* MOBILE TYPOGRAPHY */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: 1.125rem; }

/* MOBILE SINGLE TITLE */
h1.single-title {
  font-size: 18px !important;
  line-height: 1.3;
  margin: 8px 3px 8px 3px;
}

.bp-dir-search-form, .bp-search {
    width: 100% !important;
}
.mozaique, #first_related, #second_related {grid-template-columns: repeat(2, minmax(50%, 1fr));}
.thumbInside img {height: 120px;}

/* RESPONSIVE CONTAINER  MOBILE */
#page {
  padding: 0 8px !important;
}

.container, .wrapper, div[class*="container"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
}
@media only screen and (max-width:640px){
.visible-desktop {display: none;}
.visible-mobile {display: inline-block;}
ul.home-buttons li a .navbadge {
    padding: 2px 4px;
    font-size: 12px;
}
}
@media only screen and (max-width:580px){

.footer-widgets-1,.footer-widgets-2,.footer-widgets-3,.footer-widgets-4{width: 98.7%;float: left;}
#footer-widgets ul li a {width: 100%;}
a#back-to-top { bottom: 10px;right: 5px;}
/* ============================================
   TAB BUTTONS RESPONSIVE FIXES
============================================ */

/* Hide all tab content by default */
.tabsContainer .tabs div.tab {
    display: none !important;
}

/* Only show tab content when explicitly opened */
.tabsContainer .tabs div.tab.active {
    display: block !important;
}

/* Ensure tabButtons always stay on one line */
.tabsContainer ul.tabButtons {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 4px !important;
    padding: 10px 5px !important;
    margin-left: 3px !important;
}

/* Hide scrollbar for webkit browsers */
.tabsContainer ul.tabButtons::-webkit-scrollbar {
    display: none !important;
}

/* Tab button base responsive styling */
.tabsContainer ul.tabButtons li.headtab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 3px 0 0 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    min-width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tabsContainer ul.tabButtons li.headtab i {
    margin-right: 4px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.tabsContainer ul.tabButtons li.headtab .tab-txt {
    font-size: 13px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .tabsContainer ul.tabButtons {
        padding: 8px 3px !important;
        gap: 2px !important;
        margin-left: 2px !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab {
        padding: 5px 8px !important;
        font-size: 12px !important;
        margin: 0 2px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab i {
        font-size: 11px !important;
        margin-right: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab .tab-txt {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .tabsContainer ul.tabButtons {
        padding: 6px 2px !important;
        gap: 1px !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab {
        padding: 5px 9px !important;
        font-size: 11px !important;
        margin: 0 1px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab i {
        font-size: 10px !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab .tab-txt {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Ultra mobile adjustments */
@media (max-width: 320px) {
    .tabsContainer ul.tabButtons li.headtab {
        padding: 3px 5px !important;
        font-size: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab i {
        font-size: 9px !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
    
    .tabsContainer ul.tabButtons li.headtab .tab-txt {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

.tabButtons {margin-left: 3px !important;}

/* ============================================
   BUTTONS THEME STYLES - LIGHT & DARK
============================================ */

/* Light Theme Buttons (default) */
ul.home-buttons {border-bottom: 1px solid #000;}
ul.home-buttons li {border: 1px solid #000;background: #000;}
ul.home-buttons li, .performer-block ul.tabs li {border: 1px solid #000;background: #000;}
ul.home-buttons li:hover .navbadge {color: #fff;}
ul.home-buttons li a, .performer-block ul.tabs li {color: #fff !important;}
ul.home-buttons li:hover a, ul.home-buttons li.active a, ul.home-buttons li.settings-icon a, ul.home-buttons li.right-info a, .performer-block ul.tabs li.current {color: #000 !important;}
ul.home-buttons li.active a {color: #000;}
ul.home-buttons li.right-info {color: #000;}
ul.home-buttons li.active a .navbadge {color: #fff !important;}

/* Dark Theme Buttons Override */
body.dark-theme ul.home-buttons {border-bottom: 1px solid #555;}
body.dark-theme ul.home-buttons li {border: 1px solid #555;background: #555;}
body.dark-theme ul.home-buttons li, body.dark-theme .performer-block ul.tabs li {border: 1px solid #555;background: #555;}
body.dark-theme ul.home-buttons li a, body.dark-theme .performer-block ul.tabs li {color: #fff !important;}
body.dark-theme ul.home-buttons li:hover a, body.dark-theme ul.home-buttons li.active a, body.dark-theme ul.home-buttons li.settings-icon a, body.dark-theme ul.home-buttons li.right-info a, body.dark-theme .performer-block ul.tabs li.current {color: #e1e1e1 !important;}
body.dark-theme ul.home-buttons li.active a {color: #e1e1e1 !important;}

/* ============================================
   LAYOUT 2 STYLES (CONDITIONAL) - NEW.CSS MERGED
============================================ */

/* Layout 2 specific styles - only applied when body has 'layout-2' class */
body.layout-2 header img#siteLogo {display:block;position:relative;margin-top:5.6px;max-width: 150px;}
body.layout-2 .showMore, body.layout-2 .redStripe strong {display: none !important}
body.layout-2 .redStripe strong {font-size: 120%;line-height: 26px;}
body.layout-2 .post-categories {margin-right: 5px;}
body.layout-2 .post-channels a {background: #000 !important;color: #fff !important;margin: 0 !important;margin-left: -1px !important;margin-right: -1px !important;}
body.layout-2 .theme-switcher {font-size: 130%;padding-left: 1px !important;padding-right: 1px !important;}
body.layout-2 .metadata, body.layout-2 .tax-title, body.layout-2 .thumbInside p {text-align: center;}
body.layout-2 #main #video-tags a {display: inline-block; text-decoration: none; text-transform: lowercase; padding: 4px; background: #000;}
body.layout-2 #main #video-tags .post-tags a {background: #333; margin-right: 5px;}
body.layout-2 #main #video-tags .post-performers a {margin-right: 5px;}
body.layout-2 .thumbBlock p.metadata .duration {font-size: 13px; background: #888; color: #000;}

@media only screen and (min-width:920px){
body.layout-2 header #secondaryMenu .filters a {width: 100% !important;float: left !important;color: #fff !important;background: #000;padding: 3px 6px;}
body.layout-2 header #secondaryMenu .filters {display: none;padding: 3px 6px;max-width: 160px;z-index: 105;margin-top: 135px;}
body.layout-2 header #secondaryMenu {position: absolute;top: 5px;right: 0;display: inline-block;overflow: visible;}
body.layout-2 input#q {
    background: #fff !important;
    border: 2px solid #a8a8a8 !important;
    border-right-color: rgb(168, 168, 168);
    border-right-style: solid;
    border-right-width: 2px;
    border-right: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;border-top-left-radius: 3px;color: #888 !important;font-size: 20px;height: 38px;margin: 0;padding: 4px 10px;}
body.layout-2 header h2.secondary .redText {font-size: 20px;}
body.layout-2 header h2.secondary {margin-top: 17px;font-weight: bold;font-size: 20px;color: #fff}
body.layout-2 #searchSubmit {
    border: 2px solid #a8a8a8 !important;
    border-left-color: rgb(168, 168, 168);
    border-left-style: solid;
    border-left-width: 2px;
    border-left: 0 !important;
    display: inline-block;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border-top-right-radius: 0px;border-bottom-right-radius: 0px;-webkit-border-top-right-radius: 3px;-moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;-webkit-border-bottom-right-radius: 3px;-moz-border-radius-bottomright: 3px;border-bottom-right-radius: 3px;font-size: 16px;font-weight: 400;height: 38px;margin: 0;padding: 0 10px;-webkit-transition: background .2s;-o-transition: background .2s;-moz-transition: background .2s;transition: background .2s;position:absolute;margin-left: -2px;}
body.layout-2 #searchForm .search-input:focus {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
body.layout-2 .whiteStripe {margin-top: 5px;margin-bottom: 10px;}
body.layout-2 .redStripe .showMore {display: none !important;border-bottom: none !important;}
body.layout-2 header #secondaryMenu .login-logged .languages-switcher{visibility: hidden;width: 0;height: 0;margin: 0;padding: 0;position: relative;right: 16px;}
body.layout-2 .languages-switcher select, body.layout-2 .languages-switcher span {visibility: visible;width: 90px;display: inline-block;margin-left: 10px;}
body.layout-2 .languages-switcher input, body.layout-2 .languages-switcher a {display: none;}
body.layout-2 .account_btn {border: none !important; padding: 6px 5px !important;border-radius: 0 !important;min-width: 110px;font-size: 130%;box-sizing: border-box;text-transform: uppercase;font-weight: bold;}
body.layout-2 .dropdown {position: relative !important;display: inline-block !important;}
body.layout-2 .dropdown-content {z-index: 10;display: none;position: absolute !important;background-color: #000 !important;min-width: 180px;overflow: auto;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
body.layout-2 .dropdown-content a {color: #fff !important;padding: 12px 16px !important;text-decoration: none;display: block;border: 0 !important;}
body.layout-2 header #secondaryMenu .login-logged, body.layout-2 .whiteStripe {overflow: visible;}
body.layout-2 #main {z-index: 9;}
body.layout-2 .show {display: block;}
body.layout-2 .dropdown a:hover {background-color: #fff !important;color: #000 !important;}
body.layout-2 a.new_login{border: 0 !important;background: transparent !important;border-radius: none !important;}
body.layout-2 header {display: block;position: relative;overflow: visible;}

body.layout-2 header #secondaryMenu .login-logged a, body.layout-2 header #secondaryMenu .login-logged a:hover {background:transparent;color: #000;border: none;}
body.layout-2 #x-messages .inner, body.layout-2 .x-messages .inner {border: none !important;}
body.layout-2 #main .redStripe, body.layout-2 .blackStripe {background: transparent !important;color: #000;overflow: visible;}
body.layout-2 #page {max-width: 1300px;margin: 0 auto;overflow: hidden;}
}

/* Layout 2 Additional Styles */
body.layout-2 ul.home-buttons li {padding: 10px 14px;}
body.layout-2 ul.home-buttons li {padding: 8px 10px;}
body.layout-2 ul.home-buttons li:hover {background: transparent;}
body.layout-2 ul.home-buttons li a {font-size: 140%;padding: 1px 5px;}
body.layout-2 ul.home-buttons li.right-info {font-size: 100% !important;text-transform: uppercase;padding-bottom: 2px !important;margin-top: 8px;}
body.layout-2 ul.home-buttons li.settings-icon {font-size: 100% !important;padding-bottom: 2px !important;margin-top: 8px;}
body.layout-2 #nav-toggle{position: relative;float: left;display: block;margin-top: 0.9%;margin-right: 2px;margin-left: 3px;}
body.layout-2 #nav-toggle {cursor: pointer; padding: 10px 35px 16px 0px; }
body.layout-2 #nav-toggle span, body.layout-2 #nav-toggle span:before, body.layout-2 #nav-toggle span:after {cursor: pointer;border-radius: 2px;height: 5px;width: 28px;background: #a8a8a8;position: absolute;display: block;content: '';}
body.layout-2 #nav-toggle span:before {top: -10px;}
body.layout-2 #nav-toggle span:after {bottom: -10px;}
body.layout-2 #nav-toggle span, body.layout-2 #nav-toggle span:before, body.layout-2 #nav-toggle span:after {transition: all 200ms ease-in-out;}
body.layout-2 #nav-toggle.active span {background-color: transparent;}
body.layout-2 #nav-toggle.active span:before, body.layout-2 #nav-toggle.active span:after {top: 0;}
body.layout-2 #nav-toggle.active span:before {transform: rotate(45deg);}
body.layout-2 #nav-toggle.active span:after {transform: rotate(-45deg);}
body.layout-2 .tabsContainer ul.tabButtons li.headtab, body.layout-2 .btn-more {color: #fff;font-size: 15px !important;line-height: 0px!important;background: #404040 !important;padding: 6px 9px !important;background-image: none;font-size: 120%;border: 1px solid #737373 !important;transition: background-color 0.3s ease;-webkit-transition: background ease .2s,border ease .3s,-webkit-box-shadow ease .3s;transition: background ease .3s,border ease .3s,-webkit-box-shadow ease .3s;-o-transition: box-shadow ease .3s,background ease .3s,border ease .3s;-moz-transition: box-shadow ease .3s,background ease .3s,border ease .3s,-moz-box-shadow ease .2s;transition: box-shadow ease .3s,background ease .3s,border ease .3s;transition: box-shadow ease .3s,background ease .3s,border ease .3s,-webkit-box-shadow ease .3s,-moz-box-shadow ease .3s;}
body.layout-2 .tabsContainer ul.tabButtons li.headtab i {
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    margin-right: 8px !important;
}
body.layout-2 #videoTabs .nb_views {display: inline-block;font-size: 180%;min-width: 100px;line-height: 18px;font-weight: bold;text-align: left !important;vertical-align: left;margin-top: 5px;}
body.layout-2 #videoTabs .nb_views .text {font-size: 70%;text-transform: lowercase;}
body.layout-2 #voteYes, body.layout-2 .voteGroup .voteYes, body.layout-2 #voteNo, body.layout-2 .voteGroup .voteNo {margin: 0;border-radius: 2;-moz-border-radius: 2px;-webkit-border-radius: 2px;}
body.layout-2 #note-bar {height: 5px;width: 180px;overflow: hidden;margin: 5px 0 0 0;margin-left: 0px;position: absolute;border-radius: 3px;margin-left: -92px;}

@media only screen and (min-width:517px) {
body.layout-2 #tabVote {padding-bottom: 30px !important;}
}

body.layout-2 .newStripe {font-size: 140% !important;padding: 8px 4px;}
body.layout-2 #sidebar h3 {background: none !important;}
body.layout-2 #main a {
    font-size: 14px;
    text-decoration: none;
}
body.layout-2 .thumbInside p {margin-top:5px;} 
body.layout-2 .metadata {color: #aaa; font-size: 14px;} 
body.layout-2 .thumbInside .video-hd-mark {font-size:12px;background: #bd2405;} 
body.layout-2 input#q{font-size:18px;}
body.layout-2 #mobile_search #searchSubmit {
    font-size: 24px;
    background: #333;
    color: #ababab;
    border-left: 0;
    border: 1px solid #918e8c;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 0;
    margin-left: -5px;
    position: absolute;
}
body.layout-2 .tabsContainer ul.tabButtons li.headtab:hover, body.layout-2 .tabsContainer ul.tabButtons li.headtab.selected, body.layout-2 .btn-more:hover {
    background-color: #262626 !important;
    border-color: #545454 !important;
}
body.layout-2 .tabsContainer ul.tabButtons li.headtab {
    border: none !important;
    margin: 2px;
}
body.layout-2 .pagenavi {
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
}
body.layout-2 .pagenavi a {
    margin-top: 3px;
    border: 1px solid #dadada;
    padding: 6px 12px;
    margin-right: 3px;
    border-radius: 4px;
    display: inline-block;
}
body.layout-2 .pagenavi a.active {
    background: #333;
    color: #fff;
}
body.layout-2 .pagenavi a:hover {
    background: #333;
    color: #fff;
}
body.layout-2 .video-rank {
    font-size: .9em;
    position: absolute;
    top: 0;
    border-left: 3px solid #333;
    border-radius: 0 4px 4px 0;
    background: none repeat scroll 0 0 rgba(17,17,17,.6);
    margin-top: 2px;
    padding: 2px 4px;
    color: #fff
}

    /* width sizing all full width in small screens */
    .quarter,
    .one-third,
    .half,
    .two-thirds,
    .three-quarters,
    .full-width {
        width: 100%;
        margin: 0;
    }
}
@media only screen and (max-width:480px){
.performer-block .model-list p {width: 100%}
form.ajax-auth {width: 100% !important;margin-left: 0 !important;margin-right: 0 !important;top: 40px !important}
.inline h3 {font-size: 130%;}
.ajax-auth hr {margin: 10px 5px !important;}
img.play_img {width: 64px !important;height: 64px !important;}
header .header-icons a.rss, header .header-icons a.twitter, header .header-icons a.facebook, header .header-icons a.youtube, header .header-icons a.google {display: none;}
#mainLogo {left: 20%;}
#share a {width: 30px;height: 30px;font-size: 18px;margin: 4px;}

}
@media only screen and (max-width:414px){

}
@media only screen and (max-width:360px){

}
@media only screen and (max-width:320px){
.play_img {left: 50%;margin-left: -35px;margin-top: -35px;position: absolute;top: 45%;width: 70px;display: block;}
input#q {width: 55%}
#mainLogo {left: 26%;}
.mozaique, #first_related, #second_related {grid-template-columns: repeat(1, minmax(100%, 1fr)) !important;}
.thumbInside img {height: 180px;}
}


/* PERFORMERS SECTION RESPONSIVE */
@media only screen and (max-width: 768px) {
    .performers-section {
        padding: 15px 20px;
        margin: 15px 0;
        border-radius: 8px;
    }
    
    .performers-section .post-performers {
        font-size: 15px;
    }
    
    .performers-section .post-performers::before {
        font-size: 16px;
        display: block;
        margin-bottom: 8px;
    }
    
    .performers-section .post-performers a {
        font-size: 14px;
        padding: 6px 12px;
        margin: 3px 4px 3px 0;
    }
}

@media only screen and (max-width: 480px) {
    .performers-section {
        padding: 12px 15px;
        margin: 10px 0;
    }
    
    .performers-section .post-performers {
        font-size: 14px;
    }
    
    .performers-section .post-performers a {
        font-size: 13px;
        padding: 5px 10px;
        margin: 2px 3px 2px 0;
    }
}

/* ============================================
   FOOTER MENU (HASHTAG STYLE)
============================================ */

/* Footer Menu Container */
#footer-menu {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px 0;
    text-align: center;
}

/* Footer Menu List */
ul.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Footer Menu Items */
ul.footer-links li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Footer Menu Links - Hashtag Style */
ul.footer-links li a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: #ccc;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #555;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 400;
    line-height: 1.4;
    display: inline-block;
    background: rgba(0,0,0,0.3);
    position: relative;
}

/* Add hashtag symbol before text */
ul.footer-links li a:before {
    content: '#';
    margin-right: 2px;
    font-weight: 500;
}

/* Hover effect */
ul.footer-links li a:hover {
    color: #fff;
    border-color: #777;
    background: rgba(255,255,255,0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Mobile responsive */
@media only screen and (max-width: 768px) {
    #footer-menu {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px 0;
    }
    
    ul.footer-links {
        gap: 8px;
    }
    
    ul.footer-links li a {
        font-size: 13px;
        padding: 6px 12px;
    }
}

@media only screen and (max-width: 480px) {
    ul.footer-links {
        gap: 6px;
    }
    
    ul.footer-links li a {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* =====================================================
   MOBILE SEARCH PANEL STYLES
   ===================================================== */

/* Mobile Search Panel - Maximum specificity override */
html body div.mobile-search-panel#mobile-search-panel {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(18, 18, 18, 0.95) !important;
    padding: 0 16px !important;
    z-index: 2147483647 !important;
    backdrop-filter: blur(8px) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease, padding 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body div.mobile-search-panel#mobile-search-panel.open {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 120px !important;
    min-height: 80px !important;
    padding: 20px 16px !important;
    margin: 0 !important;
    background: rgba(18, 18, 18, 0.95) !important;
    border-bottom: 2px solid rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
    z-index: 2147483647 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
    transition: max-height 0.4s ease, padding 0.3s ease !important;
}

/* Mobile Search Overlay */
html body div.mobile-search-overlay#mobile-search-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 2147483646 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

html body div.mobile-search-overlay#mobile-search-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 2147483646 !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Mobile Search Box */
.mobile-search-panel .mobile-search-box {
    max-width: 500px !important;
    margin: 0 auto !important;
    display: flex !important;
    background: rgba(0,0,0,0.8) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 25px rgba(0,0,0,0.4) !important;
    min-height: 40px !important;
}

.mobile-search-panel .mobile-search-box input {
    flex: 1 !important;
    padding: 16px 20px !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    outline: none !important;
    letter-spacing: 0.3px !important;
    min-height: 24px !important;
}

.mobile-search-panel .mobile-search-box input::placeholder {
    color: rgba(255,255,255,0.6) !important;
    font-weight: 400 !important;
}

.mobile-search-panel .mobile-search-box button {
    width: 60px !important;
    min-height: 40px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mobile-search-panel .mobile-search-box button:hover {
    background: rgba(255,255,255,0.2) !important;
}

.mobile-search-panel .mobile-search-box button i {
    color: #fff !important;
    font-size: 16px !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

/* =====================================================
   MENU ICONS STYLES
   ===================================================== */

/* Menu Icons CSS */
.menu-icon {
    margin-right: 8px;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.menu-text {
    vertical-align: middle;
}

/* Desktop menu icons */
.nav-links .menu-icon {
    margin-right: 10px;
    font-size: 18px;
    opacity: 0.9;
}

.nav-links li a:hover .menu-icon {
    opacity: 1;
    transform: scale(1.1);
    color: inherit;
}

/* Mobile menu icons */
@media (max-width: 970px) {
    .nav-links .menu-icon {
        margin-right: 12px;
        font-size: 20px;
        min-width: 24px;
    }
    
    .nav-links li a {
        display: flex;
        align-items: center;
    }
    
    .nav-links .menu-text {
        flex: 1;
    }
}

/* Admin menu icon field styling */
.field-menu-icon input.edit-menu-item-icon {
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.field-menu-icon .description {
    margin-top: 5px;
    line-height: 1.4;
}

.field-menu-icon .description code {
    background: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
}