/* =================================
   1. Google Fonts & Body Reset
==================================== */
/*
  font-family: 'Kanit', sans-serif; // สำหรับหัวข้อ
  font-family: 'Noto Sans Thai', sans-serif; // สำหรับเนื้อหา
*/
body {
    font-family: 'Noto Sans Thai', sans-serif;
    margin: 0;
    background-color: #121212;
    color: #E0E0E0;
    line-height: 1.7;
}

a {
    text-decoration: none;
    color: #FFC700;
    transition: color 0.3s ease;
}

a:hover {
    color: #FFDE59;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Kanit', sans-serif;
    color: #FFFFFF;
}

/* =================================
   2. Header & Navigation (Desktop)
==================================== */
.site-header { /* ใช้ class แทนการ style ที่ tag header โดยตรง */
    background-color: #121212;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #333;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo img {
    height: 40px;
    display: block;
}

.header-top-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-info-desktop .welcome-msg { color: #fff; }
.user-info-desktop .login-btn,
.user-info-desktop .register-btn {
    color: #e0e0e0;
    padding: 5px 10px;
}

.post-btn {
    background-color: #f5f5f5;
    color: #121212;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
}
.post-btn:hover {
    transform: scale(1.1);
    color: #121212;
}

.header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    border-top: 1px solid #333;
}

main {
    padding: 2px 1px;
    max-width: 1400px; /* <--- ตัวนี้คือสาเหตุที่จำกัดความกว้าง */
    margin: 0 auto;      /* ทำให้เนื้อหาอยู่ตรงกลาง */
}

.main-nav {
    display: flex;
    gap: 20px;
}

.main-nav a {
    color: #bbb;
    padding-bottom: 5px;
    position: relative;
}
.main-nav a.active,
.main-nav a:hover {
    color: #fff;
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #FFC700;
    transition: width 0.3s ease;
}
.main-nav a.active::after,
.main-nav a:hover::after {
    width: 100%;
}

/* --- ซ่อน Element ของมือถือบนจอใหญ่ --- */
.hamburger-menu, .user-info-mobile {
    display: none;
}



.comment-form textarea {
    width: 100%; /* ทำให้กล่องคอมเมนต์กว้าง 100% ของ parent element */
    box-sizing: border-box; /* สำคัญมาก: เพื่อให้ padding และ border ไม่ทำให้ความกว้างเกิน 100% */
    /* คุณอาจจะมีคุณสมบัติอื่นๆ อยู่แล้ว เช่น padding, background-color, border-radius */
    /* เก็บคุณสมบัติเดิมเหล่านั้นไว้ด้วย */
    padding: 12px 15px; /* ตัวอย่าง padding */
    background-color: #2a2a2a; /* ตัวอย่างสีพื้นหลัง */
    border: 1px solid #444; /* ตัวอย่าง border */
    border-radius: 8px; /* ตัวอย่าง border-radius */
    color: #e0e0e0; /* ตัวอย่างสีข้อความ */
    font-family: 'Noto Sans Thai', sans-serif; /* ตัวอย่าง font */
    font-size: 16px; /* ตัวอย่าง font-size */
}

/* หากต้องการให้ช่อง input อื่นๆ ในฟอร์มก็กว้าง 100% ด้วย */
.comment-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* สไตล์สำหรับ container ของรายการคอมเมนต์ทั้งหมด */
.comment-list {
    background-color: #1e1e1e; /* สีพื้นหลังเดียวกับ form section เพื่อความต่อเนื่อง */
    padding: 20px 40px; /* เพิ่ม padding ด้านใน */
    border-radius: 12px; /* มุมโค้งมน */
    border: 1px solid #333; /* ขอบสีเข้ม */
    margin-top: 30px; /* ระยะห่างจากส่วนฟอร์มคอมเมนต์ด้านบน */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* เงาเล็กน้อย */
}

