/* --- 1. การตั้งค่าตัวแปรสี (CSS Variables) --- */
:root {
    --all-bg: #222222;
    --left-bg: #0d3d6e;
    --right-bg: #9c2a22;
    --text-light: #ffffff;
    
    --left-grad-1: #87CEEB;
    --left-grad-2: #00BFFF;
    --left-sub-grad-1: #a7eaff;
    --left-shadow: rgba(135, 206, 235, 0.4);

    --right-grad-1: #FFA07A;
    --right-grad-2: #FF4500;
    --right-sub-grad-1: #ffc9ba;
    --right-shadow: rgba(255, 160, 122, 0.5);
}

/* --- 2. การตั้งค่าพื้นฐานและ Body --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Kanit', sans-serif;
    background-color: var(--all-bg); /* สีพื้นหลังเผื่อจอใหญ่มาก */
}

/* --- 3. การควบคุม Layout หลัก (จำกัดความกว้าง) --- */
main {
    max-width: 1800px; /* ความกว้างสูงสุดของเนื้อหา */
    margin: 0 auto; /* จัดให้อยู่กึ่งกลางเสมอ */
    box-shadow: 0 0 40px rgba(0,0,0,0.5); /* เพิ่มเงาให้ดูมีกรอบ */
}

.split-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.panel {
    flex: 1;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden; /* ป้องกันเงาหรือเอฟเฟกต์ล้นออกนอก panel */
}

.panel-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--text-light);
    text-align: center;
}

.panel:hover {
    transform: scale(1.03);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.left-panel { background-color: var(--left-bg); }
.right-panel { background-color: var(--right-bg); }

/* --- 4. การทำ Fluid Typography ด้วย clamp() --- */
/* clamp(MIN, PREFERRED, MAX) */
.content h2 {
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* เล็กสุด 1rem, ใหญ่สุด 1.5rem, ปกติ 2.5% ของความกว้างจอ */
    font-weight: 400;
    margin: 10px 0;
}

.left-panel .content h1, .right-panel .content h1 {
    font-size: clamp(3.5rem, 10vw, 8rem); /* ปรับขนาด H1 ให้ยืดหยุ่นสูง */
    font-weight: 700;
    margin: 10px 0;
    line-height: 1;
}

.features p {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    margin: 5px 0;
}

.features .highlight {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    margin-bottom: 20px;
}

/* --- 5. การไล่เฉดสี (ปรับปรุงเล็กน้อย) --- */
.left-panel .content h1 {
    color: var(--left-grad-1);
    background-image: linear-gradient(45deg, var(--left-grad-1), var(--left-grad-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px var(--left-shadow);
}

.right-panel .content h1 {
    color: var(--right-grad-1);
    background-image: linear-gradient(45deg, var(--right-grad-1), var(--right-grad-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px var(--right-shadow);
}

.left-panel .sub-text {
    font-weight: bold;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--left-sub-grad-1);
    background-image: linear-gradient(45deg, var(--left-sub-grad-1), var(--text-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.right-panel .sub-text {
    font-weight: bold;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--right-sub-grad-1);
    background-image: linear-gradient(45deg, var(--right-sub-grad-1), var(--text-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* --- 6. Media Query สำหรับ Mobile --- */
@media (max-width: 768px) {
    .split-container {
        flex-direction: column;
    }

    .panel {
        /* บนมือถือ ไม่ต้องขยายเมื่อ hover เพื่อประสบการณ์ที่ดีกว่า */
        transform: none;
    }

    .panel:hover {
        transform: none;
        box-shadow: none;
    }
}