/* --- 1. การประกาศฟอนต์ BoonHome (Mobile Fix) --- */
@font-face {
    font-family: 'BoonHome';
    src: url('https://cdn.jsdelivr.net/gh/font-back/boonhome/boonhome.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/font-back/boonhome/boonhome.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- 2. Global Reset & Font Enforcement --- */
* { 
    box-sizing: border-box; 
    font-family: 'BoonHome', sans-serif !important; 
}

body {
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* --- 3. Header & Navigation --- */
.main-header { background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.top-nav { background: #1a1a1a; padding: 10px 0; }
.top-nav ul { 
    display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; 
}
.top-nav a { color: #ccc; text-decoration: none; padding: 5px 15px; font-size: 0.9rem; transition: 0.3s; }
.top-nav a:hover { color: #fff; }

.logo-bar { background: #000; color: #fff; padding: 15px 0; }
.header-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

.logo-img { height: 70px; width: auto; max-width: 100%; object-fit: contain; }
.slogan { font-size: 1.2rem; margin: 0; color: #fff; }

/* --- 4. Main Layout --- */
.main-layout { display: flex; gap: 25px; margin-top: 20px; }
.content-area { flex: 2; min-width: 0; }
.sidebar-area { flex: 1; min-width: 0; } /* เพิ่ม min-width กันเลย์เอาต์เพี้ยน */

/* --- 5. News Grid --- */
.news-banner-grid { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; 
}
.news-item { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.news-item img { 
    width: 100%; height: 200px; object-fit: cover; display: block; 
}
.news-item p { 
    padding: 15px; font-size: 0.95rem; margin: 0; display: -webkit-box; 
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
}

/* --- 6. ตารางประวัติ --- */
.lottery-section h3 { border-left: 5px solid #a54b3d; padding-left: 10px; margin-bottom: 15px; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#history-container {
    border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    border: 1px solid #ddd; background: white;
}
#history-table { width: 100%; border-collapse: collapse; min-width: 500px; }
#history-table thead th { background-color: #1e293b; color: white; padding: 15px 12px; font-weight: normal; }
#history-table tbody td { padding: 12px; text-align: center; border-bottom: 1px solid #eee; }

/* --- 7. Widget ผลหวยด้านข้าง --- */
.lao-lottery-widget {
    margin-bottom: 20px; 
    border: 1px solid #1e293b; 
    border-radius: 12px; 
    overflow: hidden; 
    background: #fff; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.widget-header { background-color: #a54b3d; color: white; padding: 15px; text-align: center; }
.widget-header h2 { margin: 0; font-size: 24px; color: #fff !important; }
.date-display { text-align: center; padding: 15px 10px 5px; font-weight: bold; }

.prize-display-area { display: flex; justify-content: center; gap: 8px; padding: 20px 10px; }
.number-slot {
    width: 45px; height: 60px; border: 2px solid #1e293b; border-radius: 8px;
    font-size: 30px; font-weight: bold; display: flex; align-items: center; justify-content: center;
    background: #f8f9fa;
}

.result-table { width: 100%; border-collapse: collapse; }
.result-table td { border: 1px solid #eee; padding: 12px; text-align: center; }
.label-col { background-color: #f8f9fa; color: #666; width: 40%; }
.value-col { font-weight: bold; font-size: 1.1rem; color: #a54b3d; }

/* --- 8. Ads (แก้ไขการล้นกรอบแบบเด็ดขาด) --- */
.ad-space { 
    margin-top: 10px;
    width: 100%; /* บังคับกว้างเท่า sidebar */
    display: flex;
    justify-content: center;
    overflow: hidden; /* ตัดส่วนที่ล้นออก */
}

.ad-space img { 
    width: 100%;       /* บังคับกว้างเต็มที่ของพื้นที่ sidebar */
    height: auto;      /* ให้สูงปรับตามสัดส่วนอัตโนมัติ */
    max-height: 350px; /* จำกัดความสูงไม่ให้โย่งเกินไป */
    border-radius: 8px; 
    object-fit: cover; /* บังคับรูปให้เต็มกรอบโดยไม่เบี้ยว (ถ้าสัดส่วนไม่ได้จะครอปแทน) */
    display: block;
}

/* --- 9. Footer --- */
.main-footer { background: #1a1a1a; color: #888; text-align: center; padding: 30px 0; margin-top: 50px; }

/* --- 10. Responsive Design --- */
@media (max-width: 992px) {
    .main-layout { flex-direction: column; }
    .sidebar-area { order: -1; width: 100%; } 
    .ad-space img { max-height: none; } /* มือถือให้แสดงตามจริง */
}

@media (max-width: 600px) {
    .news-banner-grid { grid-template-columns: 1fr; }
    .logo-img { height: 55px; }
    .news-item img { height: 180px; }
    .number-slot { width: 38px; height: 52px; font-size: 24px; }
    #history-table thead th, #history-table tbody td { font-size: 13px; padding: 10px 5px; }
}