.top-ads-bar {
  width: 100%;
  height: 70px;
  background-color: #0c1a2e;
  border-bottom: 1px solid var(--color-header-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  position: relative; /* ឱ្យវា Scroll ទៅតាម Page */
}

html[data-theme="dark"] .top-ads-bar {
    background-color: #2895ff;
    color: #fff;
}

/* =========================================
   BOTTOM ADS BAR (Logic ថ្មី)
   ========================================= */
.bottom-ads-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: var(--color-body-bg);
  border-top: 1px solid var(--color-header-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  
  /* Default: លាក់ដោយរុញចុះក្រោម 100% */
  transform: translateY(100%); 
  transition: transform 0.3s ease-in-out;
}

/* 1. Class សម្រាប់បង្ហាញ (Show) */
.bottom-ads-bar.is-visible {
  transform: translateY(0); /* រុញឡើងមកវិញ */
}

/* 2. Class សម្រាប់ពេលដល់បាត (នៅក្រោម Footer) */
.bottom-ads-bar.is-static {
  position: relative; /* លែងអណ្តែតហើយ */
  transform: translateY(0) !important; /* បង្ហាញជានិច្ច */
  border-top: 3px solid var(--color-header-border);
  z-index: 1; /* ទម្លាក់ Z-index មកធម្មតា */
  box-shadow: none;
}

.ads-container {
  display: flex;
  gap: 20px; /* គម្លាតរវាងផ្ទាំងពាណិជ្ជកម្ម */
  height: 100%;
  align-items: center;
}

.ad-slot {
  width: 320px;
  height: 50px;
  background-color: #ddd; /* ពណ៌ផ្ទៃខាងក្រោយបណ្តោះអាសន្ន */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ad-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-page-banner {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px;
}

.ads-page-pc {
  width: 728px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ads-page-mobile{
  display: none;
}

.banner-ad--sidebar {
  margin-top:20px; 
  flex-shrink: 0;
  width: 211px;
  height: 792px;
  object-fit: cover;
}

/* popup Banner */
.popup-ad-banner {
    margin-top: 30px;
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    align-items: center;
    justify-content: center;
}

.popup-ad-banner .ad-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: block;
}

/* --- Banner Ads --- */
.detail-ad-banner {
  width: 100%;
  text-align: center;
  padding: 15px;
  background-color: var(--color-search-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}


@media (max-width: 1199px) {
  .hidden-tablet { display: none; } /* បង្ហាញតែ 2 */
}

@media (max-width: 767px) {
  .hidden-mobile { display: none; }
  
  .ads-page-pc { display:none; }

  .ads-page-mobile {
    display: block;
    width: 320px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
}