/* สไตล์สำหรับแต่ละคอมเมนต์ภายในรายการ */
.comment-list .comment-item { /* สมมติว่าแต่ละคอมเมนต์มี class เป็น comment-item */
    border-bottom: 1px solid #2a2a2a; /* เส้นแบ่งระหว่างคอมเมนต์ */
    padding: 15px 0; /* padding บน-ล่าง สำหรับแต่ละคอมเมนต์ */
    color: #e0e0e0; /* สีข้อความ */
}

.comment-list .comment-item:last-child {
    border-bottom: none; /* ไม่มีเส้นแบ่งสำหรับคอมเมนต์สุดท้าย */
}

.comment-list .comment-item .comment-author {
    font-weight: bold; /* ชื่อผู้เขียนตัวหนา */
    color: #ffc107; /* สีส้มทองสำหรับชื่อผู้เขียน */
    margin-bottom: 5px; /* ระยะห่างจากข้อความคอมเมนต์ */
}

.comment-list .comment-item .comment-date {
    font-size: 0.85em; /* ขนาดฟอนต์เล็กลงสำหรับวันที่ */
    color: #888; /* สีเทาสำหรับวันที่ */
    margin-left: 10px; /* ระยะห่างจากชื่อผู้เขียน */
}

.comment-list .comment-item .comment-text {
    line-height: 1.6; /* ระยะห่างระหว่างบรรทัด */
    margin-top: 10px; /* ระยะห่างจากชื่อผู้เขียน/วันที่ */
}

/* ถ้าคุณมีปุ่มตอบกลับหรือไลค์ภายในคอมเมนต์ */
.comment-list .comment-item .comment-actions {
    margin-top: 10px;
    text-align: right;
}

.comment-list .comment-item .comment-actions button {
    background: none;
    border: none;
    color: #ffc107;
    cursor: pointer;
    font-size: 0.9em;
    margin-left: 15px;
    transition: color 0.3s ease;
}

.comment-list .comment-item .comment-actions button:hover {
    color: #fff;
}


/* Container ของแบนเนอร์ */
.banner-container {
    width: 100%; /* ทำให้แบนเนอร์เต็มความกว้างของคอลัมน์ */
    margin: 20px 0; /* เพิ่มระยะห่างบน-ล่าง จากรูปภาพ */
    text-align: center; /* จัดให้รูปภาพในแบนเนอร์อยู่ตรงกลาง */
    background-color: #f0f0f0; /* อาจมีสีพื้นหลังเล็กน้อย */
    padding: 10px;
    box-sizing: border-box;
}

/* รูปภาพแบนเนอร์ */
.banner-container img {
    max-width: 100%; /* ทำให้รูปภาพย่อ-ขยายตามขนาด container */
    height: auto; /* รักษาสัดส่วนของรูปภาพ */
    display: block; /* แก้ปัญหาช่องว่างปริศนาใต้ภาพ */
    margin: 0 auto; /* จัดกลางอีกชั้น (เผื่อกรณีจำเป็น) */
}




/* เริ่มส่วนของ Mobile Tab Menu */

/* ซ่อนเมนูนี้ในจอใหญ่ (Desktop) */
.mobile-tab-nav {
    display: none; 
}

