/* --- CSS Variables (រក្សាពណ៌ដើម) --- */
@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400;600;700&display=swap');

@font-face {
  font-family: "Afacad";
  src: url("../assets/Afacad[wght].ttf") format("truetype");
  font-weight: 400 700; 
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: "Bauhaus 93";
  src: url("../assets/Bauhaus 93 Regular.ttf") format("truetype"); /* កែតម្រូវ Space ក្នុងឈ្មោះ File */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Variables (រក្សាពណ៌ដើម) --- */
:root {
  --color-primary: #002d6d;
  --color-secondary: #e5f5ff;
  --color-accent: #0282fe;
  --color-accent-dark: #0057d3;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-border: #b4dafc;
      
  --font-body: "Afacad", sans-serif;
  --font-bold: "Afacad", sans-serif;
  --font-semibold: "Afacad", sans-serif;
  --font-logo: "Bauhaus 93", sans-serif;

  /* --- ▼▼▼ អថេរ Gradient ថ្មី ▼▼▼ --- */
  --gradient-hero-title: linear-gradient(136deg, rgba(0, 45, 109, 1) 0%, rgba(0, 87, 211, 1) 100%);
  --gradient-tag: linear-gradient(136deg, rgb(1, 71, 171) 0%, rgba(0, 87, 211, 1) 100%);
  --gradient-tag-hover: linear-gradient(136deg, rgb(3, 85, 201) 0%, rgb(1, 91, 218) 100%);
}

/* --- ▼▼▼ Dark Mode Overrides ថ្មី ▼▼▼ --- */
html[data-theme="dark"] {
  --gradient-hero-title: linear-gradient(136deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-tag: linear-gradient(136deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  --gradient-tag-hover: linear-gradient(136deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
}

html[data-theme="dark"] .product-card:hover {
  box-shadow: 0 10px 20px rgba(2, 130, 254, 0.1); /* ស្រមោលពណ៌ខៀវពេល Dark Mode */
}

html[data-theme="dark"] .page-item.active .page-link {
  box-shadow: 0 4px 8px rgba(2, 130, 254, 0.1), 0 5px 0 0 var(--color-accent);
}
/* --- ▲▲▲ ចប់ Dark Mode Overrides ▲▲▲ --- */


/*======================================================================================================================================*/

/* ----------------------------------- */
/* --------search-bar header----------- */
/* ----------------------------------- */
/* 1. ស្ថានភាពដើម (បិទ) */
.search-icon-mobile {
  display: none; /* លាក់ Icon ប៊ូតុងនៅ Desktop */
}

/* --- 1. ស្ថានភាពដើម (បិទ - 40px) --- */
.header-main .search-bar-full {
  width: 40px;  /* ទទឹងតូច */
  height: 40px; /* កម្ពស់ */
  border-radius: 12px; /* មូល */
  padding: 0;   /* គ្មាន padding ដើម្បីឱ្យ Icon នៅកណ្តាល */
  
  /* កូដសំខាន់សម្រាប់តម្រឹម Icon នៅកណ្តាល */
  display: flex;
  align-items: center;
  justify-content: center; 
  
  cursor: pointer;
  transition: all 0.4s ease-in-out; /* ចលនាពង្រីក */
  background-color: var(--color-search-bg);
  border: 2px solid var(--color-primary);
  position: relative;
  overflow: hidden;
}

/* លាក់ Input ពេលបិទ */
.header-main .search-bar-full .search-input-haader {
  width: 0; 
  opacity: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--color-primary);
  background: transparent;
  pointer-events: none; /* ហាមចុច */
}

/* Icon នៅកណ្តាល */
.header-main .search-bar-full .search-icon-haader {
  font-size: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin: 0; /* លុប margin ចោល */
  transition: margin 0.4s ease;
}

/* --- 2. ស្ថានភាពពេលចុច (Active - 400px) --- */
/* Class "is-active" នឹងត្រូវបន្ថែមដោយ JS */
.header-main .search-bar-full.is-active {
  width: 400px; /* ពង្រីក */
  border-radius: 25px;
  padding: 0 15px;
  justify-content: flex-start; /* តម្រឹមទៅឆ្វេងវិញ */
  cursor: text;
}

/* បង្ហាញ Input ពេល Active */
.header-main .search-bar-full.is-active .search-input-haader {
  width: 100%; 
  opacity: 1;
  padding-left: 10px;
  pointer-events: auto;
}

/* រុញ Icon ពេល Active (បើចង់) */
.header-main .search-bar-full.is-active .search-icon-haader {
  margin-right: 0;
}

/* Hover Effect */
.header-main .search-bar-full:not(.is-active):hover {
  border-color: var(--color-accent);
  transform: scale(1.05);
}

/* ----------------------------------- */
/* -------ចប់ search-bar header-------- */
/* ----------------------------------- */

/* --------------------------------------------------------------------------------------------------*/
.hero-banner {
  margin-top: 120px;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 50px 150px;
  background-image: url(main-banner1.png);
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 50vh;
}

/* ----------------------------------- */
/* -----------Banner Title----------- */
/* ----------------------------------- */     
.hero-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
    
.hero-title {
  position: relative;
  flex: 1;
  margin-top: -1px;
  background: var(--gradient-hero-title); /* <-- កែត្រង់នេះ */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: "Afacad-Bold", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 64px;
  text-align: center;
  letter-spacing: 0;
  line-height: 64px;
}

/* --- 1. លុបផ្ទៃខាងក្រោយពណ៌សពេល Autofill (Browser Default) --- */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* ប្រើពណ៌ផ្ទៃខាងក្រោយរបស់អ្នកជំនួសឲ្យពណ៌ស */
    -webkit-box-shadow: 0 0 0 30px var(--color-search-bg, #fff) inset !important;
    /* ប្តូរពណ៌អក្សរ */
    -webkit-text-fill-color: var(--color-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --------------------------------- */
/* -----------Search box----------- */
/* --------------------------------- */  
.search-form {
  display: flex;
  justify-content: center;
  width: 100%;
}

.search-box-container {
  display: flex;
  align-items: center;
  width: 80%; 
  max-width: 900px;
  height: 60px;
  padding: 8px 20px;
  border-radius: 35px; 
  background-color: var(--color-search-bg); /* <-- កែត្រង់នេះ */
  border: 3px solid var(--color-border); /* <-- កែត្រង់នេះ */
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.15);
}

/* Styling សម្រាប់ Icon */
.search-icon {
  color: var(--color-accent); /* <-- កែត្រង់នេះ */
  margin-right: 10px;
  width: 24px;
  height: 24px;
}

/* Styling សម្រាប់ Input Field */
.search-input {
  flex-grow: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 24px;
  color: var(--color-text); /* <-- កែត្រង់នេះ */
  font-family: var(--font-body);
}

/* Styling សម្រាប់ Placeholder Text (អក្សរ "Search") */
.search-input::placeholder {
  color: var(--color-accent); /* <-- កែត្រង់នេះ */
  opacity: 0.8;
  font-weight: 300; /* ធ្វើឲ្យអក្សរដិតជាងមុន */
}

/* --------------------------------- */
/* --- Keyframes សម្រាប់ចលនា --- */
/* --------------------------------- */
@keyframes float-1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(5px, 8px); } /* បង្កើនគម្លាត */
  50% { transform: translate(0, 0); }
  75% { transform: translate(-5px, -8px); } /* បង្កើនគម្លាត */
}
    
@keyframes float-2 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-8px, 5px); } /* បង្កើនគម្លាត */
  50% { transform: translate(0, 0); }
  75% { transform: translate(8px, -5px); } /* បង្កើនគម្លាត */
}
    
