/* =================================================================== */
/* Knitting Lovers - Custom Stylesheet v3.5                            */
/* (Centered Layout + Enhanced Forms + Original Colors)                */
/* =================================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Sarabun:wght@400;500;700&display=swap');

/* ================================================= */
/* 0. Global Settings & Variables (ตั้งค่าหลักและตัวแปร) */
/* ================================================= */
:root {
    --color-primary: #d147a3; /* Pink */
    --color-secondary: #79c0c4; /* Teal */
    --color-primary-dark-hover: #b5388c; /* Darker Pink */
    --color-bg-light: #f4f7f9; /* Light Grey Blue background */
    --color-white: #fff;
    --color-text-dark: #333;
    --color-text-mid: #555;
    --color-text-soft: #666;
    --color-border-light: #eee;
    --color-border-mid: #ddd;
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-dark: rgba(0, 0, 0, 0.08);
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-info-bg: #d1ecf1;
    --color-info-text: #0c5460;
    
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Sarabun', sans-serif;
    
    --container-width: 1100px;
    --header-height: 70px;
    
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    
    --transition-fast: all 0.2s ease;
}

/* ================================================= */
/* 1. Base Layout & Typography (โครงสร้างเว็บและตัวอักษร) */
/* ================================================= */
body {
    font-family: var(--font-secondary);
    background-color: var(--color-bg-light);
    color: var(--color-text-mid);
    line-height: 1.6;
    margin: 0;
    padding-top: var(--header-height); /* เว้นที่ให้ Header */
    
    /* --- Sticky Footer Fix --- */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Sticky Footer Fix --- */
.main-content {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    font-weight: 600;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}
a:hover {
    color: var(--color-primary-dark-hover);
    text-decoration: underline;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px;
    
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px var(--color-shadow-dark);
    
    margin-top: 30px; 
    margin-bottom: 30px;
}


/* [!!] --- นี่คือโค้ดที่แก้ไขช่องว่าง (ครั้งสุดท้าย) --- [!!] */

/* 1. ลบ margin-top ของ .container "อันแรกสุด" 
 * (ซึ่งก็คือกล่องข้อความแจ้งเตือน หรือกล่องเนื้อหาหลัก ถ้าไม่มีข้อความ)
 */
.main-content > .container:first-child {
    margin-top: 0;
}

/* 2. ลบ padding-top ของ .container "อันสุดท้าย" 
 * (ซึ่งก็คือกล่องเนื้อหาหลักที่เปิดใน header.php และปิดใน footer.php)
 */
.main-content > .container:last-child {
    padding-top: 0;
}
        
/* 3. คืน padding-top (20px) ให้กับ .page-header (หัวข้อ) ที่อยู่ข้างในกล่องนั้น
 * (เพื่อให้หัวข้อ "กระทู้ชุมชน" ไม่ติดขอบบน)
 */
.main-content > .container:last-child > .page-header {
    padding-top: 20px;
}

/* [!!] --- จบส่วนแก้ไขช่องว่าง --- [!!] */


/* ================================================= */
/* 2. Header & Navigation (เมนูส่วนหัว)                 */
/* ================================================= */
.main-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 2px 5px var(--color-shadow-light);
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin: 0 auto; /* ไม่เอา margin บน/ล่าง */
    padding: 0 20px;
    background: none; /* ปิดพื้นหลังขาวของ .container */
    box-shadow: none;
    border-radius: 0;
    
    margin-top: 0; /* [Override] ไม่เอา margin-top ใน header */
}
.nav-left, .main-nav ul {
    display: flex;
    align-items: center;
}
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-nav ul li a {
    padding: 10px 15px;
    font-weight: 500;
    font-family: var(--font-primary);
    color: var(--color-text-mid);
    border-radius: var(--border-radius-sm);
}
.main-nav ul li a:hover, .main-nav ul li a.active {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
    text-decoration: none;
}
.main-nav ul li a i {
    margin-right: 6px;
}
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 25px;
}
.logo-img {
    height: 40px;
    width: 40px;
}
.logo-text {
    font-family: var(--font-primary);
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-primary);
    margin-left: 10px;
}
.logo-text:hover {
    text-decoration: none;
}

.nav-right ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-right ul li {
    margin-left: 15px;
}
.btn-nav {
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
}
.btn-nav:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px var(--color-shadow-light);
}
.btn-nav.btn-login {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-nav.btn-login:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-nav.btn-register {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.btn-nav.btn-register:hover {
    background-color: var(--color-primary-dark-hover);
    border-color: var(--color-primary-dark-hover);
}
.nav-user-link {
    color: var(--color-text-dark);
    font-weight: 500;
    text-decoration: none;
}
.nav-user-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.nav-user-link i {
    margin-right: 6px;
    font-size: 1.2em;
}
.btn-logout {
    color: var(--color-text-mid);
    font-size: 1.3em;
}
.btn-logout:hover {
    color: var(--color-error-text);
}

/* ================================================= */
/* 3. Forms & Buttons (ฟอร์มและปุ่ม)                   */
/* ================================================= */

/* --- [แก้ไข] 3.1 Password Toggle Icon --- */
.password-group {
    position: relative; /* สร้างขอบเขตให้ไอคอน */
}

/* ทำให้ input password มีที่ว่างสำหรับไอคอน */
.password-group input[type="password"],
.password-group input[type="text"] {
    /* (ต้องใส่ !important ถ้ามันไม่ยอมเว้นที่ให้) */
    padding-right: 45px !important; 
}

/* [แก้ไข] บล็อกนี้จะจัดไอคอนให้อยู่กลางช่อง */
.toggle-password-icon {
    position: absolute;
    top: 50%; /* จัดกลางแนวตั้ง */
    right: 15px; /* ระยะห่างจากขอบขวา */
    transform: translateY(-50%); /* จัดกลางแนวตั้งเป๊ะๆ */
    cursor: pointer;
    color: #999;
    transition: var(--transition-fast);
}
.toggle-password-icon:hover {
    color: var(--color-primary);
}

/* --- Layout สำหรับหน้าฟอร์ม (Login, Register) --- */
body.form-page .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - 70px); /* 70px = footer height */
    padding-top: 30px;
}

