@import 'https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/Anuphan/var/Anuphan[wght].css';
:root {
    --primary-color: #01646a;
    --secondary-color: #a88752;
    --background-color: #FAF8F3;
    --text-color: #333333;
}
* {
    font-family: 'Anuphan', sans-serif;
}

/* Secondary button (gold/brown) */

.btn-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}
.btn-secondary:hover {
    filter: brightness(1.1);
}

/* Blog index: main category tab – active = secondary (logo colour) */

.blog-category-btn--active {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
    border-color: var(--secondary-color) !important;
}

/* Blog index: subcategory tab – active = green, white text */
.blog-subcategory-btn--active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* หัวข้อย่อย (subcategory) สีสลับกัน – ดำ, ขาว, เขียว */

.blog-sub--black {
    color: #111;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.blog-sub--black:hover {
    background: #f3f4f6;
    color: var(--primary-color);
}
.blog-sub--white {
    color: #fff;
    background: #374151;
    border: 1px solid #374151;
}
.blog-sub--white:hover {
    background: #4b5563;
    color: #fff;
}
.blog-sub--green {
    color: #fff;
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}
.blog-sub--green:hover {
    filter: brightness(1.1);
    color: #fff;
}

/* Service page: same as blog – main category active = secondary */
    
.service-category-btn--active {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
    border-color: var(--secondary-color) !important;
}
.service-subcategory-btn--active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}
/* Service subcategory tabs – ดำ, ขาว, เขียว */
.service-sub--black {
    color: #111;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.service-sub--black:hover {
    background: #f3f4f6;
    color: var(--primary-color);
}
.service-sub--white {
    color: #fff;
    background: #374151;
    border: 1px solid #374151;
}
.service-sub--white:hover {
    background: #4b5563;
    color: #fff;
}
.service-sub--green {
    color: #fff;
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}
.service-sub--green:hover {
    filter: brightness(1.1);
    color: #fff;
}