/* ตกแต่ง Container หลัก */
/* จัดการกล่องหลักให้กว้างขึ้นและยืดหยุ่น */
#bazi-form-container, .bazi-responsive-container {
    width: 100%;
    max-width: 1400px; /* ขยายความกว้างสูงสุดเป็น 1400px (จากเดิม 500px) */
    margin: 20px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    font-family: "Sarabun", "Microsoft JhengHei", sans-serif;
    box-sizing: border-box; /* สำคัญมาก ช่วยไม่ให้กล่องล้นขอบจอ */
}

/* ปรับแต่ง Scrollbar ของกล่องวัยจรให้ดูสวยงามขึ้น */
#luck_pillars_box > div {
    /* ปรับแต่ง style ของ scrollbar เบื้องต้น */
    scrollbar-width: thin;
    scrollbar-color: #d4a017 #f4f4f4;
}
#luck_pillars_box > div::-webkit-scrollbar {
    height: 8px;
}
#luck_pillars_box > div::-webkit-scrollbar-thumb {
    background-color: #d4a017;
    border-radius: 10px;
}

/* -------------------------------------------
   ตั้งค่า Responsive สำหรับหน้าจอมือถือ
------------------------------------------- */
@media screen and (max-width: 768px) {
    #bazi-form-container, .bazi-responsive-container {
        padding: 15px; /* ลดขอบลงในหน้าจอมือถือ จะได้มีพื้นที่แสดงตารางมากขึ้น */
        margin: 10px auto;
    }

    .bazi-table td {
        padding: 10px 2px;
        font-size: 24px; /* ลดขนาดอักษรจีนลงนิดหน่อย ไม่ให้ตารางเบียดกันเกินไป */
    }

    /* ปรับขนาดกล่องดิถีธาตุ */
    #day_master_text {
        font-size: 16px !important;
    }
    #day_master_text span {
        font-size: 28px !important;
    }
}

/* ตกแต่งตารางแสดงผล */
#bazi_result {
    margin-top: 25px;
}

.bazi-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.bazi-table th {
    background-color: #f8f9fa;
    padding: 10px;
    border: 1px solid #eee;
    color: #666;
}

.bazi-table td {
    padding: 15px 5px;
    border: 1px solid #eee;
    text-align: center;
    font-size: 32px; /* ขยายขนาดตัวอักษรจีน */
    font-weight: bold;
    font-family: "KaiTi", "Microsoft JhengHei", serif;
}

/* ใส่สีตามธาตุ (เผื่อไว้สำหรับใช้ JavaScript เติม Class) */
.element-wood { color: #28a745; }   /* เขียว */
.element-fire { color: #dc3545; }   /* แดง */
.element-earth { color: #8b4513; }  /* น้ำตาล/เหลือง */
.element-metal { color: #ffbc00; }  /* ทอง */
.element-water { color: #007bff; }  /* ฟ้า/น้ำเงิน */