/*add google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600;700&family=Lato:wght@400;700&display=swap');
/* all class using same dataset */
:root{
    /*define variables*/
    --accent : #76a5fc; /* สีปุ่มมาจากฟิกม่า*/
    --accentHover : #ff5353;/*ถ้าเอเมาส์ไปชี้ปุ่มจะเปลี่ยนสี*/
    --dark60 : rgb(255, 255, 255);/* 0.3 เป็นค่าความโปร่งใส*/
    --light : #000000;
    --transsition : all 0.3s ease 0s /*ตัวแปรในการเเสดงลูกเล่นเล่นปุ่มเด่งออกมา ตั่งเวลาดีเร เวลา0.3*/
}

/*All Section*/
*{
    /*คำสังนี้จะเป็นการเครียร์หน้าจอให้ทุกอย่างเรียงติดกันไม่มีช่องไฟ*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,body{
    height: 100%;/*ฟิคความสูง*/
    overflow: auto;
}

body{
    /*ใส่สี*/
    background: linear-gradient(
        var(--dark60), var(--dark60));
    background-repeat: no-repeat;/*ไม่ต้องการทำรูปซ้ำ*/
    background-position: center;
    background-size: cover;
    max-width: 100%;
    max-height: auto;
    min-width: 400px;
    min-height: auto;
}
a,button,p{
    font-family: "Lato",sans-serif;
    color: var(--light);
}
a,button,.logo{
    cursor: pointer;/*ให้ปุ่มเมื่อเอาเมาส์ไปชี้จะมีรูปมือ*/
}

main{
    height: 100;
    display: grid;/*ทำงานบนกลิด*/
    grid-template-columns:minmax(60px,1fr)repeat(6,minmax(50px,190px))minmax(60px,1fr) ;
}

header{
    grid-column: 1 / span3;/*ให้เริ่มตัวheaderในคอลั่มที่ 2 เเละอิ่นไปอยู่ในคอลั่มที่ 6*/
}
nav{
    display: flex;/*เลียงกันในแถวเดียวยาวๆ*/
    align-items: center;
    height: 100px;
    background-color: rgb(255, 255, 255);
}

.links{
    margin-left:auto ;
}

.logo{
    margin-left:20px ;
    width: 200px;
    height: auto;
}

.links a,.links button{
    font-size: 1.125rem;
    font-weight: 400;
    transition: var(--transsition);
}

.links a{
    margin-right:20px ;
}


.links a:hover{
    color: var(--accentHover);/*เมาส์ไปวางเเล้วสีเปลี่ยน*/
}
.button_med{
    border: none;
    background-color: var(--accent);
    padding: 8px 25px;
    transition: var(--transsition);
}

.button_med:hover{
    color: var(--accentHover);
}

/*ส่วนเนื้อหา*/
.menu {
    display: grid;
    grid-column: 2 /span 6;
    height: 80vh;
    background-color: #f0f0f0;
    margin-left:auto ;
    margin-top:3rem ;
    margin-top:10px ;
    margin-bottom:10px ;
    width: 100%;
    justify-content: center; /* จัดกลางแนวนอน */
    align-items: center; /* จัดกลางแนวตั้ง */
}

.memurobot {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* แสดงการ์ด 2 ใบข้างกัน */
    gap: 10px; /* ระยะห่างระหว่างการ์ด */
    align-items: center ;
    width: 100%;
    height: auto;
}

.slide-container {
    grid-column: 2 / span 6; /* จัดให้อยู่กึ่งกลาง grid */
    display: flex;
    justify-content: center; /* จัดกลางแนวนอน */
    align-items: center; /* จัดกลางแนวตั้ง */
    width: 100%;
    height: auto;
    margin-top: 10px;
    max-width: 100%;
    min-width: 400px;
}


.slide {
    margin: 0 auto; /* จัดกึ่งกลาง */
    width: 100%;  /* ปรับขนาดให้ไม่กินขอบ */
    max-width: 1000px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1024px) {
    .slide {
        max-width: 90%; /* ลดขนาดลงเล็กน้อย */
        max-height: 400px; /* ลดความสูง */
    }
}

@media (max-width: 768px) {
    .slide {
        max-width: 95%; /* ลดขนาดลงอีก */
        max-height: 300px; /* ลดความสูงมากขึ้น */
    }
}

@media (max-width: 480px) {
    .slide {
        max-width: 100%; /* ใช้พื้นที่เต็ม */
        max-height: 250px; /* ลดความสูงให้น้อยที่สุด */
    }
}


/* สไตล์ของ pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* สไตล์ของปุ่มเลขหน้า */
button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background 0.3s;
}

/* สไตล์ของปุ่มเลขหน้าเมื่อถูกเลือก */
.page-number.active {
    background-color: #f04f3f;  /* สีแดงส้ม */
    color: white;
    font-weight: bold;
}

/* สไตล์ของปุ่มเมื่อ hover */
button:hover {
    background-color: #ddd;
}

/* ซ่อนปุ่ม Prev และ Next เมื่อจำเป็น */
button.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.padding{
    margin-top: 50px;
    align-items: center ;
    justify-content: center;
    display: grid;
}


/*ส่วนที่ 3*/
.features{
    grid-column: 1/ span 8;
    background-color: #76a5fc;
    margin-top: 6%; ;
    /* top right bottom lift*/
    padding: 20px 0px 50px 300px ;
    display: flex;
    align-items: center ;
    justify-content: center;
    min-width: 100%; /* ป้องกันกล่องหด */
    max-width: 90%;
}

.feature {
    flex: none;
    padding: 10px 20px 0px 10px;
    /*background-color: aqua;*/
}

.px1{
    display: flex;
    height: 200px;
    gap: 10px;
    margin-left: auto; /* ดันให้ QR Code ไปขวาสุด */
    padding-left: 50px; /* เว้นระยะห่างจากเส้นกั้น */
    padding-right: 300px;
    padding-top: 13px;
    border-left: 2px solid black; /* เส้นกั้นสีดำ */
    align-items: center;
    /*background-color: var(--accentHover)*/

}