.header {
    border-radius: 0.5em;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo {
    width: 500px;
    height: auto;
}

.mainside {
    text-align: center;
}

.main {
    height: 100%;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.withBackground {
    background-image: url('../images/Bangkok.png');
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

.rounded-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4f4a41;
    color: white;
    border: none;
    border-radius: 5px;
    /* Adjust the value for roundness */
    cursor: pointer;
}

.rounded-button:hover {
    background-color: #6e6658;
    ;
}

p {
    color: #112d32;
    text-shadow: 2px 2px 5px #112d32;
}

.footer p {
    color: white;
    text-shadow: 2px 2px 5px white;
}

form {
    padding: 5px;
}

li {
    display: inline;
}

li a {
    display: inline-block;
    color: white;
    text-decoration: none;
    border-radius: 1em;
    padding: 0.5em;
    background-color: #4f4a41;
    text-align: center;
}

li a:hover {
    background-color: #6e6658;
}

div {
    background-color: white;
    color: #112d32;
}

.footer {
    bottom: 0;
    border-radius: 1em;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: #112d32;
    color: white;
    text-align: center;
    display: grid;
    place-items: center;
}

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 1em;
    gap: 2em;
}

.center {
    text-align: center;
    background-color: white;
}

.grid-containerH {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    /* ให้ container ปรับตามขนาดกรอบภายนอก */
    padding: 10px;
    border: 2px solid black;
    /* เพิ่มเส้นกรอบ */
}

.grid-containerH p {
    max-width: 100%;
    /* จำกัดขนาดข้อความไม่ให้เกินรูป */
    width: 400px;
    /* ขนาดข้อความเท่ากับรูปภาพ */
    text-align: center;
}

.grid-containerH img {
    width: 400px;
    /* กำหนดขนาดรูปภาพตามต้องการ */
}

.outer-container {
    /* ปรับขนาดกรอบใหญ่ตรงนี้ */
    width: 100%;
    /* ปรับให้เต็มความกว้างของหน้าจอ */
    max-width: 2000px;
    /* กำหนดค่ามากสุด เพื่อไม่ให้กว้างเกินไป */
    border: 2px solid black;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    /* ใช้ Flexbox */
    flex-direction: column;
    /* แก้ให้เรียงแนวตั้ง */
    justify-content: center;
    /* จัดให้อยู่ตรงกลาง */
    align-items: center;
    /* จัดให้เนื้อหาอยู่ตรงกลาง */
}

.inner-container {
    max-width: 100%;
    text-align: center;
    padding: 5px;
}

.grid-container1 {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    /* สร้าง 3 คอลัมน์ */
    gap: 5px;
    /* ระยะห่างระหว่างช่อง */
    padding: 10px;
}

.grid-container1 div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-container2 {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    /* สร้าง 3 คอลัมน์ */
    gap: 5px;
    /* ระยะห่างระหว่างช่อง */
}

.grid-container2 div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-container3 {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    /* สร้าง 6 คอลัมน์ */
    gap: 5px;
    /* ระยะห่างระหว่างช่อง */
}

.grid-container3 div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-container {
    /* ชุดนี้ใส่ภาพสีทักษา สาวเต้นระบำสามภาพ */
    display: flex;
    /* ใช้ Flexbox */
    gap: 10px;
    /* เว้นระยะระหว่างภาพ */
    justify-content: center;
    /* จัดให้อยู่ตรงกลาง */
}

.image-container img {
    height: 100px;
    /* กำหนดให้ภาพเป็นจัตุรัส */
    aspect-ratio: auto;
    /* ให้รูปภาพรักษาสัดส่วนเดิม */
}

.image-containerD {
    /*ชุดนี้ใส่ภาพเข็มทิศ */
    display: flex;
    /* ใช้ Flexbox */
    gap: 10px;
    /* เว้นระยะระหว่างภาพ */
    justify-content: center;
    /* จัดให้อยู่ตรงกลาง */
}

.image-containerD img {
    height: 200px;
    /* กำหนดให้ภาพเป็นจัตุรัส */
    aspect-ratio: auto;
    /* ให้รูปภาพรักษาสัดส่วนเดิม */
}