.hero-decoration-1 {
  position: absolute;
  left: 10px;
  top: 42px;
  width: 98.5px;
  height: 98.5px;
  object-fit: cover;
  animation: float-1 4s ease-in-out infinite alternate; /* បន្ថែមល្បឿន*/
}
.hero-decoration-2 {
  position: absolute;
  left: 170px;
  bottom: 0;
  width: 147px;
  height: 147px;
  object-fit: cover;
  animation: float-2 5s ease-in-out infinite alternate; /* បន្ថែមល្បឿន*/
}
.hero-decoration-3 {
  position: absolute;
  right: 10px;
  top: 0;
  width: 194px;
  height: 194px;
  object-fit: cover;
  animation: float-1 6s ease-in-out infinite alternate; /* បន្ថែមល្បឿន*/
}
.hero-decoration-4 {
  position: absolute;
  right: 170px;
  bottom: 0;
  width: 146px;
  height: 146px;
  object-fit: cover;
  animation: float-2 3s ease-in-out infinite alternate; /* បន្ថែមល្បឿន*/
}

/* --------------------------------------------------------------------------------------------------*/

.main-content {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 0 150px;
  overflow-x: hidden;
}

/* --------------------------------- */
/* ----------Filter-------------- */
/* --------------------------------- */
.desktop-filters {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 300px;
  flex-shrink: 0;
}

