/*
Theme Name: Math Sheet Theme
Author: Your Name
Description: ธีมสำหรับแจกแบบฝึกหัดคณิตศาสตร์ ป.6
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;700&display=swap');

:root {
	--primary-color: #2c3e50;
	--accent-color: #e74c3c;
	--bg-color: #f4f7f6;
	--paper-shadow: 0 0 10px rgba(0,0,0,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Sarabun', sans-serif; /* แนะนำให้ใช้ Font Google เพื่อความอ่านง่าย */
}

body {
    /*background-color: #f4f7f6;*/
	background-color: var(--bg-color);
	margin: 0;
	padding: 0;
    color: #333;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

/* 2. Header & Navigation */
header {
	background-color: #2c3e50;
    color: white;
    /* ลบ padding เดิมออก เพื่อให้ควบคุมพื้นที่ได้แม่นยำขึ้น */
    padding: 0; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;	
	
}

nav {
	max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px; /* เพิ่ม Padding ที่นี่แทน */	
}


/* ตกแต่งแถบโฆษณา */
.header-ads {
    background-color: #f9f9f9; /* เปลี่ยนสีพื้นหลังให้ตัดกับเมนู (หรือใช้สีขาว) */
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    text-align: center;
}

.ads-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.ads-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}


.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ecf0f1;
}

/* 3. Search Box */
.search-box {
    display: flex;
    gap: 5px;
}

.search-box input {
    padding: 8px 15px;
    border-radius: 20px;
    border: none;
    width: 250px;
}

.search-box button {
    padding: 8px 15px;
    border-radius: 20px;
    border: none;
    background-color: #27ae60;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
}

.search-box button:hover {
    background-color: #2ecc71;
}

/* 4. Main Content */
main {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

h2 {
    margin-bottom: 20px;
    border-left: 5px solid #27ae60;
    padding-left: 15px;
    color: #2c3e50;
}

/* 5. Exercise Grid (การแสดงผล 50 ลิงก์) */
.exercise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.exercise-item {
    background: white;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #ddd;
}

.exercise-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.exercise-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.exercise-item h3 {
    font-size: 1.1rem;
    color: #2980b9;
    margin-bottom: 10px;
}

.exercise-item span {
    font-size: 0.85rem;
    color: #7f8c8d;
}

/* 6. Category Section */
.cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cat-list a {
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    color: #34495e;
    border: 1px solid #ddd;
    transition: all 0.3s;
}

.cat-list a:hover {
    background-color: #34495e;
    color: white;
}

/* 7. Footer */
footer {
    text-align: center;
    padding: 40px 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.main-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
    display: flex;
    gap: 30px; /* ระยะห่างระหว่างเนื้อหากับ Sidebar */
}

.content-area {
    flex: 3; /* ให้เนื้อหาฝั่งซ้ายกว้างกว่า */
    min-width: 0;
}

.sidebar-area {
    flex: 1; /* Sidebar ฝั่งขวา */
    min-width: 250px;
}

/* ตกแต่ง Sidebar */
.sidebar-ad, .sidebar-widget {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin-bottom: 25px;
}

.sidebar-ad h3, .sidebar-widget h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #27ae60;
    padding-bottom: 5px;
}

.sidebar-widget ul {
    list-style: none;
}

.sidebar-widget ul li {
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.sidebar-widget ul li a {
    text-decoration: none;
    color: #34495e;
    font-size: 0.95rem;
}

.sidebar-widget ul li a:hover {
    color: #2980b9;
}

.ad-slot img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}


/* 8. Responsive Design (สำหรับมือถือ) */
@media (max-width: 600px) {
    nav {
        flex-direction: column;
        gap: 15px;
    }
    .search-box input {
        width: 100%;
    }
    .exercise-grid {
        grid-template-columns: 1fr;
    }
    .header-ads {
        padding: 5px 0;
    }
    /* ถ้าโฆษณาใหญ่ไปในมือถือ สามารถสั่งซ่อนได้ */
    /* .header-ads { display: none; } */

    .main-container {
        flex-direction: column; /* ในมือถือให้ Sidebar ลงไปต่อด้านล่าง */
    }
    .sidebar-area {
        width: 100%;
    }
}


/* ตกแต่งส่วนรูปภาพหน้าปก */
.exercise-thumbnail {
    width: 100%;
    height: 180px; /* กำหนดความสูงคงที่เพื่อให้ทุกกรอบเท่ากัน */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #eee;
}

.exercise-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* บังคับให้รูปเต็มกรอบโดยไม่เสียสัดส่วน */
    transition: transform 0.3s;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ไปวางที่ card */
.exercise-item:hover .exercise-thumbnail img {
    transform: scale(1.1); /* รูปจะซูมเข้าเล็กน้อย */
}

.exercise-content h3 {
    margin-top: 0;
    font-size: 1.1rem;
    color: #2980b9;
}


/* เปลี่ยนจาก Grid เป็น List */
.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
}

.exercise-list-item {
    background: white;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.2s;
}

.exercise-list-item:hover {
    background-color: #fcfcfc;
    border-color: #27ae60;
    transform: translateX(5px); /* ขยับขวาเล็กน้อยเวลา Hover */
}

.exercise-list-item a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    gap: 15px;
}

/* บังคับขนาดรูปภาพ 50x50 */
.list-thumbnail {
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* ป้องกันรูปภาพถูกบีบ */
    overflow: hidden;
    border-radius: 4px;
}

.list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ปรับแต่งส่วนเนื้อหาข้อความ */
.list-content {
    display: flex;
    flex-direction: column;
}

.list-content h3 {
    font-size: 1rem;
    color: #2c3e50;
    margin: 0;
    line-height: 1.2;
}

