.font_sarabun {font-family: 'Sarabun', sans-serif;}
.font_freehand {font-family: 'Caveat', cursive;}
.font_noto {
  font-family: "Noto Sans Thai", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* เว้นระยะไม่ให้หัวข้อโดนแถว Navbar บังเมื่อเลื่อนไปถึง */
}
body {font-family: Sarabun; font-size: 16px;}

.bg_jansee_1 {
  background-image: url("../img_ui/img_jansee_bg_1.jpg"); 
  background-size: cover;       /* ขยายภาพให้เต็มพื้นที่กล่อง */
  background-position: center;   /* จัดจุดกึ่งกลางภาพไว้ตรงกลางหน้าจอ */
  background-repeat: no-repeat;  /* ห้ามภาพซ้ำ */
  min-height: 100vh;      
  background-color: #e0ae7f;
}
.bg_jansee_2 {
  background-image: url("../img_ui/img_jansee_bg_2.jpg"); 
  background-size: cover;       /* ขยายภาพให้เต็มพื้นที่กล่อง */
  background-position: center;   /* จัดจุดกึ่งกลางภาพไว้ตรงกลางหน้าจอ */
  background-repeat: no-repeat;  /* ห้ามภาพซ้ำ */
  min-height: 100vh;      
  background-color: #e0ae7f;
}
.bg_jansee_3 {
  background-image: url("../img_ui/img_jansee_bg_3.jpg"); 
  background-size: cover;       /* ขยายภาพให้เต็มพื้นที่กล่อง */
  background-position: center;   /* จัดจุดกึ่งกลางภาพไว้ตรงกลางหน้าจอ */
  background-repeat: no-repeat;  /* ห้ามภาพซ้ำ */
  min-height: 100vh;      
  background-color: #e0ae7f;
}
.bg_jansee_4 {
  background-image: url("../img_ui/img_jansee_bg_4.jpg"); 
  background-size: cover;       /* ขยายภาพให้เต็มพื้นที่กล่อง */
  background-position: center;   /* จัดจุดกึ่งกลางภาพไว้ตรงกลางหน้าจอ */
  background-repeat: no-repeat;  /* ห้ามภาพซ้ำ */
  min-height: 100vh;      
  background-color: #e0ae7f;
}
.bg_jansee_5 {
  background-image: url("../img_ui/img_jansee_bg_5.jpg"); 
  background-size: cover;       /* ขยายภาพให้เต็มพื้นที่กล่อง */
  background-position: center;   /* จัดจุดกึ่งกลางภาพไว้ตรงกลางหน้าจอ */
  background-repeat: no-repeat;  /* ห้ามภาพซ้ำ */
  min-height: 100vh;      
  background-color: #e0ae7f;
}

.bg_paper_1 {background-image: url("../img_ui/bg_paper_1.jpg");
  background-repeat: repeat; 
  background-color: #e0ae7f;
}

.pad_5 {padding: 5px;}
.pad_10 {padding: 10px;}
.pad_20 {padding: 20px;}

.radius_8 {border-radius: 8px;}
.radius_16 {border-radius: 16px;}
.radius_50 {border-radius: 50%;}