/* Class សម្រាប់លាក់ Filters នៅលើ PC */
.main-content.no-filters .desktop-filters {
  display: none;
}

.main-content.no-filters .filter-btn--show-pc {
  display: flex !important; /* បង្ហាញ filter-btn ឡើងវិញ */
}

.desktop-filters .filter-close-btn {
    display: block; 
}

/* ------- Filters box -------- */
.filter-container {
  width: 300px;
  background: var(--color-header-bg); /* <-- កែត្រង់នេះ */
  color: var(--color-text); /* <-- កែត្រង់នេះ */
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* សម្រាប់ដាក់ព្រួញបិទនៅខាងស្តាំ */
  margin-bottom: 10px;
  color: var(--color-primary);
}

.filter-header .icon {
  margin-right: 8px;
  fill: var(--color-accent); /* <-- កែត្រង់នេះ */
}

.main-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  font-family: var(--font-bold);
  flex-grow: 1; /* អនុញ្ញាតឲ្យ Title រីកធំ */
}

/*Filter Close Button Styling */
.filter-close-btn {
    cursor: pointer;
    padding: 5px;
}

.filter-close-btn svg {
    display: block;
    width: 24px;
    height: 24px;
    transition: all 0.2s;
    stroke: var(--color-primary); /* <-- កែត្រង់នេះ */
}

.filter-close-btn:hover svg {
    stroke: var(--color-accent);
}

.header-divider {
  border: none;
  border-top: 1px solid var(--color-border); /* <-- កែត្រង់នេះ */
  margin: 10px 0 15px 0;
}

/* រចនាបថសម្រាប់ក្រុមតម្រងនីមួយៗ */
.filter-group {
  margin-bottom: 15px;
}

.filter-title {
  font-size: 24px;
  font-weight: 600;
  margin: 15px 0 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-primary);
  font-family: var(--font-semibold);
}

.arrow {
  font-size: 0.9em;
}

.arrow svg path {
  stroke: var(--color-primary);
  transition: stroke 0.3s ease;
}

.divider {
  border: none;
  border-top: 1px solid var(--color-border); /* <-- កែត្រង់នេះ */
  margin: 10px 0;
}

.options-list {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  word-wrap: break-word;
}

.radio-option {
  display: flex;
  align-items: baseline;
  padding: 5px 0;
  cursor: pointer;
  font-size: 24px;
  color: var(--color-primary); /* ពណ៌អក្សរជម្រើស */
}

/* រចនាបថប៊ូតុងមូល (Radio Buttons) ផ្ទាល់ខ្លួន */
.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-primary); /* <-- កែត្រង់នេះ */
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  outline: none;
  background-color: var(--color-bg); /* <-- កែត្រង់នេះ */
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 6px;
}

