body {
    font-family: 'Roboto Flex', sans-serif; /* Changed font to Roboto Flex */
    font-size:12pt;
    margin:0;
    padding:0;
    border:none;
	background-color: #E4E4CB;
	display: flex;
   	align-items: center;
	justify-content: center;
 }
 .container{
	max-width: 1024px;
    width: 100%;
    margin: auto;
    padding: 0.5rem;
	background-color: #FFF;
 }
 .boxtitle{
    padding: 10px 0 5px 20px;
	background-color: #FFF;
	height: 50px;
	border-left: 2px solid #CCC;
 	border-right: 2px solid #CCC;
 }
 .boxtitle h1{
    font-size: 1em;
 }
 /* Navigation container */
nav {
  background: #333;
  color: #fff;
}

/* Navigation list - desktop default */
#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;   /* horizontal layout */
}

#nav li {
  margin: 0;
}

#nav li a {
  display: block;
  padding: 15px 20px;
  margin-right: 10px;              /* space between menu items */
  text-decoration: none;
  color: white;
  border-left: 1px solid #777;     /* gray border on the left */
  transition: background 0.3s, color 0.3s;
  font-size: 1em;
  font-weight: bold;
}

#nav li:first-child a {
  border-left: none;               /* no border on the first item */
}

#nav li a:hover,
#nav li a:active {
  background: orange;              /* orange on hover & active */
  color: #fff;
}

/* Optional: persistent active page style */
#nav li a.active {
  background: orange;
  color: #fff;
}

/* Hamburger button (hidden on desktop) */
.menu-toggle {
  display: none;
  padding: 15px 20px;
  background: #333;
  color: white;
  cursor: pointer;
  font-size: 18px;
}
.boxdetail{
	width: 90%;
	padding: 1rem;
	font-size: 1.2em;
	color:#333;
	margin-left: auto;
  margin-right: auto;
}
.boxgallery{
	width: 100%;
	font-size: 1.2em;
	color:#333;
	margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-left: 2px solid #CCC;
  border-right: 2px solid #CCC;
}
.content-header{
	font-size:1.5em;
	font-weight: bold;
}
.linkbig{
	    text-align: center;
    font-size: 2em;
    color: #FFF;
    font-weight: bold;
}
/* Responsive styles */
@media (max-width: 768px) {
  #nav {
    flex-direction: column;
    display: none; /* hidden by default on mobile */
  }

  #nav li {
    border-top: 1px solid #444;
  }

  #nav li a {
    margin-right: 0;               /* no horizontal spacing in vertical mode */
    border-left: none;             /* no left border in vertical mode */
    border-top: 1px solid #777;    /* add gray separator between stacked links */
  }

  #nav li:first-child a {
    border-top: none;              /* remove border for the first item */
  }

  .menu-toggle {
    display: block; /* show hamburger button on mobile */
	font-weight: bold;
  }
}
.row {
      display: flex;
      margin-bottom: 10px; /* spacing between rows */
}

.row-1 {
      width: 100%;
      padding:0 0 0 20px;
      text-align: left;
}

.row-2 {
      display: flex;
      width: 100%;
}

.col-left {
      width: 30%;
      padding: 20px;
	  text-align: center;
}

.col-right {
      width: 60%;
      padding: 20px;
      margin-left: 10px; /* gap between columns */
	  line-height: 2em;
	  border-left: dotted 2px #CCC;
}

.eng_9pt {  font-size: 0.5em}
.thai_12pt {  font-size: 1em; font-weight: bold}
.thai_14pt {  font-size: 1.2em}
.thai_9pt {  font-size: 1em}
.thai_9pt_black {  font-size: 0.8em; color: #000000;}
.boxcolor {
	background-color: #CC9966;
	font-size: 0.8em;
	border: 1px double #FFFFFF;
	
}
.thai10pt {
	
	font-size: 1em;
}
.bttn1 {
	
	font-size: 0.8em;
	background-color: #F5E7CB;
	font-weight: bold;

}
.thai8pt {
	
	font-size: 1em;
}
.txtFooterEN{
    
	font-size: 1em;
}
.txtDescEN{
    
	font-size: 1em;
	color: #C4884D;
}
.txtDescTH {
	
	font-size: 1em;
	color: #C4884D;
}
.txtH1EN {  
	
	font-size: 1em;
}
.txtH1TH {  
	 
	font-size: 1em;
}
.txtJobTH {  
	
	color: #000000;
	font-size: 1em;
}
.txtJobHeadTH {  
	
	color: #744422;
	font-size: 1em;
	font-weight: bold;
}
.txtJobHiLiTH {  
	
	color: #FF6600;
	font-size: 1em;
	font-weight: bold;
}
.txtJobAlertTH {  
	
	color: #FFFF00;
	font-size: 1em;
	font-weight: bold;
}
.lnkJobTH {  
	
	color: #51351A;
	font-size: 1em;
}
.lkfooterEN {
	
	font-size: 0.8em;
	color: #FFFFFF;
}
a:link {   font-size: 1em; color: ##C4884D; text-decoration: none}
a:hover {
	
	font-size: 1em;
	color: #FFFF00;
	background-color: #FF6600;
}
a:visited {   font-size: 1em; color: #C4884D; text-decoration: none}
.txtGenTH {
	font-size: 1em;
}
.txtGenLightTH {
	
	font-size: 1em;
	color: #999999;
}
.txtGenBoldTH {
	
	font-size: 1em;
	font-weight: bold;
	color: #666666;
}
.txtHedBoldTH {
	
	font-size: 2em;
	font-weight: bold;
	color: #666666;
}
.txtHedBoldEN {
	font-size: 2em;
	font-weight: bold;
	color: #666666;
}
.txtDescTH {
	
	font-size: 0.5em;
	color: #666666;
}
.txtFooterTH {
	
	font-size: 0.8em;
	color: #999999;
}
.txtFooterEN {
	font-size: 0.8em;
	color: #999999;
}
.picGrey {
	border: 1px solid 999999;
}

.lnkGenTH {	
	font-size: 1.1em;
	font-weight: bold;
	color: #666666;
}
.lnkGenLightTH {
	
	font-size: 1.2em;
	font-weight: bold;
	color: #999999;
}
.lnkFooterTH {
	
	font-size: 1em;
	color: #333333;
}