/* แสดงผลเมนูเมื่อเป็นจอมือถือ (ความกว้างสูงสุด 768px) */
@media (max-width: 768px) {

    .mobile-tab-nav {
    display: block;
    position: static; /* <-- แก้ไขตรงนี้ */
    background-color: #303030;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* <-- ปรับเงาให้อยู่ด้านล่าง */
    /* ไม่ต้องใช้ bottom, left, width, z-index แล้ว */
    }

    .mobile-tab-nav ul {
        display: flex; /* จัดเรียงเมนูแนวนอน */
        justify-content: space-around; /* จัดให้มีระยะห่างเท่าๆ กัน */
        list-style: none;
        margin: 0;
        padding: 5px 0;
    }

    .mobile-tab-nav .nav-link {
        display: flex;
        flex-direction: column; /* จัดเรียงไอคอนกับข้อความแนวตั้ง */
        align-items: center;   /* จัดให้อยู่กึ่งกลาง */
        padding: 8px 12px;
        color: #8e8e8e; /* สีข้อความปกติ */
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s ease, transform 0.2s ease; /* แอนิเมชั่นเปลี่ยนสีและขนาด */
    }
    
    /* สไตล์เมื่อผู้ใช้แตะที่ปุ่ม (มีแอนิเมชั่นเล็กน้อย) */
    .mobile-tab-nav .nav-link:active {
        transform: scale(0.95); /* ย่อขนาดลงเล็กน้อยเมื่อแตะ */
    }

    /* สไตล์สำหรับเมนูที่กำลังถูกเลือก (Active) */
    .mobile-tab-nav .nav-link.active {
        color: #dea506; /* เปลี่ยนสีข้อความเป็นสีฟ้า (หรือสีหลักของเว็บคุณ) */
        font-weight: bold;
    }

    /* ถ้าคุณใส่ไอคอน (แนะนำ) */
    .mobile-tab-nav .nav-link i {
        font-size: 20px;
        margin-bottom: 4px;
    }
}

footer {
    text-align: center;
    padding: 25px 15px;
    margin-top: 40px;
    border-top: 1px solid #333;
    background-color: #121212; /* สีพื้นหลังเดียวกับ body */
    color: #aaa;
}

.footer-links {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* ระยะห่างระหว่างปุ่ม */
}

.footer-btn {
    text-decoration: none;
    color: #e0e0e0;
    background-color: #2a2a2a;
    border: 1px solid #444;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.footer-btn:hover {
    background-color: #ffc107;
    color: #121212;
    border-color: #ffc107;
}

/* ทำให้ปุ่ม Logout เป็นสีแดงเพื่อความแตกต่าง */
.footer-btn.logout-btn {
    background-color: #5a2d2d;
    border-color: #883e3e;
}

.footer-btn.logout-btn:hover {
    background-color: #ff5252;
    color: #fff;
    border-color: #ff5252;
}


