/* ============ ตั้งค่าพื้นฐาน & Video Background ============ */
body {
    font-family: 'Prompt', sans-serif;
    margin: 0; padding: 20px;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; color: #333;
}

#bg-video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%; width: auto; height: auto;
    z-index: -2; object-fit: cover;
}

.video-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 30, 80, 0.5); z-index: -1;
}

/* ============ กล่องเนื้อหาหลัก ============ */
.container {
    position: relative; z-index: 10;
    background-color: rgba(255, 255, 255, 0.9); 
    width: 100%; max-width: 900px; padding: 40px;
    border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}

h1 { color: #023e8a; text-align: center; font-weight: 700; text-shadow: 2px 2px 4px rgba(255,255,255,0.8); font-size: 2.2em; }
h2, h3 { color: #0077b6; text-align: center; }

/* Input Styles */
.form-section { margin-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 25px; }
label { font-weight: 600; display: block; margin-bottom: 10px; color: #2c3e50; font-size: 0.95em;}
select, input[type="number"] { width: 100%; padding: 12px 15px; border: 2px solid #bde0fe; border-radius: 10px; font-size: 14px; box-sizing: border-box; transition: 0.3s; background: rgba(240, 248, 255, 0.9); font-family: 'Prompt', sans-serif; }
select:focus, input:focus { border-color: #0096c7; box-shadow: 0 0 15px rgba(0, 150, 199, 0.3); background: #ffffff; outline: none; }
::placeholder { color: #95a5a6; font-style: italic; }

.radio-group { display: flex; gap: 15px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }
.radio-item { display: flex; align-items: center; cursor: pointer; background: rgba(227, 242, 253, 0.9); padding: 10px 25px; border-radius: 30px; border: 2px solid transparent; transition: 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); font-weight: 600; color: #023e8a; }
.radio-item:hover { border-color: #48cae4; background: #ffffff; transform: translateY(-2px); }
.radio-item input { margin-right: 10px; accent-color: #023e8a; }

.var-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .var-grid { grid-template-columns: 1fr; } body { padding: 10px; } .container { padding: 25px; } }

/* ปุ่มกด */
.btn { width: 100%; padding: 15px; border: none; border-radius: 12px; font-size: 18px; font-weight: 700; cursor: pointer; transition: all 0.4s ease; margin-top: 25px; color: white; font-family: 'Prompt', sans-serif; letter-spacing: 1px; }
.btn-run { background: linear-gradient(to right, #48cae4, #0077b6, #023e8a); background-size: 200% auto; box-shadow: 0 6px 20px rgba(2, 62, 138, 0.4); }
.btn-run:hover { background-position: right center; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 25px rgba(2, 62, 138, 0.6); }
.btn-back { background-color: rgba(127, 140, 141, 0.9); margin-top: 30px; }
.btn-back:hover { background-color: #95a5a6; transform: translateY(-3px); }

/* ส่วน Loading */
#loadingSection, #outputSection { display: none; text-align: center; padding-top: 20px;}
.loader { border: 6px solid #e3f2fd; border-top: 6px solid #023e8a; border-right: 6px solid #0077b6; border-bottom: 6px solid #0096c7; border-radius: 50%; width: 70px; height: 70px; animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; margin: 30px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ============ ส่วน Output (ผลลัพธ์) ============ */
.result-box { 
    background: linear-gradient(to bottom, rgba(202, 240, 248, 0.9), rgba(255, 255, 255, 0.9));
    padding: 30px; border-radius: 20px; margin-bottom: 25px; border: 3px solid #90e0ef; 
    box-shadow: 0 10px 30px rgba(144, 224, 239, 0.4);
}

.shap-box {
    background: white; padding: 20px; border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;
    margin-bottom: 30px; text-align: center;
}

/* ตาราง Safety Check */
table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; overflow: hidden; border-radius: 15px; background: white; }
th, td { border: 1px solid #eee; padding: 12px; text-align: center; }
th { background: linear-gradient(to right, #023e8a, #0077b6); color: white; text-transform: uppercase; letter-spacing: 1px;}

/* ไฮไลท์แบบไดนามิก */
.highlight-row { background-color: #ffecb5; font-weight: bold; border: 3px solid #ffd166; color: #d35400; transform: scale(1.02); box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; z-index: 5;}