@keyframes slideGrid {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -100px -100px; 
    }
}

body, html {
    height: 100%;
    font-family: sans-serif;
    background-color: #FAF5EF;
    background-image: 
        linear-gradient(to right, rgb(185, 122, 122) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(185, 122, 122) 1px, transparent 1px);
    
    background-size: 100px 100px;
    background-position: -1px -1px;
    animation: slideGrid 15s linear infinite; 
}

.viewport-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden; 
    position: relative;
}

.skill-tree-drag-area {
    width: 19200px; 
    height: 10800px;
    position: relative;
    cursor: grab;
}

.skill-tree-drag-area.active-drag {
    cursor: grabbing; 
}

.skill-node {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #736055;
    background-color: #FAF5EF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    z-index: 5;
    opacity: 1; 
    text-decoration: none;
    /*transition: opacity 0.8s ease-out, transform 0.3s, box-shadow 0.3s;*/
}

.skill-node:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(120, 162, 194, 0.6);
}

.circular-shape {
    width: 100px;
    height: 50px; 
    border-radius: 25px; 
    background-color: #F4E2DE; 
}

.circle-shape {
    width: 100px;
    height: 50px; 
    border-radius: 50%; 
    z-index: 5;
}

.node-info {
    position: absolute;
    width: 300px ;
    padding: 15px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: normal;
    text-align: center;
    color: #555;
    z-index: 100; /* **[จุดสำคัญ] ทำให้ Node Info ลอยอยู่เหนือทุก Node และเส้น** */
    
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    
    top: 50%;
    left: 100%;
    transform: translate(15px, -50%);
}

.skill-node:hover .node-info {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

.node-info.left-side {
    left: auto;
    right: 100%;
    transform: translate(-15px, -50%);
    z-index: 100;
}
/* --- Card Node Styling --- */

.card-shape {
    /* กำหนดขนาดใหญ่ขึ้นเพื่อให้ใส่รูปภาพได้ */
    width: 200px; 
    height: 250px;
    border-radius: 8px; /* ขอบมนเล็กน้อย */
    padding: 3px; /* ลบ padding เดิมออกเพื่อควบคุมพื้นที่เอง */
    
    /* B: จัดโครงสร้างภายในให้อยู่ในแนวตั้ง (คอลัมน์) */
    display: flex;
    flex-direction: column;
    
    /* C: ปรับสีพื้นหลังให้ดูเป็น Card ชัดเจน */
    background-color: #F4E2DE; 
    border: 3px solid rgb(185, 122, 122);
}

.card-content {
    /* ใช้ flex 1 เพื่อให้ Card Content ขยายเต็มพื้นที่ */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.card-image-wrapper {
    /* ส่วนรูปภาพ: ให้ใช้พื้นที่ด้านบนประมาณ 60-70% */
    flex-grow: 1; /* ให้ยืดออกตามแนวตั้ง */
    width: 100%;
    overflow: hidden; /* ซ่อนส่วนที่เกินจากรูป */
    border-radius: 8px 8px 8px 8px; /* ขอบมน */
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้รูปภาพคลุมพื้นที่โดยไม่บิดเบี้ยว */
    display: block;
}

.card-text {
    /* ส่วนข้อความ: พื้นที่ด้านล่าง */
    width: 100%;
    padding: 8px 10px; /* เพิ่ม padding ภายใน */
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: normal;
    text-align: left; /* จัดข้อความชิดซ้าย */
    text-decoration: none !important;
    color: #555;
    background-color: #F4E2DE; /* สีพื้นหลังเล็กน้อย */
}

/* --- Flexible Image Node Styling --- */

.flexible-image-node {
    /* **[A] การตั้งค่าพื้นฐานของ Node (กล่องรอบนอก)** */
    /* ลบ width/height เดิมออกเพื่อให้มันหดตามขนาดรูปภาพภายใน */
    width: auto;
    height: auto;
    z-index: 5;
    /* ต้องเปลี่ยน display เป็น inline-block เพื่อให้หดตัวตามเนื้อหา (รูปภาพ) */
    display: inline-block; 
    
    padding: 0; /* ลบ padding ออกเพื่อให้รูปภาพติดขอบ */
    border-radius: 8px; 
    
    /* ลบพื้นหลังและเงาเดิมออก เพื่อให้เห็นแต่รูปภาพ */
    background-color: transparent; 
    box-shadow: none; 
    overflow: visible; /* **สำคัญ:** ซ่อนส่วนเกินและให้ขอบมน */

    /* คงคุณสมบัติที่สำคัญของ Node ไว้ */
    position: relative;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.3s, box-shadow 0.3s;
    vertical-align: top;
}

.flexible-image-node .node-image {
    /* **[B] การกำหนดขนาดสูงสุดให้กับรูปภาพ** */
    /* ควบคุมขนาดโดยใช้ Max-Width และ Max-Height */
    
    max-height: 300px; /* **ความสูงสูงสุดที่คุณต้องการ** */
    max-width: 300px;  /* ความกว้างสูงสุด (กว้างกว่าสูงเล็กน้อย) */
    
    z-index: 1;
    border-radius: 15px; /* เพิ่มค่านี้เพื่อให้มุมมนมากขึ้น เช่น 15px */
    overflow: hidden;

    height: auto;      /* ให้ความสูงปรับตามอัตราส่วน */
    width: auto;       /* ให้ความกว้างปรับตามอัตราส่วน */
    
    /* หากรูปภาพจริงใหญ่กว่า Max Size มันจะถูกย่อลงตามอัตราส่วนเดิม */
    /* หากรูปภาพจริงเล็กกว่า Max Size มันจะแสดงตามขนาดจริง */
    
    /* ทำให้รูปภาพดูดีขึ้นเมื่อ Hover */
    display: block;
    transition: transform 0.3s, opacity 0.3s;
}

.flexible-image-node:hover {
    /* กำหนด Box Shadow ให้กับรูปภาพ/Node โดยรวมเมื่อ Hover */

    box-shadow: 0 0 15px rgba(120, 162, 194, 0.6);
    transform: scale(1.03);
}
.flexible-image-node .node-info {
    /* Overwrite ให้ตำแหน่ง Info Box อยู่ด้านขวาของ Node */
    position: fixed;
    top: 50%;
    left: 100%;
    right: auto;
    transform: translate(15px, -50%); /* เลื่อนไปด้านขวา 15px และจัดกึ่งกลางแนวตั้ง */
    
    z-index: 150; /* เพิ่ม Z-index ให้สูงกว่า .node-info ปกติเล็กน้อยเพื่อความชัวร์ */
}

/*





                                    Property Node จ้าาา






*/


#node-center { 
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px solid #78a2c2;
    opacity: 1; 
    background-image: url('Sound,Img/Teety1.png') ;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
}

#node-Roblox { 
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #ffc400;
    opacity: 1; 
    background-image: url('Sound,Img/Roblox_Studio.png') ;
    background-position: center;
    background-size: 75px;
    background-repeat: no-repeat;
    z-index: 9;
}
#node-Lua {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #78a2c2;
    opacity: 1; 
    background-image: url('Sound,Img/Lua-Logo.png') ;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}
