/* (ข้อ 1 & 3) พื้นฐาน & พื้นหลัง Premium */
body {
    font-family: 'Kanit', sans-serif; /* ใช้ฟอนต์ใหม่ */
    background-color: #fdfdfa; /* สีพื้นหลังนวลๆ */

    /* พื้นหลังลายจุด (Subtle) */
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 0);
    background-size: 20px 20px;
}

/* (ข้อ 6) หัวข้อใหม่ */
.page-title {
    font-weight: 600;
    color: #333;
    letter-spacing: 0.5px;
    font-size: 2.25rem; /* ใหญ่ขึ้น */
}

/* ---------------------------------- */
/* Masonry Gallery Layout (เหมือนเดิม) */
/* ---------------------------------- */
.gallery-container {
    column-gap: 5px;
    column-count: 2;
}

@media (min-width: 576px) {
    .gallery-container { column-count: 3; }
}
@media (min-width: 992px) {
    .gallery-container { column-count: 4; }
}
@media (min-width: 1200px) {
    .gallery-container { column-count: 5; }
}

/* (ข้อ 1 & 5) ปรับปรุง Item ให้พรีเมียม */
.gallery-item {
    margin-bottom: 5px;
    break-inside: avoid;
    display: block; /* สำคัญสำหรับ <a> */
    opacity: 0; /* ซ่อนไว้ก่อน */
    animation: fadeIn 0.6s ease-out forwards;
    transition: all 0.3s ease; /* เพิ่ม transition */
    border-radius: 8px; /* ทำให้ขอบมน */
    overflow: hidden; /* ซ่อนส่วนที่เกิน */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* เพิ่มเงา */
}

.gallery-item:hover {
    transform: scale(1.03); /* ขยายเมื่อชี้ */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    z-index: 10;
    position: relative;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Animation (เหมือนเดิม) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* (ข้อ 2) [ใหม่] สไตล์ปุ่ม Load More */
.btn-load-more {
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;

    background-color: #ffffff; /* พื้นขาว */
    color: #333; /* ตัวอักษรสีเข้ม */
    border: 1px solid #ddd;

    width: 100%; /* กว้างเต็มที่สำหรับมือถือ */
    max-width: 350px; /* กว้างสูงสุด (ปรับได้) */

    padding: 12px 20px;
    border-radius: 50px; /* ทำให้ขอบมนสวยงาม */
    cursor: pointer;

    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.btn-load-more:hover {
    background-color: #FFA500; /* สีส้มเมื่อชี้ */
    color: #ffffff; /* ตัวอักษรสีขาว */
    border-color: #FFA500;
    box-shadow: 0 6px 15px rgba(255, 165, 0, 0.4);
    transform: translateY(-2px);
}

/* (ข้อ 4) [ใหม่] สไตล์ปุ่ม Back to Top */
#btnBackToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;

    font-size: 2.8rem; /* ขนาดไอคอน */
    color: #FFA500; /* สีส้ม */

    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;

    /* เงาให้ไอคอนเด่นขึ้น */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

#btnBackToTop:hover {
    opacity: 1;
    transform: scale(1.1);
}