body.form-page .main-content .container {
    max-width: 500px;
    margin: 30px auto; 
    padding-top: 20px; /* คืนค่า padding-top ให้หน้าฟอร์ม */
}
/* คืนค่า padding-top ให้ .page-header ในหน้าฟอร์ม (ถ้ามี) */
body.form-page .main-content > .container:last-child > .page-header {
    padding-top: 0; 
}


/* --- การ์ดฟอร์ม --- */
.form-card, .form-container {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px var(--color-shadow-dark);
}
.form-card h2, .form-container h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--color-text-dark);
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-dark);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--border-radius-sm);
    font-size: 1em;
    font-family: var(--font-secondary);
    box-sizing: border-box; /* สำคัญมาก */
    transition: var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 5px rgba(209, 71, 163, 0.3);
    outline: none;
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
.form-group small {
    font-size: 0.9em;
    color: var(--color-text-soft);
}
.form-button-group {
    text-align: center;
    margin-top: 25px;
}
.form-text-link {
    text-align: center;
    margin-top: 20px;
}
.form-text-link p {
    margin: 8px 0;
}

/* --- [!!] ลบโค้ดที่ขัดแย้งกัน (ส่วนล่าง) ออกไปแล้ว --- */
/*
.password-group {
    position: relative;
}
.toggle-password-icon {
    position: absolute;
    top: 45px;
    right: 15px;
    cursor: pointer;
    color: #999;
}
.toggle-password-icon:hover {
    color: var(--color-primary);
}
*/
/* --- [!!] จบส่วนที่ลบ --- */


/* --- ปุ่ม (Buttons) --- */
.btn {
    display: inline-block;
    padding: 12px 25px;
    font-family: var(--font-primary);
    font-size: 1em;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-fast);
}
.btn:hover {
    background-color: var(--color-primary-dark-hover);
    border-color: var(--color-primary-dark-hover);
    box-shadow: 0 4px 8px var(--color-shadow-light);
    transform: translateY(-2px);
    text-decoration: none;
}
.btn.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn.btn-secondary:hover {
    background-color: #63a9ad;
    border-color: #63a9ad;
}
.btn.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn.btn-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
}
.btn.btn-outline {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-block {
    display: block;
    width: 100%;
}

/* ================================================= */
/* 4. Common Components (ส่วนประกอบอื่นๆ)             */
/* ================================================= */

/* --- Page Header (หัวข้อของหน้า) --- */
.page-header {
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: 30px;
}
.page-header h2 {
    margin: 0 0 5px 0;
    font-size: 2em;
}
.page-header p {
    font-size: 1.1em;
    color: var(--color-text-soft);
    margin: 0;
}

/* --- Message Box (กล่องข้อความแจ้งเตือน) --- */
.message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
}
.message.success {
    background-color: var(--color-success-bg);
    border-color: #c3e6cb;
    color: var(--color-success-text);
}
.message.error {
    background-color: var(--color-error-bg);
    border-color: #f5c6cb;
    color: var(--color-error-text);
}
.message.info {
    background-color: var(--color-info-bg);
    border-color: #bee5eb;
    color: var(--color-info-text);
}

/* --- Footer --- */
.main-footer {
    text-align: center;
    padding: 20px;
    background-color: #343a40;
    color: #f8f9fa;
    margin-top: 40px;
}

/* ทำให้ .container ที่อยู่ใน .main-footer โปร่งใส */
.main-footer .container {
    background-color: transparent;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
}


/* --- Admin Dashboard --- */
.admin-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}
.admin-menu-item {
    background-color: var(--color-white);
    padding: 25px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--color-border-light);
    text-align: center;
    text-decoration: none;
    transition: var(--transition-fast);
}
.admin-menu-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-dark);
    border-color: var(--color-primary);
    text-decoration: none;
}
.admin-menu-item i {
    font-size: 3em;
    color: var(--color-primary);
    margin-bottom: 15px;
}
.admin-menu-item span {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-text-dark);
}

/* --- Admin Tables --- */
.admin-table-container {
    overflow-x: auto;
}
.admin-table-container table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
    box-shadow: var(--shadow-light);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}