/* จบ tab menu mobile

/* =================================
   3. Main Content & Grid Layout
==================================== */
main {
    padding: 20px 15px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Grid Layout - Desktop (4 columns) */
.art-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.art-item {
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1E1E1E;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.art-item:hover {
    transform: translateY(-5px);
    border-color: #FFC700;
}

.art-item a {
    display: block;
    color: inherit;
}

.art-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.art-item p {
    padding: 15px;
    margin: 0;
    font-weight: 500;
    color: #E0E0E0;
    text-align: center;
    font-size: 1.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =================================
   4. Responsive Layout
==================================== */

/* Tablet Layout (768px - 1024px) - 3 columns */
@media (max-width: 1024px) and (min-width: 769px) {
    .art-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Mobile Layout (up to 768px) - 2 columns */
@media (max-width: 768px) {
    .site-header {
        padding: 0 1rem;
    }
    
    /* --- ซ่อนส่วนของ Desktop --- */
    .header-bottom {
        border-top: none; /* เอาเส้นขอบแถวสองออก */
    }
    .main-nav {
        display: none; /* ซ่อนลิงก์เมนูของ Desktop */
    }
    .user-info-desktop {
        display: none;
    }

    /* --- แสดงและจัดวางส่วนของ Mobile --- */
    .header-bottom {
        height: 30px; /* ปรับความสูงแถบเมนูมือถือ */
    }
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 2rem; height: 2rem; background: transparent; border: none;
        cursor: pointer; padding: 0; z-index: 1001;
    }
    .user-info-mobile {
        display: block;
        color: #fff;
    }
    .user-info-mobile .login-btn {
        color: #e4e3e3;
        background-color: #3a3a3a;
        padding: 2px 12px;
        border-radius: 5px;
        font-size: 0.9rem;
    }

    /* --- สไตล์ของเมนูที่สไลด์ออกมา --- */
    .main-nav.is-active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(18, 18, 18, 0.98);
        transform: translateX(0); /* แก้จากของเดิม */
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }
    .main-nav.is-active a {
        font-size: 1.5rem;
        padding: 1.5rem 0;
    }

    /* สไตล์ของปุ่ม Hamburger เมื่อ Active (เป็น X) */
    .hamburger-menu .line { width: 1.2rem; height: 0.15rem; background: #b9b9b9; border-radius: 10px; transition: all 0.3s linear; }
    .hamburger-menu.is-active {
        position: fixed; /* ย้ายปุ่ม X มากับเมนู */
        top: 25px;
        left: 1rem;
    }
    .hamburger-menu.is-active .line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger-menu.is-active .line:nth-child(2) { opacity: 0; }
    .hamburger-menu.is-active .line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

    /* Mobile Grid - 2 columns */
    .art-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .art-item img {
        height: 200px; /* ลดความสูงรูปในมือถือ */
    }
    
    .art-item p {
        font-size: 1rem;
        padding: 10px;
    }
}

/* Extra Small Mobile (up to 480px) - Still 2 columns but smaller */
@media (max-width: 480px) {
    main {
        padding: 15px 10px;
    }
    
    .art-grid {
        gap: 10px;
    }
    
    .art-item img {
        height: 150px; /* ลดความสูงรูปในหน้าจอเล็กมาก */
    }
    
    .art-item p {
        font-size: 0.9rem;
        padding: 8px;
    }
}

/* --- Details Page (Dark Theme) --- */
.post-details-container {
    background-color: #1E1E1E; /* พื้นหลังของส่วน details */
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden; /* สำหรับคุม border-radius */
}

.gallery-top {
    background-color: #000;
}

.post-info-content {
    color: #E0E0E0;
}
.post-info-content h1 {
    color: #FFFFFF;
}
.post-meta {
    color: #AAAAAA; /* สีเทาสำหรับ meta */
}
.post-info-content .description {
    color: #E0E0E0;
}

/* =================================
   6. Page-Specific Overrides
==================================== */

/* ทำให้หน้าที่มี class นี้แสดงผลเต็มความกว้าง */
.full-width-page main {
    max-width: none; /* ยกเลิกการจำกัดความกว้าง */
    padding: 0;      /* เอา padding ด้านข้างออกเพื่อให้เต็มจอจริงๆ */
}

/* ปรับแก้เล็กน้อยสำหรับ container ในหน้า details ให้มีระยะห่างจากขอบบน */
.full-width-page .post-details-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.by-prefix {
    color: #FFD700; /* สีเหลืองทอง */
    /* หรือจะใช้ color: yellow; ก็ได้ครับ */
}
.load-more {
    /* --- เพิ่ม 3 บรรทัดนี้เพื่อจัดกึ่งกลาง --- */
    display: block;          /* 1. ทำให้เป็น block element */
    width: fit-content;      /* 2. กำหนดความกว้างให้พอดีกับเนื้อหา */
    margin: 20px auto;       /* 3. ตั้งค่า margin (บน-ล่าง 20px, ซ้าย-ขวา auto) */

    /* --- สไตล์พื้นฐานเดิม --- */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease; /* (เพิ่ม transition จากตัวอย่างก่อนหน้า) */
}

    /* --- ส่วนของแอนิเมชั่น ✨ --- */
    transition: all 0.3s ease; /* ทำให้การเปลี่ยนแปลงทั้งหมดนุ่มนวลใน 0.3 วินาที */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเล็กน้อย */
}

/* สไตล์เมื่อเมาส์ชี้บนปุ่ม */
.load-more:hover {
    background-color: #0056b3; /* เปลี่ยนสีพื้นหลังให้เข้มขึ้น */
    transform: translateY(-3px); /* ทำให้ปุ่มลอยขึ้น 3px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ดูมีมิติมากขึ้น */
}



.author-link {
    display: inline;
}


/* =================================
   5. Other Sections (Footer, Forms etc.)
==================================== */
/* (โค้ดส่วนอื่นๆ ที่ไม่เกี่ยวกับ Header สามารถนำมาวางต่อจากตรงนี้ได้เลย) */
/* ... */