/* รีเซ็ตค่าพื้นฐาน */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Prompt', sans-serif;
    background-color: #ffffff; /* สีพื้นหลังสว่างแบบซอฟต์สายตา */
}


#logo {
	width:165px;
	height:110px;
	float: left; border: 0px;
	}


.banner {
	width: 100%;
    max-width: 100%; /* max-width: 1280px; ความกว้างหน้าจอมาตรฐานปี 2026 */
    margin: 0 auto;    /* จัดให้อยู่ตรงกลางจอเสมอ */
	margin-left: auto;
	margin-right: auto;
    padding: 0px;   /* กันเนื้อหาชนขอบจอเมื่อเปิดในมือถือ */
	background-color: #011b79; /* สีพื้นหลังสว่างแบบซอฟต์สายตา */
}

/*---------------------------------------ตรึงคอลัมน์แรก-----------------------------------*/

 /* 4. คำสั่งสำคัญ: ตรึงแถวบนสุด (Header Cells) */
        .grid-header {
            position: sticky;        /* ตรึงตำแหน่งไว้ */
            top: 0;                  /* ตรึงไว้บนสุดของกล่อง scroll */
            background-color: #333333; /* ต้องใส่สีพื้นหลังทึบเพื่อบังข้อมูลที่เลื่อนขึ้นมา */
            color: #ffffff;
            font-weight: bold;
            z-index: 1;              /* อยู่บนเลเยอร์สูงสุด */
        }

/*---------------------------------------end ตรึงคอลัมน์แรก-----------------------------------*/


/*--------------------------------- Font ------------------------------- */
.txt16Blue{
	font-family: "MS Sans Serif";
	font-size: 16px;
	font-style: normal;
    color: #011c76;
	font-weight: bold;
}
.txt14Gray1{
	font-family: "Tahoma";
	font-size: 14px;
	font-style: normal;
    color: #333333;
}
.txtTopicGreen{
	font-family: "MS Sans Serif";
	font-size: 16px;
	font-style: normal;
    color: #009900;
	font-weight: bold;
}

h1{ font-size:18px; color: #009900; }
h2{ font-size:14px; color: #0043BB; }


/*---------------------------------End Font ------------------------------- */
a:link {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
.a:active {
	text-decoration: none;
}
/*---------------------------------  ตาราง------------------------------- */




.table-div {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* กำหนด 3 คอลัมน์ */
    border: 1px solid #ccc;
    width: 100%;
  }

.tr {
  display: table-row; 
  border-bottom-style: none;
height: auto;
	
}
.th {
  float: left;
  display: table-cell;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}
.td {
  float: left;
  display: table-cell;
  vertical-align: middle;
	 /*border: none; */
}
.td-product {
  float: left;
  display: table-cell;
  vertical-align: middle;
  padding: 0px 0px 0px 0px;
  height: 135px;
	 /*border: none; */
}
.td-detail-product {
  float: left;
  display: table-cell;
  vertical-align: middle;
  padding: 0px 0px 0px 10px;
	 /*border: none; */
}


/*---------------------------------  ตาราง3 col------------------------------ */

  .table-main {  /* Table Main: ใช้ display: table เพื่อกำหนดให้ div ทำตัวเหมือนแท็ก <table> */
    display: table;
    width: 100%;
    border: 0px solid #333;
	vertical-align: middle;
    position: sticky;        /* ตรึงตำแหน่งไว้ */
    top: 0;                  /* ตรึงไว้บนสุดของกล่อง scroll */
    background-color: #ffffff; /* ใส่สีพื้นหลังทึบเพื่อบังตัวหนังสือที่เลื่อนขึ้นมา */
    z-index: 1;              /* อยู่บนเลเยอร์สูงสุด */
	overflow-y: auto;        /* เปิดใช้งาน scroll แนวตั้ง */
  }
  .table-main-waterfilter {  /* Table Main: ใช้ display: table เพื่อกำหนดให้ div ทำตัวเหมือนแท็ก <table> */
    display: table;
    width: 100%;
    border: 1px solid #333;
	vertical-align: middle;
    position: sticky;        /* ตรึงตำแหน่งไว้ */
    top: 0;                  /* ตรึงไว้บนสุดของกล่อง scroll */
    background-color: #DEDEDE; /* ใส่สีพื้นหลังทึบเพื่อบังตัวหนังสือที่เลื่อนขึ้นมา */
    z-index: 1;              /* อยู่บนเลเยอร์สูงสุด */
	overflow-y: auto;        /* เปิดใช้งาน scroll แนวตั้ง */
  }
  .table-row { /* Table Row: ใช้ display: table-row ทำตัวเหมือนแท็ก <tr> */
    width: 100%;
	display: contents; /* ให้ลูกๆ จัดเรียงตาม grid ของแม่ */
	align-items: center;     /* กึ่งกลางแนวตั้ง */
	vertical-align: middle;
	overflow-y: auto;        /* เปิดใช้งาน scroll แนวตั้ง */
    background-color: #ffffff; /* ใส่สีพื้นหลังทึบเพื่อบังตัวหนังสือที่เลื่อนขึ้นมา */  
  }


  .table-cell { /* Table Cell: ใช้ display: table-cell ทำตัวเหมือนแท็ก <td>*/
    display: table-cell;
    border: 0px solid #ccc;
    padding: 2px;
  	vertical-align: middle;

  }
  .table-cell-product { /* Table Cell: ใช้ display: table-cell ทำตัวเหมือนแท็ก <td>*/
    display: table-cell;
    border: 0px solid #ccc;
    padding: 2px;
  	vertical-align: top;
	width: 245px;
	align-items: center;
  }
  .table-cell-footter { /* Table Cell: ใช้ display: table-cell ทำตัวเหมือนแท็ก <td>*/
    display: table-cell;
    border: 0px solid #ccc;
    padding: 2px;
  	vertical-align: top;
  }
  .table-cell-lineFootter { /* Table Cell: ใช้ display: table-cell ทำตัวเหมือนแท็ก <td>*/
    display: table-cell;
    border: 0px solid #ccc;
    padding: 0px;
	  height: 10px;
    background-color: #0067f3; /* ใส่สีพื้นหลังทึบเพื่อบังตัวหนังสือที่เลื่อนขึ้นมา */
  }
  /* สไตล์สำหรับตารางย่อยที่นำมาซ้อนด้านใน */
  .table-sub {  /*  การซ้อน: นำโครงสร้างชุด table-sub ไปใส่ไว้ข้างใน table-cell ของตารางหลักได้ทันที */
    display: table;
    width: 100%;
    border: 0px dashed #007bff;
    background-color: #f8f9fa;
  }