.admin-table-container th,
.admin-table-container td {
    padding: 15px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    vertical-align: middle;
}
.admin-table-container th {
    background-color: #f8f9fa;
    font-family: var(--font-primary);
    font-weight: 600;
}
.admin-table-container tr:last-child td {
    border-bottom: none;
}
.admin-table-container tr:hover {
    background-color: #fdfcff;
}
.table-actions a, .btn-action {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--color-white);
    font-size: 0.9em;
    font-weight: 500;
    margin-right: 5px;
}
.btn-action.edit { background-color: var(--color-secondary); }
.btn-action.edit:hover { background-color: #63a9ad; }
.btn-action.delete { background-color: #dc3545; }
.btn-action.delete:hover { background-color: #c82333; }
.btn-action.view { background-color: #007bff; }
.btn-action.view:hover { background-color: #0069d9; }

.status-active { color: #28a745; font-weight: 500; }
.status-inactive { color: #dc3545; font-weight: 500; }
.status-active i, .status-inactive i { margin-right: 5px; }

.back-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--color-text-mid);
    font-weight: 500;
}
.back-link:hover { color: var(--color-primary); }

/* --- Pagination --- */
.pagination {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 30px 0;
    list-style: none;
}
.pagination a {
    color: var(--color-primary);
    padding: 10px 15px;
    text-decoration: none;
    transition: var(--transition-fast);
    border: 1px solid var(--color-border-mid);
    margin: 0 3px;
    border-radius: var(--border-radius-sm);
}
.pagination a:hover {
    background-color: #fce3f6;
    border-color: var(--color-primary);
}
.pagination a.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    cursor: default;
}
.pagination a.prev-next {
    font-weight: 600;
}

/* --- Community Page (community.php) --- */
.post-list-container {
    max-width: 800px;
    margin: 0 auto;
}
.post-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    margin-bottom: 25px;
    box-shadow: var(--shadow-light);
}
.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border-light);
}
.post-user {
    font-weight: 600;
    color: var(--color-primary);
}
.post-meta {
    font-size: 0.9em;
    color: var(--color-text-soft);
}
.post-body {
    padding: 20px;
}
.post-content {
    margin-bottom: 15px;
    line-height: 1.7;
    white-space: pre-wrap; /* รักษากการเว้นบรรทัด */
    word-wrap: break-word;
}
.post-image-container img {
    max-width: 100%;
    max-height: 500px;
    border-radius: var(--border-radius-sm);
    margin-top: 15px;
}
.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #fdfdff;
    border-top: 1px solid var(--color-border-light);
}
.post-actions .btn-like {
    color: var(--color-secondary);
    font-size: 1.1em;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: var(--border-radius-sm);
}
.post-actions .btn-like.liked {
    color: var(--color-white);
    background-color: var(--color-secondary);
}
.post-stats span {
    margin-left: 15px;
    color: var(--color-text-soft);
}
.read-more-link {
    font-weight: 600;
}

/* --- Shop Page (shops.php) --- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.shop-card-link {
    text-decoration: none;
}
.shop-card {
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    transition: var(--transition-fast);
    border: 1px solid var(--color-border-light);
}
.shop-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-dark);
}
.shop-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.shop-card-content {
    padding: 20px;
}
.shop-card-title {
    margin: 0 0 10px 0;
    font-size: 1.3em;
    color: var(--color-primary);
}
.shop-card-description-short {
    color: var(--color-text-mid);
    height: 4.5em; /* 3 lines */
    overflow: hidden;
}
.shop-card-readmore {
    display: block;
    margin-top: 15px;
    font-weight: 600;
    color: var(--color-secondary);
}

/* --- Lesson Page (lessons.php) --- */
.lesson-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
.lesson-item-link {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    padding: 20px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: var(--transition-fast);
}
.lesson-item-link:hover {
    border-color: var(--color-primary);
    transform: translateX(5px);
    text-decoration: none;
}
.lesson-item-icon {
    font-size: 1.8em;
    color: var(--color-secondary);
    margin-right: 20px;
}
.lesson-item-title h3 {
    margin: 0;
    color: var(--color-text-dark);
    font-size: 1.25em;
}
.lesson-item-status {
    margin-left: auto;
    font-size: 1.5em;
    color: #28a745; /* Green */
}

/* --- Lesson Detail (lesson_detail.php) --- */
.lesson-content {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--color-border-light);
    line-height: 1.7;
    font-size: 1.1em;
}
.lesson-content h1, .lesson-content h2, .lesson-content h3 {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-border-light);
    padding-bottom: 5px;
    margin-top: 1.5em;
}
.lesson-content h1 { font-size: 1.8em; }
.lesson-content h2 { font-size: 1.5em; }
.lesson-content h3 { font-size: 1.3em; border-bottom: none; }
.lesson-content p {
    margin-bottom: 1.5em;
}
.lesson-content ul, .lesson-content ol {
    margin-bottom: 1.5em;
    padding-left: 30px;
}
.lesson-content li {
    margin-bottom: 0.5em;
}
.lesson-content pre {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius-sm);
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
}
.lesson-content code {
    background-color: #fdf2f9;
    color: #c92c89;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
}
.lesson-content blockquote {
    border-left: 4px solid var(--color-secondary);
    padding-left: 15px;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--color-text-soft);
}
.lesson-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    margin: 1em 0;
}

/* --- Quiz Section --- */
.quiz-container {
    margin-top: 40px;
}
.quiz-header {
    text-align: center;
    margin-bottom: 20px;
}
#quiz-timer {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-primary);
}
#quiz-form {
    display: none; /* ซ่อนไว้ก่อนจนกว่า Timer จะหมด */
}
.quiz-question-card {
    background-color: var(--color-white);
    padding: 25px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    margin-bottom: 25px;
    border-left: 5px solid var(--color-secondary); /* แถบสีด้านซ้าย */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.quiz-question-card .question-text {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 25px 0; /* เพิ่มระยะห่างด้านล่าง */
}

/* --- ตัวเลือก (Radio Button) --- */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 15px; /* ระยะห่างระหว่างตัวเลือก */
}

.quiz-options label {
    display: block; /* ทำให้คลิกได้ทั้งแถบ */
    font-size: 1.1em;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid var(--color-border-light);
}