.radio-option:hover input[type="radio"] {
  border-color: var(--color-accent); /* ពណ៌ពេល Hover */
}

.radio-option input[type="radio"]:checked {
  border-color: var(--color-accent); /* ពណ៌គ្រោងប៊ូតុងនៅពេល checked */
}

.radio-option input[type="radio"]:checked::before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: var(--color-accent); /* <-- កែត្រង់នេះ */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ------------------------------------ */
/* ----Banner Ad In Destop Fillter----- */
/* ------------------------------------ */
.banner-ad--sidebar {
  flex-shrink: 0;
  width: 211px;
  height: 792px;
  object-fit: cover;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.gallery-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* --------------------------------- */
/* --------Tagged List----------- */
/* --------------------------------- */
.tagged-bar {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 0;
}

/* ប្រើ class ថ្មីដើម្បីគ្រប់គ្រងប៊ូតុង filter នៅក្នុង tagged-bar នៅលើ PC */
.tagged-bar .filter-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border-radius: 9px;
    padding: 10px;
    flex-shrink: 0;
    cursor: pointer;
    gap: 10px;
    font-family: var(--font-semibold);
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 600;
    transition: background 0.2s;
}

.tagged-bar .filter-btn:hover {
  background: var(--color-border);
}

.scroll-tags {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-header-bg);
  border-radius: 10px;
  cursor: grab;
  scrollbar-width: none; /* Firefox */
  user-select: none;
}

.scroll-tags::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.tag {
  background: var(--gradient-tag);
  color: var(--color-white);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.2s;
}

.tag:hover {
  background: var(--gradient-tag-hover);
}

.tag.active {
    background: var(--color-accent-dark) !important;
    color: #fff;
    padding-right: 30px; /* ទុកកន្លែងសម្រាប់ Icon X */
    position: relative;
    border: 1px solid var(--color-accent);
}

/* Icon ខ្វែងលើ Tag */
.tag.active::after {
    content: '\00d7'; /* សញ្ញាគុណ (X) */
    font-size: 18px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-53%);
    line-height: 1;
    font-weight: bold;
}

.scroll-tags:active {
  cursor: grabbing;
}

.filter-btn{
  display: none;
}

/* --------------------------------- */
/* --- Image list Grid Layout --- */
/* --------------------------------- */

.product-card {
  background: var(--color-bg);
  border-radius: 20px; 
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 20px;
}
    
.card-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}

.grid-sizer,
.product-card {
  width: calc((100% - 80px) / 5); /* (100% - (3 * 20px gap)) / 4 */
}

/* PC No Filters (5 columns) */
.main-content.no-filters .grid-sizer,
.main-content.no-filters .product-card {
  width: calc((100% - 100px) / 6); /* (100% - (4 * 20px gap)) / 5 */
}
    
.product-card:hover {
  transform: translateY(-8px); 
  box-shadow: 0 10px 20px rgba(0, 45, 109, 0.15); 
}
    
.product-card:hover .card-image {
  filter: brightness(0.7); 
}
    
.card-overlay, .card-tag-free, .card-play-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}
    
.product-card:hover .card-overlay,
.product-card:hover .card-tag-free,
.product-card:hover .card-play-icon {
  opacity: 1;
}
    
.card-overlay {
  position: absolute;
  bottom: 15px; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 214px; 
}