#node-Luau {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #78a2c2;
    opacity: 1; 
    background-image: url('Sound,Img/Luau_Logo.png') ;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}
#node-Pr {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #78a2c2;
    opacity: 1; 
    background-image: url('Sound,Img/Adobe_Premiere_Pro.png') ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 6;
}
#node-Ai {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #78a2c2;
    opacity: 1; 
    background-image: url('Sound,Img/Adobe_Illustrator.png') ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 5;
}
#node-Ps {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #78a2c2;
    opacity: 1; 
    background-image: url('Sound,Img/Adobe_Photoshop.png') ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 4;
}
#node-FL { 
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #78a2c2;
    opacity: 1; 
    background-image: url('Sound,Img/fl-fruit-logo.png') ;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}
#node-VS {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/Visual_Studio_Code.png') ;
        background-position: center;
        background-size: 75px;
        background-repeat: no-repeat;
        z-index: 2;
}
#node-HTML {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/HTML5_logo.png') ;
        background-position: center;
        background-size: 75px;
        background-repeat: no-repeat;
        z-index: 3;
}
#node-CSS {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/CSS.png') ;
        background-position: center;
        background-size: 80px;
        background-repeat: no-repeat;
        z-index: 5;
}
#node-JS {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/JS.png') ;
        background-position: center;
        background-size: 57px;
        background-repeat: no-repeat;
        z-index: 4;
}
#node-CB {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/Codeblocks_logo1.png') ;
        background-position: center;
        background-size: 75px;
        background-repeat: no-repeat;
        z-index: 4;
}
#node-C {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/C_Logo.png') ;
        background-position: center;
        background-size: 75px;
        background-repeat: no-repeat;
        z-index: 4;
}
#node-Cpp {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/ISO_C++_Logo.svg.png') ;
        background-position: center;
        background-size: 75px;
        background-repeat: no-repeat;
        z-index: 5;
}
#node-Robot{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #78a2c2;
        opacity: 1; 
        background-image: url('Sound,Img/สำเนาของ\ IMG_0194.JPG') ;
        background-position: center;
        background-size: 200px;
        background-repeat: no-repeat;
        z-index: 5;
}
/*







                                        ตำแหน่งNodeจ้า









*/
/* ตำแหน่ง Node (19200x10800px) */
#node-center { 
    z-index: 10;
    top: 5400px; 
    left: 9600px; 
    transform: translate(-50%, -50%); 
    
}
#info-center {text-align: left; width: 320px;}
#node-kaya { top: 6100px; left: 8900px; transform: translateX(-50%);}