.quiz-options label:hover {
    background-color: #f1f3f5;
    border-color: var(--color-secondary);
}

.quiz-options input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.1); /* ขยายปุ่ม */
}

/* ================================================= */
/* 5. Homepage Layout (Sidebar) (โค้ดใหม่)          */
/* ================================================= */

/* --- Sticky Footer Fix --- */
body.layout-homepage {
    display: block;
    min-height: auto;
	padding-top: 0;
}

/* --- 5.1 ซ่อน Header และ Footer เดิมเฉพาะหน้าหลัก --- */
body.layout-homepage .main-header {
    display: none !important; /* ซ่อนเมนูบน */
}
body.layout-homepage .main-content {
    padding-top: 0;
    flex-grow: 0; /* Sticky Footer Fix: ไม่ต้องยืดในหน้าหลัก */
}
body.layout-homepage .main-content > .container {
    max-width: 100%;
    padding: 0;
    box-shadow: none;
    background: none;
    border: none;
    margin-top: 0; /* [Override] หน้าหลักไม่เอา margin-top */
}
body.layout-homepage .main-footer {
    display: none !important; /* ซ่อน footer ล่าง */
}

/* --- 5.2 ส่วนหัวใหม่ (โลโก้ + แบนเนอร์) --- */
.homepage-header-area {
    background: var(--color-white);
    padding: 20px 0 0 0;
    border-bottom: 1px solid var(--color-border-mid);
}
.logo-container-homepage {
    text-align: center;
    margin-bottom: 20px;
}
.logo-container-homepage a {
    text-decoration: none;
    color: var(--color-text-dark);
    display: inline-block;
}
.logo-container-homepage .logo-img {
    height: 50px;
    width: 50px;
    vertical-align: middle;
}
.logo-container-homepage h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 2em;
    font-weight: 700;
    margin: 0 0 0 10px;
    color: var(--color-primary);
}
.hero-section-homepage {
    text-align: center;
    padding: 30px;
    background-color: #fce3f6;
    border-top: 1px solid #f9cceb;
}
.hero-section-homepage h2 { margin-top: 0; }

/* --- 5.3 แถบ Login/Register ใต้แบนเนอร์ --- */
.homepage-auth-bar {
    background-color: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.homepage-auth-bar .container-auth-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.homepage-auth-bar .auth-links {
    display: flex; 
    gap: 15px; 
}

.homepage-auth-bar .auth-links a {
    padding: 10px 20px;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    line-height: 1.5;
}

.homepage-auth-bar .auth-links a i {
    margin-right: 8px;
}

.homepage-auth-bar .btn-nav.btn-login {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.homepage-auth-bar .btn-nav.btn-login:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.homepage-auth-bar .btn-nav.btn-register {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
}
.homepage-auth-bar .btn-nav.btn-register:hover {
    background-color: var(--color-primary-dark-hover);
    border-color: var(--color-primary-dark-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.homepage-auth-bar .auth-welcome {
    display: flex;
    align-items: center;
    gap: 20px;
}
.btn-logout-sidebar {
    background-color: var(--color-border-light);
    color: var(--color-text-mid);
    padding: 8px 15px;
    border-radius: var(--border-radius-md);
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
}
.btn-logout-sidebar:hover {
    background-color: #e2e6ea;
    transform: translateY(-2px);
}
.homepage-auth-bar .nav-user-link {
    font-weight: 600;
    color: var(--color-text-dark);
    text-decoration: none;
}
.homepage-auth-bar .nav-user-link:hover {
    color: var(--color-primary);
}

/* --- 5.4 Layout Sidebar หลัก --- */
.container-sidebar-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.sidebar-layout-container {
    display: flex;
    margin: 30px 0;
    gap: 30px;
}

/* (1) Sidebar (เมนูด้านซ้าย) */
.sidebar-nav {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--color-white);
    padding: 20px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    height: fit-content;
    border: 1px solid var(--color-border-light);
}
.sidebar-nav h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-border-light);
    padding-bottom: 10px;
    margin-top: 0;
}
.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: var(--color-text-mid);
    padding: 12px 15px;
    border-radius: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    transition: var(--transition-fast);
}
.sidebar-nav li a:hover,
.sidebar-nav li a.active {
    background-color: #fce3f6;
    color: var(--color-primary);
}
.sidebar-nav li a i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

/* (2) Content (เนื้อหาด้านขวา) */
.sidebar-content-main {
    flex-grow: 1;
    min-width: 0;
}

/* --- 5.5 Responsive for Sidebar --- */
@media (max-width: 1024px) {
    .sidebar-layout-container {
        flex-direction: column;
    }
    .sidebar-nav {
        width: 100%;
        height: auto;
    }
    .post-summary-card {
        width: 48%;
    }
}
@media (max-width: 600px) {
    .post-list {
        flex-direction: column;
    }
    .post-summary-card {
        width: 100%;
    }
    .logo-container-homepage h1 {
        font-size: 1.5em;
    }
    .logo-container-homepage .logo-img {
        height: 40px;
        width: 40px;
    }
    
    .homepage-auth-bar .container-auth-bar {
        justify-content: center; /* จัดกลาง */
    }
    .homepage-auth-bar .auth-links {
        flex-direction: column; /* เปลี่ยนเป็นแนวตั้ง */
        width: 90%; 
        max-width: 350px;
    }
    .homepage-auth-bar .auth-links a {
        width: 100%; 
        text-align: center; 
        margin-left: 0;
        padding: 10px 15px;
        font-size: 1em;
    }
}