.list-content span {
    font-size: 0.8rem;
    color: #999;
}


.pagination-wrapper {
    margin: 40px 0;
    text-align: center;
}

/* ตัวเลขหน้าปกติ */
.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    transition: all 0.3s;
}

/* เลขหน้าปัจจุบัน */
.pagination .page-numbers.current {
    background-color: #27ae60;
    color: white;
    border-color: #27ae60;
}

/* ตอนเอาเมาส์ไปชี้ */
.pagination .page-numbers:hover:not(.current) {
    background-color: #f0f0f0;
    border-color: #27ae60;
    color: #27ae60;
}



.widget-area {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.widget-item {
    margin-bottom: 30px;
}

.widget-title {
    font-size: 1.2rem;
    color: #2c3e50;
    border-bottom: 2px solid #27ae60;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
/*
.widget-item ul {
    list-style: none;
    padding: 0;
}

.widget-item ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
*/




/* คลุมส่วนรายการใน Widget */
.widget-item ul {
    list-style: none; /* เอาจุดกลมๆ ออก */
    padding: 0;
    margin: 0;
}

/* ตกแต่งแต่ละรายการ (li) */
.widget-item ul li {
    margin-bottom: 5px; /* ระยะห่างระหว่างบรรทัด */
    border-bottom: 1px solid #f0f0f0; /* เส้นคั่นบางๆ */
}

/* ลบเส้นคั่นของรายการสุดท้าย */
.widget-item ul li:last-child {
    border-bottom: none;
}

/* ตกแต่งตัวลิงก์ (a) */
.widget-item ul li a {
    display: block; /* ทำให้คลิกได้ทั้งแถว */
    padding: 10px 15px;
    color: #444; /* สีตัวอักษรปกติ */
    text-decoration: none; /* เอาเส้นใต้ปกติออก */
    font-size: 1rem;
    transition: all 0.3s ease; /* ทำให้การเปลี่ยนสีนุ่มนวล */
    border-radius: 5px;
}

/* เอฟเฟกต์ตอนเอาเมาส์ไปชี้ (Hover) */
.widget-item ul li a:hover {
    background-color: #f8f9fa; /* เปลี่ยนสีพื้นหลังเล็กน้อย */
    color: #27ae60; /* เปลี่ยนเป็นสีเขียวตามโทนหลักของเว็บ */
    padding-left: 25px; /* ดันข้อความไปทางขวานิดๆ ให้ดูมีลูกเล่น */
    font-weight: bold;
}

/* เพิ่มสัญลักษณ์เล็กๆ หน้าลิงก์ (ไอคอนลูกศร) */
.widget-item ul li a::before {
    content: '›'; /* สัญลักษณ์ลูกศร */
    margin-right: 10px;
    color: #ccc;
    font-size: 1.2rem;
}

.widget-item ul li a:hover::before {
    color: #27ae60;
}

.controls {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: var(--paper-shadow);
}

.btn {
	width: 100%;
	padding: 12px;
	margin-bottom: 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-family: 'Sarabun', sans-serif;
	font-weight: bold;
	transition: 0.3s;
}

.btn-print { background-color: #27ae60; color: white; }
.btn-refresh { background-color: #2980b9; color: white; }
.btn:hover { opacity: 0.8; }

.list-content span {
	font-size: 0.8rem;
	color: #999;
	display: flex;
	align-items: center;
	gap: 5px; /* ระยะห่างระหว่างวันที่กับจำนวนวิว */
}

.exerlink_a {
  text-decoration: none;
  color: #2c3e50;
  font-size: 18pt;
}

.exerlink_a:hover {
  color: #27ae60;
  font-size: 18pt;
  font-weight: bold;
}













/* จัดการรูปแบบสำหรับการสั่งพิมพ์ (Print) */
@media print {
    /* 1. ซ่อนส่วนที่ไม่ต้องการให้แสดงในกระดาษ */
    header, 
    nav, 
    .search-box, 
    .header-ads, 
    .sidebar-area, 
    footer, 
    .categories, 
    button, 
	.affiliate-hero-section	{
        display: none !important;
    }

    /* 2. ขยายพื้นที่เนื้อหาหลักให้เต็มความกว้างกระดาษ */
    .main-container {
        display: block; /* ยกเลิก flexbox */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .content-area {
        width: 100%;
        border: none;
    }

    /* 3. ปรับแต่งฟอนต์และสีให้ประหยัดหมึกและอ่านง่าย */
    body {
        background-color: white;
        color: black;
        font-size: 14pt;
    }

    /* 4. ซ่อนรูปหน้าปกเล็กๆ (ถ้าไม่อยากให้เปลืองหมึกตอนปริ้น list) */
    .list-thumbnail {
        display: none;
    }

    /* 5. ทำให้ลิงก์ไม่แสดงสีหรือเส้นใต้ (เลือกใช้ตามความชอบ) */
    a {
        text-decoration: none;
        color: black;
    }

    .list-content span {
        display: none;
    }

}


.affiliate-hero-section {
    background: #f8fafc; /* สีพื้นหลังอ่อนๆ ให้ดูเด่นจากส่วนอื่น */
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}
.section-title {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    margin-bottom: 15px;
}
.product-grid {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap; /* รองรับมือถือ */
}
.product-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #1e293b;
    transition: all 0.3s ease;
    min-width: 250px;
    position: relative;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #3b82f6; /* เปลี่ยนสีเส้นขอบเมื่อ hover */
}
.product-card .icon {
    font-size: 2rem;
    margin-right: 15px;
}
.product-card .label {
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    color: #3b82f6;
    text-transform: uppercase;
}
.product-card p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}
.badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 20px;
}