/* เชื่อมต่อฟอนต์ Sarabun */
@font-face {
    font-family: CPN;
    src: url(../fonts/font-cpn-lightce2b6.eot);
    src: url(../fonts/font-cpn-lightce2b6.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-cpn-lightdb30a.woff2) format("woff2"),
         url(../fonts/font-cpn-lightc751f.woff) format("woff"),
         url(../fonts/font-cpn-light79ed2.ttf) format("truetype"),
         url(../fonts/svg-cpn-light8ce03.svg#cpn-light) format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: CPN;
    src: url(../fonts/font-cpn-light-italic625da.eot);
    src: url(../fonts/font-cpn-light-italic625da.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-cpn-light-italice2576.woff2) format("woff2"),
         url(../fonts/font-cpn-light-italic9f020.woff) format("woff"),
         url(../fonts/font-cpn-light-italic2b23c.ttf) format("truetype"),
         url(../fonts/svg-cpn-light-italicd8b24.svg#cpn-light-italic) format("svg");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: CPN;
    src: url(../fonts/font-cpn-regularf514c.eot);
    src: url(../fonts/font-cpn-regularf514c.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-cpn-regular5fc45.woff2) format("woff2"),
         url(../fonts/font-cpn-regularc7c1a.woff) format("woff"),
         url(../fonts/font-cpn-regular0c1c4.ttf) format("truetype"),
         url(../fonts/svg-cpn-regular765f8.svg#cpn-regular) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: CPN;
    src: url(../fonts/font-cpn-italic40e26.eot);
    src: url(../fonts/font-cpn-italic40e26.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-cpn-italic50e11.woff2) format("woff2"),
         url(../fonts/font-cpn-italic7a422.woff) format("woff"),
         url(../fonts/font-cpn-italic72f58.ttf) format("truetype"),
         url(../fonts/svg-cpn-italic5ab30.svg#cpn-italic) format("svg");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: CPN;
    src: url(../fonts/font-cpn-condensed787cd.eot);
    src: url(../fonts/font-cpn-condensed787cd.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-cpn-condensed5861d.woff2) format("woff2"),
         url(../fonts/font-cpn-condensed58e55.woff) format("woff"),
         url(../fonts/font-cpn-condensed2c7c8.ttf) format("truetype"),
         url(../fonts/svg-cpn-condensed18c9a.svg#cpn-condensed) format("svg");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: CPN;
    src: url(../fonts/font-cpn-bolde6167.eot);
    src: url(../fonts/font-cpn-bolde6167.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-cpn-bolda4b21.woff2) format("woff2"),
         url(../fonts/font-cpn-bold6daeb.woff) format("woff"),
         url(../fonts/font-cpn-boldc0843.ttf) format("truetype"),
         url(../fonts/svg-cpn-bold06f74.svg#cpn-bold) format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: CPN;
    src: url(../fonts/font-cpn-bold-italic9aaca.eot);
    src: url(../fonts/font-cpn-bold-italic9aaca.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-cpn-bold-italic2f4f9.woff2) format("woff2"),
         url(../fonts/font-cpn-bold-italicb5879.woff) format("woff"),
         url(../fonts/font-cpn-bold-italicfe624.ttf) format("truetype");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/font-icomoonfda6c.eot);
    src: url(../fonts/font-icomoonfda6c.eot#iefix) format("embedded-opentype"),
         url(../fonts/font-icomoondb9a7.ttf) format("truetype"),
         url(../fonts/font-icomoonba24a.woff) format("woff"),
         url(../fonts/svg-icomoond246b.svg#icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}


/* ตั้งค่าสไตล์พื้นฐาน */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: CPN, sans-serif;
}

/* จัดกึ่งกลางเนื้อหา */
body {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* กรอบเนื้อหาหลัก */
.container {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 350px;
}

/* หัวข้อ */
h1, h2 {
    margin-bottom: 15px;
}

/* ปุ่ม */
button {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

button:hover {
    background: #218838;
}

/* ฟอร์ม */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* ตาราง */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background: #007bff;
    color: white;
}