/* Custom styles for your site */
@font-face {
    font-display: swap; 
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/sarabun-v16-latin_latin-ext_thai_vietnamese-regular.woff2') format('woff2'); 
}
@font-face {
    font-display: swap; 
    font-family: 'Noto Serif Khmer';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/noto-serif-khmer-v28-khmer_latin-regular.woff2') format('woff2'); 
}

@font-face {
    font-display: swap; 
    font-family: 'Noto Sans Myanmar';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/noto-sans-myanmar-v20-myanmar-regular.woff2') format('woff2');
  }
/* noto-serif-lao-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Serif Lao';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-serif-lao-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

:lang(th) {
    font-family: 'Sarabun', sans-serif;
}
:lang(vi) {
    font-family: 'Sarabun', sans-serif;
}
:lang(km) {
    font-family: 'Noto Serif Khmer', serif;
}
:lang(my) {
    font-family: 'Noto Sans Myanmar'
}
:lang(lo) {
    font-family: 'Phetsarath'
}

/* ==================
   Color Variables
   ================== */
   :root {
    --primary-green: #098a36;
    --primary-green-hover: #098a36;
    --link-hover-color: #fff;

    --tech-color: #4c8a86;
    --life-color: #894b81;
    --money-color: #5d8142;
    --news-color: #a4533a;
    --howto-color: #645b85;
    --review-color: #b18c47;
  }

/* ==================
   Article Content
   ================== */
.article-content {
    font-size: 1.125rem;
    padding-left: 0.25rem;
}

.article-content h2,
.article-content h3 {
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid #098a36;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
}

.article-content h2 {
    font-size: 2rem;
}

.article-content h3 {
    font-size: 1.5rem;
}

.article-content p,
.article-content ul,
.article-content ol {
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.article-content h2 a,
.article-content h3 a,
.article-content h4 a,
.article-content h5 a {
    color: #028102; /* หรือใช้รหัสสีที่คุณต้องการ เช่น #098a36 */
    text-decoration: none;
}

.article-content a {
    color: #028102;
    text-decoration: none;
}
.calendar-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.minute-read-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.author-icon {
    width: 1.125rem;
    height: 1.125rem;
}



/* ==================
   Navbar and Breadcrumb
   ================== */
   .navbar-nav .nav-link,
   .breadcrumb a {
       font-weight: bold;
       border-radius: 0.25rem;
       transition: color 0.3s ease, background-color 0.3s ease;
   }
   
   .navbar-nav .nav-link {
       font-size: 1.125rem;
       color: #212529; /* Default color */
   }
   
   .breadcrumb a {
       padding: 0.0rem 0.4rem; 
   }
   
/*  ==================
      Category Colors
    ================== */
   .tech-link { color: var(--tech-color); }
   .tech-link:hover { color: #fff !important; background-color: var(--tech-color) !important; }
   
   .life-link { color: var(--life-color); }
   .life-link:hover { color: #fff !important; background-color: var(--life-color) !important; }
   
   .money-link { color: var(--money-color); }
   .money-link:hover { color: #fff !important; background-color: var(--money-color) !important; }
   
   .news-link { color: var(--news-color); }
   .news-link:hover { color: #fff !important; background-color: var(--news-color) !important; }
   
   .howto-link { color: var(--howto-color); }
   .howto-link:hover { color: #fff !important; background-color: var(--howto-color) !important; }
   
   .review-link { color: var(--review-color); }
   .review-link:hover { color: #fff !important; background-color: var(--review-color) !important; }



/* ==================
   Tag/Chip Styles
   ================== */
   .tag-chip {
    display: inline-block;
    padding: 0.25em 0.75em; 
    margin: 0.25rem 0.25rem;
    font-size: 0.875rem; 
    font-weight: bold;
    color: hsl(0, 3%, 21%); /* เปลี่ยนสีตัวอักษรเป็นสีดำ */
    background-color: hsl(141, 53%, 47%); 
    border-radius: 0.5rem; 
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.tag-chip:hover {
    background-color: #056a29; 
    color: #fff;
    text-decoration: none;
}

/* Container หลักที่ทำให้ Card ทั้งหมดเรียงกัน */
.affiliate-products-container {
    display: flex;
    flex-direction: column; /* หรือ row ถ้าต้องการให้ card ทั้งหมดเรียงกันในแนวนอน */
    gap: 20px;
    padding: 20px;
    background-color: #f9f9f9;
}

/* Card หลักที่รวบรวมทุกสินค้า */
.affiliate-products-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.card-title-affiliate {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 20px;
    color: #1a1a1a;
    text-align: center;
}

/* Container ที่จัดเรียงรูปภาพทั้งหมดในแนวนอน */
.product-image-row {
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap; 
    gap: 15px;
    justify-content: center;
}

/* --- ส่วนที่ต้องแก้ไข --- */
/* Image Container: 
   กำหนดความกว้างให้แต่ละบล็อก ไม่ให้มันเต็ม 100% */
.product-image-container {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    width: 300px; /* กำหนดความกว้างคงที่ (ตัวอย่าง) */
    /* หรือใช้ min/max-width เพื่อให้ยืดหยุ่นขึ้น */
    min-width: 300px;
    max-width: 300px;
    box-sizing: border-box;
}

.product-image {
    /* ในโค้ดเดิมอาจมี width: 100% ให้เปลี่ยนเป็น max-width เพื่อให้ไม่เกินขนาดของ container */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Buy Button */
.buy-button {
    display: block;
    width: 100%;
    background-color: #f7521f;
    color: #fff !important;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.buy-button:hover {
    background-color: hsl(14, 97%, 36%);
}

/* Style for pagination links for better visibility */
.pagination .page-link {
    color: hsl(155, 96%, 22%);
    border-color: #dee2e6;
}
.pagination .page-item.active .page-link {
    background-color: hsl(155, 96%, 22%);
    border-color: hsl(155, 96%, 22%);
    color: white;
}

@media (max-width: 575.98px) { /* สำหรับหน้าจอขนาดเล็กกว่า sm */
    .navbar-collapse {
      position: absolute;
      top: 100%; /* ทำให้เมนูอยู่ใต้ Navbar */
      left: 0;
      width: 100%;
      z-index: 1020;
      background-color: #fff; /* เพิ่มพื้นหลังเพื่อไม่ให้เมนูโปร่งใส */
    }
  }