/* ================================================= */
/* 6. Gateway Page (learn_gateway.php)               */
/* ================================================= */

.gateway-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    border-top: 4px solid var(--color-primary);
}
.gateway-header h2 i {
    color: var(--color-primary);
}

.gateway-container {
    display: flex; 
    justify-content: center; 
    gap: 30px;
    flex-wrap: wrap; 
}

.gateway-card {
    flex-basis: 400px;
    flex-grow: 1;
    max-width: 450px;
    
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    text-decoration: none;
    color: var(--color-text-mid);
    padding: 25px;
    display: flex; 
    align-items: center;
    gap: 25px;
    border: 1px solid var(--color-border-light);
    transition: var(--transition-fast);
}

.gateway-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-dark);
    border-color: var(--color-primary);
}

.gateway-card .gateway-icon {
    flex-shrink: 0;
    font-size: 2.5em; 
    color: var(--color-primary);
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    background-color: #fce3f6;
    border-radius: 50%;
    line-height: 1; 
}

.gateway-card .gateway-content h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 5px 0;
}

.gateway-card .gateway-content p {
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
}

/* --- Responsive (สำหรับมือถือ) --- */
@media (max-width: 768px) {
    .gateway-container {
        flex-direction: column;
        gap: 20px;
    }

    .gateway-card {
        flex-basis: 100%;
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* ================================================= */
/* 7. Lesson Detail (Quiz Results & Leaderboard)     */
/* ================================================= */

.lesson-content-card {
}
.quiz-timer-message {
    text-align: center;
    font-size: 1.2em;
    font-weight: 500;
    color: var(--color-text-mid);
    margin-bottom: 20px;
}
.login-prompt-quiz {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: var(--border-radius-md);
}
.no-content-message {
    text-align: center;
    color: var(--color-text-soft);
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: var(--border-radius-md);
}
.back-link-container {
    margin-top: 30px;
    text-align: center;
}

.leaderboard-container {
    margin-top: 40px;
}
.leaderboard-container h2 { 
    font-size: 1.6em;
    text-align: center;
    margin-bottom: 25px;
    color: var(--color-secondary);
}
.leaderboard-container h2 i {
     color: #ffc107; 
}
.no-leaderboard-message {
    text-align: center;
    color: var(--color-text-soft);
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: var(--border-radius-md);
}
.no-leaderboard-message p {
    margin: 5px 0;
}

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
}
.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border-light);
}
.leaderboard-item:last-child {
    border-bottom: none;
}
.leaderboard-item:hover {
    background-color: #fdfcff;
}

.leaderboard-rank {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-primary);
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}
.leaderboard-name {
    font-weight: 600;
    color: var(--color-text-dark);
    flex-grow: 1; 
}
.leaderboard-time {
    color: var(--color-text-mid);
    font-weight: 500;
    margin-left: 15px;
    font-size: 0.9em;
}
.leaderboard-time i {
    margin-right: 4px;
}
.leaderboard-score {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-primary);
    width: 80px;
    text-align: right;
    margin-left: 15px;
}