.download-btn {
  background: linear-gradient(103.15deg, #0282fe 0%, #0057d3 100%);
  border-radius: 7px; 
  padding: 10px 20px; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; 
  box-shadow: inset -1.95px 1.95px 2.59px 0px rgba(25, 209, 255, 0.5), inset 1.95px -1.95px 2.59px 0px rgba(69, 92, 133, 0.5);
}

.download-btn:hover {
  background: linear-gradient(103.15deg, #2599ff 0%, #2599ff 100%);
}
    
.download-icon {
  width: 11.68px; 
  height: 11.03px; 
}
    
.download-text {
  color: var(--color-white);
  font-family: var(--font-bold);
  font-size: 15.57px; 
  white-space: nowrap; 
}

.card-tag-free {
  position: absolute;
  top: 12px; 
  left: 12px;
}
    
.free-text-container {
  background: var(--color-accent);
  border-radius: 7px; 
  padding: 5px 10px;
}

.free-text {
  color: var(--color-white);
  font-size: 12px;
}

/* | Play Icon Styles for Video Cards | */

.card-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; /* ទំហំរូបសញ្ញា Play (លៃតម្រូវតាមចំណូលចិត្ត) */
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* ត្រូវតែនៅខាងលើរូបភាព */
    pointer-events: none; /* អនុញ្ញាតឱ្យចុចឆ្លងកាត់ដើម្បីទៅ detail page */
}

.card-play-icon img {
    width: 40px;
    height: 40px;
    /* បើត្រូវការ icon ពណ៌ស សូមដាក់ filter: invert(1); */
}

/* Optional: Effect ពេល Mouse ដាក់លើ Card */
.product-card:hover .card-play-icon {
    background-color: rgba(0, 0, 0, 0.7);
}
    
/* --------------------------------- */
/* --------Pagination-------------- */
/* --------------------------------- */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 40px 0;
  font-family: var(--font-body);
}

.pagination-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

/* 2. Page Link Styles (សម្រាប់លេខទំព័រ) */
.page-link {
  display: flex; 
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-in-out; /* ធ្វើឲ្យការផ្លាស់ប្តូរទាំងអស់រលូន */          
  /* ពណ៌ទូទៅ (សម្រាប់ទំព័រដែលមិន Active) */
  color: var(--color-primary); /* <-- កែត្រង់នេះ */
  background-color: var(--color-header-bg); /* <-- កែត្រង់នេះ */
  border: 1px solid var(--color-header-bg); /* <-- កែត្រង់នេះ */
}

/* Hover Effect (មិន Active) */
.page-item:not(.active) .page-link:hover {
  background-color: var(--color-border); /* <-- កែត្រង់នេះ */
  border-color: var(--color-border); /* <-- កែត្រង់នេះ */
  color: var(--color-primary); /* <-- កែត្រង់នេះ */
}

/* Active State Style (ទំព័រអណ្ដែតឡើង) */
.page-item.active {
  position: relative; 
}

.page-item.active .page-link {
  background-color: var(--color-header-bg); /* <-- កែត្រង់នេះ */
  color: var(--color-accent); /* <-- កែត្រង់នេះ */
  cursor: default;
  transform: translateY(-5px); /* លើកធាតុឡើង 8px */
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.1), /* ស្រមោលស្តង់ដារ (Opacity 0.1) */
    0 5px 0 0 var(--color-accent); /* <-- កែត្រង់នេះ */
  border-radius: 12px; 
  border: none;
}

/* Next Button Style */
.page-item.next-page .page-link {
  border-radius: 12px;
  background-color: var(--color-primary); /* <-- កែត្រង់នេះ */
  color: var(--color-bg); /* <-- កែត្រង់នេះ */
  border: 1px solid var(--color-primary); /* <-- កែត្រង់នេះ */
  width: 50px;
  height: 50px;
  transform: none; /* ត្រូវប្រាកដថាវាមិនអណ្តែត */
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ▼▼▼ បន្ថែមកូដនេះ ដើម្បីប្តូរពណ៌ព្រួញ ▼▼▼ */
.page-item.next-page .page-link .arrow-svg path {
  fill: var(--color-bg);
}

.page-item.next-page .page-link:hover {
  background-color: var(--color-accent-dark); /* <-- កែត្រង់នេះ */
  border-color: var(--color-accent-dark); /* <-- កែត្រង់នេះ */
  transform: translateY(-1px);
}

/* --------------------------------- */
/* --------- Ad Banner ------------- */
/* --------------------------------- */
.ad-banner {
  padding: 50px 500px;
  width: 100%;
}
    
.ad-banner img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1400px) {
  .main-content {
    padding: 0 100px;
  }

  .desktop-filters {
    width: 250px;
  }

  .filter-container {
    width: 250px;
  }

  .ad-banner {
    padding: 50px 300px;
  }
}