#node-art { 
    z-index: 6; /* กำหนดให้สูงกว่า Node ทั่วไป (5) และ Node Center (10) */
    top: 5050px; 
    left: 9600px; 
    transform: translateX(-50%);
}
#node-volunteer { top: 5700px; left: 9600px; transform: translateX(-50%); }
#node-eng-main { top: 5400px; left: 9200px; transform: translateY(-50%); z-index: 2;}
#info-eng {z-index: 100;}
#node-hardware { top: 5200px; left: 9000px; transform: translateY(-50%); z-index: 2;}
#node-software { top: 5600px; left: 9000px; transform: translateY(-50%); z-index: 2;}
#info-software {z-index: 150;}
#node-work { top: 5400px; left: 9900px; transform: translateY(-50%); z-index: 7;}
#node-Roblox { top: 5800px; left: 8800px; transform: translateY(-50%); }
#node-comp { top: 5200px; left: 10200px; transform: translate(-50%, -50%); z-index: 99; }
#node-activity { top: 5600px; left: 10200px; transform: translate(-50%, -50%); z-index: 99; }
#node-FL { z-index: 7;top: 4750px; left: 9300px; transform: translateX(-50%); }
#node-Lua{top: 5700px; left: 8700px; transform: translateY(-50%);}
#node-Luau{top: 5900px; left: 8700px; transform: translateY(-50%);}
#node-rodo  { top: 5900px; left: 9400px; transform: translateX(-50%); z-index: 100;}
#node-public  { top: 5900px; left: 9800px; transform: translateX(-50%);}
#node-chailane  { top: 6100px; left: 9800px; transform: translateX(-50%);}
#node-kasian {top: 6100px; left: 9200px; transform: translateX(-50%);}
#node-Pr { top: 4750px; left: 9500px; transform: translateX(-50%); }
#node-Ai { top: 4750px; left: 9700px; transform: translateX(-50%); }
#node-Ps { top: 4750px; left: 9900px; transform: translateX(-50%); }
#node-water {top: 6100px; left: 9500px; transform: translateX(-50%);}
#node-traff { top: 6400px; left: 8900px; transform: translateX(-50%); }
#node-CFMT { top: 5200px; left: 10300px; transform: translate(-50%, -50%); z-index: 70;}
#node-AOFH { top: 5200px; left: 10600px; transform: translate(-50%, -50%); z-index: 69; }
#node-CB { top: 5650px; left: 8500px; transform: translateY(-50%); }
#node-C { top: 5750px; left: 8400px; transform: translateY(-50%); }
#node-Cpp  { top: 5550px; left: 8400px; transform: translateY(-50%); }
#node-VS { top: 5400px; left: 8800px; transform: translateY(-50%); }
#node-HTML { top: 5600px; left: 8700px; transform: translateY(-50%); }
#info-HTML {z-index: 1;}
#node-CSS { top: 5520px; left: 8600px; transform: translateY(-50%); }
#node-JS { top: 5400px; left: 8550px; transform: translateY(-50%); }
#node-POSN { top: 5600px; left: 9690px; transform: translate(-50%, -50%); z-index: 70;}
#node-delta { top: 5600px; left: 10000px; transform: translate(-50%, -50%); z-index: 69;}
#node-Bas { top: 4900px; left: 10600px; transform: translate(-50%, -50%); z-index: 99;}
#node-Robot { top: 5000px; left: 8800px; transform: translateY(-50%); }





/*                      โค้ดเส้นเชื่อม                        */
.skill-tree-connectors {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; 
    pointer-events: none;
    width: 19200px; 
    height: 10800px;
}

.connection-line {
    stroke: #736055; 
    stroke-width: 5;
    fill: none;
    /* ลบโค้ดอนิเมชันทั้งหมดออก */
}

/* ลบ .line-unlocked ออกไปเลย */