.leaderboard-rank .gold-medal {
    color: #FFD700; 
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
.leaderboard-rank .silver-medal {
    color: #C0C0C0; 
    text-shadow: 0 0 5px rgba(192, 192, 192, 0.5);
}
.leaderboard-rank .bronze-medal {
    color: #CD7F32; 
    text-shadow: 0 0 5px rgba(205, 127, 50, 0.5);
}

/* ================================================= */
/* 8. Homepage Content Modules (from index.php)      */
/* ================================================= */

.btn-primary-outline { background-color: white; color: #d147a3; border: 2px solid #d147a3; padding: 8px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.2s; }
.btn-primary-outline:hover { background-color: #fce3f6; }

.post-list { display: flex; gap: 20px; flex-wrap: wrap; }

.post-summary-card { 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    width: 31%; 
    min-width: 280px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}
.post-image-summary { width: 100%; height: 180px; object-fit: cover; display: block; background-color: #eee; }
.post-card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.post-content-preview { font-size: 1.1em; font-weight: bold; color: #333; margin: 0 0 10px 0; line-height: 1.4; height: 40px; overflow: hidden; }
.post-title-link { text-decoration: none; }
.post-title-link:hover .post-content-preview { color: #79c0c4; }

.post-footer-summary { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px; 
    margin-top: auto;
}
.badge-like { color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8em; margin-left: 5px; background-color: #79c0c4; }

.btn-read-more { 
    background-color: #f0f0f0; 
    color: #555; 
    text-decoration: none; 
    padding: 5px 10px; 
    border-radius: 4px; 
    font-size: 0.9em; 
    transition: background-color 0.2s; 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
    margin-top: 10px; 
}
.btn-read-more:hover { background-color: #e0e0e0; }

.list-group { margin-bottom: 20px; }
.list-group-item { 
    background: #fff; 
    border: 1px solid #ddd; 
    padding: 15px; 
    margin-bottom: 10px; 
    border-radius: 5px; 
    text-decoration: none; 
    color: #333; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: all 0.2s; 
    border-left: 5px solid #79c0c4; 
}
.list-group-item:hover { background-color: #f7f7f7; border-left-color: #d147a3; }

.lesson-title-text { 
    font-weight: 500; 
    font-size: 1.1em; 
    color: #333; 
}

.lesson-start-button { color: #d147a3; font-weight: bold; font-size: 0.9em; }
.btn-outline-alt { color: #79c0c4; border-color: #79c0c4; }
.btn-outline-alt:hover { background-color: #e4f4f5; }
.section-link { text-align: center; margin-top: 25px; }
.no-content-message { text-align: center; color: #777; padding: 20px; }
hr.sidebar-divider { border-top: 1px dashed #ddd; margin: 40px 0; }

@media (max-width: 900px) { 
    .post-list { justify-content: space-around; } 
    .post-summary-card { width: 45%; } 
}
@media (max-width: 768px) { 
    .post-list { flex-direction: column; } 
    .post-summary-card { width: 100%; } 
}


/* ================================================= */
/* 9. Sidebar Widget Fixes (from image_31b60e.png)   */
/* ================================================= */

.section-box h3,
.section-box h4,
.section-box p {
    color: var(--color-text-dark); 
}

.section-box .btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.section-box .btn:hover {
    background-color: var(--color-primary-dark-hover);
    border-color: var(--color-primary-dark-hover);
}

 
/* ทำให้ปุ่ม .btn-read-more (ปุ่มอ่านต่อ) ยังเป็นสีเทาเหมือนเดิม */
.section-box .btn.btn-read-more {
    background-color: #f0f0f0; 
    color: #555;
    border-color: transparent;
}
.section-box .btn.btn-read-more:hover {
    background-color: #e0e0e0;
}

/* ทำให้ปุ่ม .btn-outline-alt (ปุ่มสีฟ้าอ่อน) ยังเป็นเหมือนเดิม */
.section-box .btn.btn-outline-alt { 
    color: #79c0c4; 
    border-color: #79c0c4;
    background-color: var(--color-white);
}
.section-box .btn.btn-outline-alt:hover { 
    background-color: #e4f4f5; 
}

/* ทำให้ปุ่ม .btn-primary-outline (ปุ่มสีชมพูขอบ) ยังเป็นเหมือนเดิม */
.section-box .btn.btn-primary-outline {
    background-color: white; 
    color: #d147a3; 
    border: 2px solid #d147a3;
}
.section-box .btn.btn-primary-outline:hover { 
    background-color: #fce3f6; 
}

/* ================================================= */
/* 10. Top-Gap Fix (FORCE OVERRIDE)          */
/* (บังคับลบช่องว่างด้านบนสุด)                       */
/* ================================================= */

/* 1. ลบ margin-top ของ .container "อันแรก" (กล่องข้อความ) */
.main-content > .container:first-child {
    margin-top: 0 !important;
}

/* 2. ลบ padding-top ของ .container "อันสุดท้าย" (กล่องเนื้อหาหลัก) */
.main-content > .container:last-child {
    padding-top: 0 !important;
}
        
/* 3. คืน padding-top (20px) ให้กับ .page-header (หัวข้อ) ที่อยู่ข้างในกล่องนั้น */
.main-content > .container:last-child > .page-header {
    padding-top: 20px !important;
}

/* ================================================= */
/* 11. Profile Picture Styles (สไตล์รูปโปรไฟล์)     */
/* ================================================= */

/* --- 11.1 รูปโปรไฟล์บน Header (Nav Bar) --- */
.nav-user-link {
    display: flex;
    align-items: center;
}

.nav-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    object-fit: cover;  /* ป้องกันรูปบิดเบี้ยว */
    margin-right: 10px;
    border: 2px solid var(--color-border-light);
    background-color: var(--color-bg-light); /* สีพื้นหลังเผื่อรูปโหลดไม่ขึ้น */
}

/* --- 11.2 รูปโปรไฟล์หน้า Profile (profile.php) --- */
.profile-picture-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
}

.profile-picture-display {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--color-white);
    box-shadow: 0 5px 15px var(--color-shadow-dark);
    background-color: var(--color-bg-light);
}

/* --- 11.3 ฟอร์มอัพโหลดรูป (profile.php) --- */
.profile-upload-form {
    /* (ใช้ .styled-form อยู่แล้ว) */
}

/* ซ่อน <input type="file"> ที่หน้าตาไม่สวยไป */
.profile-upload-form input[type="file"]#profile_image_input {
    display: none;
}

/* [!! แก้ไข !!] ทำให้ปุ่ม <label> ไม่ยืดเต็ม 100% */
.profile-upload-form label[for="profile_image_input"] {
    cursor: pointer;
    display: inline-block; /* เปลี่ยนจาก display: block */
}

.profile-upload-form .form-text {
    display: block;
    text-align: center;
    font-size: 0.85em;
    margin-top: 10px;
}

/* (ปุ่ม .btn-block เผื่อใช้ที่อื่น) */
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* [!! เพิ่ม !!] คลาสช่วยจัดกลาง (สำคัญมาก) */
.text-center {
    text-align: center !important; /* ใช้ !important เพื่อ override .form-button-group */
}

/* ================================================= */
/* 12. Chat Room Styles (ห้องพูดคุย)                 */
/* ================================================= */

/* ส่วนหัวของห้องแชท (ชื่อห้อง+ปุ่ม) */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border-mid);
    border-bottom: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
.chat-header h3 {
    margin: 0;
    color: var(--color-text-dark);
}

/* กล่องแชทหลัก (ครอบ .chat-messages และ .chat-input-area) */
.chat-container {
    border: 1px solid var(--color-border-mid);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    height: 70vh; /* ความสูงของกล่องแชท (ปรับได้) */
    min-height: 450px;
    box-shadow: var(--color-shadow-light);
}

/* กล่องแสดงข้อความ */
.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: var(--color-bg-light);
}

/* [!!] นี่คือ CSS ที่แก้ไขแล้ว [!!] */

/* กล่องสำหรับพิมพ์ข้อความ (ครอบ textarea และ button) */
.chat-input-area {
    display: flex; /* จัด textarea และ button แนวนอน */
    align-items: flex-end; /* ให้ชิดล่าง (เผื่อ textarea ยืด) */
    padding: 15px;
    border-top: 1px solid var(--color-border-light);
    gap: 10px; /* ระยะห่างระหว่างกล่องพิมพ์กับปุ่ม */
    background: var(--color-white);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

/* กล่อง textarea ที่เราเปลี่ยนมาใช้ */
.chat-input-area textarea#message-input {
    flex-grow: 1; /* ให้ textarea ยืดเต็มพื้นที่ที่เหลือ */
    resize: vertical; /* อนุญาตให้ผู้ใช้ยืดแนวตั้งได้ */
    font-family: var(--font-body);
    font-size: 1em;
    line-height: 1.5;
    padding: 10px 15px; /* ทำให้ขนาดใกล้เคียง .form-control */
    border: 1px solid var(--color-border-mid);
    border-radius: var(--border-radius-sm);
    min-height: 46px; /* ความสูงขั้นต่ำ (เท่าปุ่ม) */
    max-height: 150px; /* ความสูงสูงสุด (กันยืดเพลิน) */
}

/* ปุ่มส่ง (ไอคอน) */
.chat-input-area #send-message-btn {
    flex-shrink: 0; /* ไม่ให้ปุ่มโดนบีบ */
    height: 46px; /* ทำให้ปุ่มสูงเท่า textarea ขั้นต่ำ */
    width: 46px;
    font-size: 1.2em; /* ปรับขนาดไอคอน */
    padding: 0;
}

/* ================================================= */
/* 13. Form Password Toggle Icon Fix (แก้ไอคอนตา)     */
/* (นี่คือโค้ดฉบับแก้ไขล่าสุด)                        */
/* ================================================= */

/* * เราจะใช้ .form-group เป็นตัวอ้างอิง (position: relative) 
 * ซึ่งในโค้ด style.css ของคุณ (ด้านบน) มีอยู่แล้ว
 */

.toggle-password-icon {
    position: absolute;
    right: 10px;
    
    /* 1. ยึดที่ด้านล่างของ .form-group */
    bottom: 0; 
    
    /* 2. กำหนดความสูงให้ "เท่ากับ" ความสูงของ Input (ซึ่งคือ 46px) */
    height: 30px; 
    
    /* 3. [สำคัญ] ใช้ Flexbox จัดให้อยู่กลางแนวตั้ง (ของ 46px นี้) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 4. สไตล์อื่นๆ และล้างค่าเก่า */
    width: 30px;
    cursor: pointer;
    color: #999;
    top: auto; /* ล้างค่า top */
    transform: none; /* ล้างค่า transform */
    padding-top: 0; /* ล้างค่า padding-top */
}

.toggle-password-icon:hover {
    color: var(--color-primary);
}

/* * แก้ไขสำหรับหน้า Register.php ที่มี <small> 
 * ทำให้ไอคอนขยับลงมา 20px (ขนาดของ <small>)
 */
.form-group.has-small-text .toggle-password-icon {
    bottom: 20px; 
}

/* ================================================= */
/* 14. Back Button (ปุ่มย้อนกลับ)                 */
/* ================================================= */
.btn-back {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-text-soft); /* สีเทาอ่อนๆ */
    text-decoration: none;
    font-size: 0.95em;
    margin-bottom: 20px; /* เว้นระยะห่างจากเนื้อหาข้างล่าง */
    transition: var(--transition-fast);
}
.btn-back i {
    margin-right: 8px;
    color: var(--color-primary); /* ไอคอนสีชมพู */
}
.btn-back:hover {
    color: var(--color-primary); /* โฮเวอร์แล้วเป็นสีชมพู */
    text-decoration: none;
}

/* ================================================= */
/* 15. Star Rating System (ระบบดาว)                 */
/* ================================================= */

/* --- 1. สไตล์สำหรับ "ฟอร์ม" การให้คะแนน (ใน tutorial_detail.php) --- */

.star-rating {
  display: flex;
  flex-direction: row-reverse; /* [สำคัญ] กลับด้านลำดับดาว (จาก 5-1 เป็น 1-5) */
  justify-content: flex-end;   /* [สำคัญ] ให้ดาวชิดซ้าย (เมื่อกลับด้านแล้ว) */
  font-size: 2.5em;          /* ขนาดดาวใหญ่ขึ้น */
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* ซ่อน Radio Button จริง */
.star-rating input[type="radio"] {
  display: none;
}

/* สไตล์ของดาว (Label '★') */
.star-rating label {
  color: #ccc;               /* สีดาว (ว่าง) */
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0 3px;
  text-shadow: 1px 1px 2px #00000030; /* เพิ่มเงาเล็กน้อย */
}

/* เมื่อ Hover (ดาวที่ hover และดาวก่อนหน้า) */
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #f39c12; /* สีดาว (Hover - ส้ม) */
}

/* เมื่อ Checked (ดาวที่ check และดาวก่อนหน้า) */
.star-rating input[type="radio"]:checked ~ label {
  color: #f39c12; /* สีดาว (Selected - ส้ม) */
}


/* --- 2. สไตล์สำหรับ "แสดงผล" ดาว (คะแนนเฉลี่ย, ในรีวิว) --- */
.star-display {
  font-size: 1.2em;
  color: #ccc; /* สีดาวว่าง (Default) */
  letter-spacing: 2px;
}

/* ใช้ class .star-filled เพื่อทับสีดาวที่เต็ม */
.star-display .star-filled {
  color: #f39c12; /* สีดาวเต็ม (ส้ม) */
}

/* ================================================= */
/* 16. Ultra Mobile Optimization (No Wrap Header)    */
/* ================================================= */

/* ตั้งค่าเบื้องต้นซ่อนส่วนที่ไม่เกี่ยว */
.mobile-menu-toggle, .mobile-only-item { display: none; }

@media (max-width: 768px) {
    /* --- [จุดที่ 1: แก้ไขหน้าหลักยืด และ Header มีช่องว่าง] --- */
    html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .main-header {
        height: 60px !important;
        position: sticky;
        top: 0;
        z-index: 2000;
        padding: 0 !important;
        width: 100% !important;
        left: 0;
    }

    .nav-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        height: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box;
    }

    .logo-link {
        flex-shrink: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .logo-img { height: 28px !important; width: auto; }

    .logo-text {
        font-size: 1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- [จุดที่ 2: แก้ช่องค้นหากับปุ่มค้นหาทับกัน] --- */
    .search-container form, 
    .search-form, 
    .community-header form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .search-container input, 
    .search-container button,
    .search-form input,
    .search-form button {
        width: 100% !important;
        margin: 0 !important;
        height: 48px !important;
        position: static !important;
    }

    /* --- [จุดที่ 3: ปรับแต่งโปรไฟล์ใหม่ (ปุ่มกลมมุมล่าง)] --- */
    .profile-header, .profile-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 10px !important;
    }

    .profile-image-container {
        position: relative !important; /* [สำคัญ] เพื่อให้ปุ่มอ้างอิงตำแหน่งรูป */
        width: 130px !important;      /* ล็อกขนาดความกว้าง */
        height: 130px !important;     /* ล็อกขนาดความสูง */
        margin: 0 auto 20px auto !important; /* จัดกึ่งกลางหน้าจอ */
        display: block !important;
    }

    /* รูปโปรไฟล์วงกลมพรีเมียม */
    .profile-image-container img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        border: 4px solid var(--color-white) !important;
        box-shadow: 0 4px 15px rgba(209, 71, 163, 0.1) !important;
        object-fit: cover !important;
        margin: 0 !important;
    }

    /* ปุ่มเปลี่ยนโปรไฟล์ ทรงกลมลอยที่มุมขวาล่าง */
    .profile-image-container .btn,
    .profile-image-container button,
    .btn-change-photo,
    .edit-avatar-btn {
        position: absolute !important;
        bottom: 0px !important;
        right: 0px !important;
        
        /* เปลี่ยนเป็นทรงกลมขนาดกะทัดรัด */
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        
        background-color: var(--color-primary) !important;
        color: white !important;
        border: 3px solid var(--color-white) !important; /* ตัดขอบขาวให้ดูเด่น */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        z-index: 10;
    }

    /* หากในปุ่มมีตัวหนังสือ ให้ซ่อนไว้โชว์แค่ไอคอน */
    .profile-image-container .btn span,
    .profile-image-container .btn-text {
        display: none !important;
    }

    /* --- ส่วนเมนูมือถือ และการจัดหน้าทั่วไป --- */
    .nav-wrapper { display: flex; align-items: center; }
    .nav-right-desktop { display: none !important; }

    .mobile-menu-toggle {
        display: flex !important;
        background: var(--color-primary-dark-hover);
        color: #fff;
        border: none;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        cursor: pointer;
        flex-shrink: 0;
    }

    .main-nav {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #fff;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 9999;
    }

    .main-nav.show { max-height: 100vh; }
    .nav-list { flex-direction: column !important; padding: 0 !important; }
    .nav-list li { width: 100%; border-bottom: 1px solid #f0f0f0; }
    .nav-list li a {
        padding: 15px 25px !important;
        display: flex !important;
        align-items: center;
        gap: 12px;
        color: var(--color-text-dark) !important;
    }

    .mobile-only-item { display: block !important; }

    .container { width: 100% !important; padding: 10px 15px !important; box-sizing: border-box; }
    .tutorial-grid, .shop-grid, .post-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
    
    /* ปุ่มในเนื้อหาทั่วไปให้เต็มจอ */
    .btn, .main-content button:not(.mobile-menu-toggle), .button { 
        width: 100% !important; 
        border-radius: 12px !important; 
        padding: 14px !important; 
    }
}

/* ================================================= */
/* 17. Desktop Fix (ให้คอมกลับมาเรียงสวยเหมือนเดิม)      */
/* ================================================= */
@media (min-width: 769px) {
    .nav-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
    .nav-wrapper { display: flex; align-items: center; gap: 30px; }
    .main-nav { display: block !important; }
    .nav-list { display: flex; flex-direction: row; gap: 20px; }
    .nav-right-desktop { display: flex; align-items: center; gap: 15px; }
    
    /* คืนค่าโปรไฟล์บนคอม */
    .profile-header { flex-direction: row !important; text-align: left !important; align-items: flex-start !important; }
    .profile-image-container { 
        position: relative !important;
        width: 150px !important;
        height: 150px !important;
        margin: 0 30px 0 0 !important; 
    }
    .profile-image-container img { width: 100% !important; height: 100% !important; border-radius: 50% !important; }
}