/*======================================================================================================================================*/

/* ===== Tablet Styles (max-width: 1199px) ===== */
@media (max-width: 1199px) {

  /* លាក់ Search Bar ពេញលេញនៅពេលអេក្រង់តូច */
  .header-main .search-bar-full {
    display: none;
  }
            
  /* បង្ហាញ Search Icon រាងជ្រុងមូល */
  .search-icon-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-control-height);
    height: var(--header-control-height);
    background-color: var(--color-search-bg);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .search-icon-mobile:hover {
    background-color: var(--color-primary);
    transition: scale(1.05);
  }

  /* រូបសញ្ញាស្វែងរកខាងក្នុងប្រអប់ */
  .search-icon-mobile svg {
    color: var(--color-primary);
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 auto;
    transition: all 0.3s ease;
  }

  .search-icon-mobile:hover svg {
    color: var(--color-bg);
    stroke: var(--color-bg);
  }

.main-content {
  padding: 0 50px;
}

/* --- Banner --- */
.hero-banner {
  margin-top: 120px;
  gap: 40px;
  padding: 20px 50px;
  min-height: 25vh;
}
.search-container {
  padding: 0 50px;
}
.hero-decoration-1, .hero-decoration-2, .hero-decoration-3, .hero-decoration-4 {
   display: none !important;
}
/* ---ចប់ Banner --- */

/* --------------------------------- */
/* ---------- PC Filter -------------- */
/* --------------------------------- */
.desktop-filters .filter-close-btn {
  display: none;
} 

.desktop-filters{
  display: none;
}

.desktop-filters .filter-close-btn {
  display: none;
}


/* ------------------------------------------------ */
/* --------Filter On Tablet and Mobile------------- */
/* ------------------------------------------------ */
.tagged-bar .filter-btn {
  display: flex; /* បង្ហាញឡើងវិញសម្រាប់ Mobile/Tablet */
}

/* --------Filter Button------------- */
.filter-btn {
  display: flex; 
  align-items: center;
  justify-content: center;
  background: var(--color-bg); /* <-- កែត្រង់នេះ */
  border-radius: 9px;
  padding: 10px;
  flex-shrink: 0;
  cursor: pointer;
  gap: 10px;
  font-family: var(--font-semibold);
  color: var(--color-primary); /* <-- កែត្រង់នេះ */
  font-size: 24px;
  font-weight: 600;
}

.filter-btn:hover {
  background: var(--color-accent-dark);
}

.filter-btn.active {
    background: var(--color-accent); /* ពណ៌ខៀវច្បាស់ពេល Active */
    color: var(--color-white);
}

.filter-btn.active:hover {
  background: var(--color-accent-dark); /* ឧទាហរណ៍៖ #0057d3 */
  color: var(--color-white);
}

.filter-header {
  display: none;
}

.header-divider {
  display: none;
}

.tagged-bar {
  position: relative;
}

.tagged-bar.filters-dropdown-active .desktop-filters {
  display: block; 
  position: absolute; 
  top: 65px; /* កំណត់ទីតាំងនៅខាងក្រោម Tagged bar បន្តិច */
  left: 0; /* ទុកចន្លោះពីគែមខាងឆ្វេងបន្តិច */
  width: 280px;
  max-width: 90vw; /* ទទឹងមិនលើស 90% នៃ Viewport Width */
  z-index: 50; /* ដាក់វាឲ្យនៅពីលើ Gallery Area */
  height: auto; 
  background-color: transparent;
  flex-direction: initial;
  gap: 20px;
}

.tagged-bar.filters-dropdown-active .filter-container {
  width: 100%; /* ប្រើទទឹងពេញលេញនៃ desktop-filters container (280px) */
  margin: 0; 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* ស្រមោលសម្រាប់អារម្មណ៍ Dropdown */
}

/* --------------------------------- */
/*------Image list Grid Layout -------*/
/* --------------------------------- */
.grid-sizer, .product-card {
    width: calc((100% - 80px) / 4); /* (100% - (2 * 20px gap)) / 3 */
}

.card-overlay { bottom: 12px; width: auto; }
.download-btn { padding: 8px 15px; gap: 8px; border-radius: 5px; }
.download-text { font-size: 14px; }
.download-icon { width: 10px; height: 9.5px; }     
.card-tag-free { top: 10px; left: 10px; }
.free-text-container { padding: 4px 8px; border-radius: 5px; }
.free-text { font-size: 11px; }
.card-bookmark-btn { top: 10px; right: 10px; }
.bookmark-icon { width: 24px; height: 24px; }
/*--ចប់ Image list --*/

/* --------------------------------- */
/* --------- Ad Banner ------------- */
/* --------------------------------- */
.ad-banner { padding: 20px 100px; }
}

/*======================================================================================================================================*/
    
/* ===== Mobile Styles (max-width: 767px) ===== */
 @media (max-width: 767px) {

.main-content {
  padding: 0 20px;
}

.hero-banner {
  margin-top: 90px;
  gap: 10px;
  padding: 20px 20px;
  min-height: 25vh;
}
.hero-title {
    font-size: 32px;
    line-height: 40px;
}

/* --------------------------------- */
/* -----------Search box----------- */
/* --------------------------------- */  
.search-box-container {
  width: 90%; 
  height: 50px;
  padding: 8px 15px;
  border-radius: 30px;
}

.search-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
}

.search-input {
  font-size: 16px;
}

/* --------------------------------- */
/* --------Filter Button------------- */
/* --------------------------------- */
.filter-btn {
  padding: 10px;
  gap: 10px;
  font-size: 24px;
}

.filter-btn:hover {
  background: var(--color-border);
}

/* ------------------------------------------------ */
/* --------Filter On Tablet and Mobile------------- */
/* ------------------------------------------------ */
.tagged-bar.filters-dropdown-active .desktop-filters {
  width: 260px;
}

/* --------------------------------- */
/*---------Image list ---------------*/
/* --------------------------------- */
.grid-sizer,
  .product-card {
    width: calc((100% - 20px) / 2); /* (100% - (1 * 20px gap)) / 2 */
  }

.product-card { border-radius: 15px; }     
.card-overlay { bottom: 10px; width: auto; }
.download-btn { padding: 6px 12px; gap: 5px; border-radius: 4px; width: auto; }
.download-text { font-size: 12px }
.download-icon { width: 9px; height: 8.5px; }     
.card-tag-free { top: 10px; left: 10px; }
.free-text-container { padding: 3px 7px; border-radius: 4px; }
.free-text { font-size: 10px; }     
.card-bookmark-btn { top: 10px; right: 10px; }
.bookmark-icon { width: 20px;  height: 20px; }
/*--ចប់ Image list --*/

/* --------------------------------- */
/* ---------Pagination-------------- */
/* --------------------------------- */
.pagination-container {
  padding: 20px 0;
}

/*Page Link Styles (សម្រាប់លេខទំព័រ) */
.page-link {
  width: 40px;
  height: 40px;
}

.page-item.active .page-link {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 4px 0 0 var(--color-accent); /* <-- កែត្រង់នេះ */
  border-radius: 10px;
}

/* Next Button Style */
.page-item.next-page .page-link {
  border-radius: 10px;
  width: 40px;
  height: 40px;
}

/* --------------------------------- */
/* --------- Ad Banner ------------- */
/* --------------------------------- */
.ad-banner { padding: 20px; }
}