@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:300|Athiti|Chonburi|Itim|Kanit|Maitree|Mitr|Pattaya|Pridi|Prompt|Sriracha|Taviraj|Trirong);
@import url(bulete_menu.css);

/* CSS Document */BODY {
	SCROLLBAR-FACE-COLOR: #eeeeee; MARGIN: 0px; 
	SCROLLBAR-HIGHLIGHT-COLOR: #eeeeee; 
	SCROLLBAR-SHADOW-COLOR: #999966; 
	SCROLLBAR-ARROW-COLOR: #999966; 
	SCROLLBAR-TRACK-COLOR: #eeeeee; 
	SCROLLBAR-DARKSHADOW-COLOR: #eeeeee; 
	SCROLLBAR-BASE-COLOR: #eeeeee; 
}

table {	
	FONT-SIZE: 13px;
	/*font-family:"MS Sans Serif";*/
	font-family:"Tahoma";
	font-weight: normal;
}


input { height: 20px; line-height: 20px; border: solid 1px #ccc; margin-right: 5px; padding: 0px 5px; }
.btn {
	background-color: #FF6594;
	border-color: #FFB2CD #DE4D83 #DE4D83 #FFB2CD;
	border-style: solid;
	border-width: 2px;
	height:23px;
	color: #fff;
	font-weight: normal;
	padding: 0px 1px;
}

a:link {color:#630; text-decoration: none}
a:visited {color: #630; text-decoration: none}
a:hover {color: #F60; text-decoration: none}
a:active {color: #630; text-decoration: none}

a.menu:link {color: #FFF; text-decoration: none; font-weight:bold}
a.menu:visited {color: #FFF; text-decoration: none; font-weight:bold}
a.menu:hover {color: #009; text-decoration: none; font-weight:bold}
a.menu:active {color: #FFF; text-decoration: none; font-weight:bold}

div.img
{
  margin: 2px;
  border: 1px solid #E6E4E4;
  float: left;
  background-color:#EFEFEF;
  text-align: center;
}	

div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #EFEFEF;
}

div.img a:hover img {border: 1px solid #CCC;}

div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}


/*---------- ไอคอนและเส้น ---------------*/
.bg_dot1{background: url('../images/img/dot1.gif') repeat-x; height:1px;}
.bg_line1{background: url('../images/img/line1.gif') repeat-x; height:2px;}
.bg_titleboard{background: url('../images/img/title_board.gif') repeat-x; height:24px; font-weight:bold; text-align:center;}

#mtop2 li a.itop_01{background: url('../images/img/itop_04.png') 12px 5px no-repeat;}
#mtop2 li a.itop_02{background: url('../images/img/itop_05.png') 12px 5px no-repeat;}	
#mtop2 li a.itop_03{background: url('../images/img/itop_06.png') 12px 5px no-repeat;}	
#mtop2 li a.itop_04{background: url('../images/img/itop_07.png') 12px 5px no-repeat;}	
#mtop2 li a.itop_05{background: url('../images/img/itop_01.png') 12px 5px no-repeat;}	
#mtop2 li a.itop_06{background: url('../images/img/itop_02.png') 12px 5px no-repeat;}	
#mtop2 li a.itop_07{background: url('../images/img/itop_03.png') 12px 5px no-repeat;}	

.bul_guest01{padding-left:25px;background: url('../images/img/pencil.gif')  3px 1px no-repeat; height:20px;}	
.bul_guest02{padding-left:25px;background: url('../images/img/user.gif')  3px 0px no-repeat;}	
.bul_guest03{padding-left:25px;background: url('../images/img/calendar.gif')  3px 0px no-repeat; height:18px;}	

.bul_icon01{padding-left:20px;background: url('../images/img/icon_01.gif')  3px 7px no-repeat; height:20px;}
.bul_icon02{padding-left:14px;background: url('../images/img/icon_02.gif')  0px 6px no-repeat; height:20px;}
.bul_icon022{padding-left:14px;background: url('../images/img/icon_022.gif')  0px 6px no-repeat; height:20px;}
.bul_icon03{padding-left:20px;background: url('../images/img/icon_03.gif')  3px 2px no-repeat; height:20px;}
.bul_icon04{padding-left:20px;background: url('../images/img/icon_04.gif')  3px 4px no-repeat; height:20px;}
.bul_icon05{padding-left:25px;background: url('../images/img/icon_05.gif')  3px 6px no-repeat; height:20px;}
.bul_icon06{padding-left:25px;background: url('../images/img/icon_06.gif')  3px 1px no-repeat; height:25px;}
.bul_icon09{padding-left:25px;background: url('../images/img/icon_09.gif')  3px 4px no-repeat; height:20px;}
.bul_icon10{padding-left:25px;background: url('../images/img/itop_05.png')  3px 1px no-repeat; height:20px;}

.b_lock{padding-left:23px;background: url('../images/img/b_lock.png')  3px 0px no-repeat; height:25px;}
.b_unlock{padding-left:23px;background: url('../images/img/b_unlock.png')  3px 0px no-repeat; height:25px;}
.b_cal{padding-left:23px;background: url('../images/img/b_cal.png')  3px 0px no-repeat; height:25px;}
.b_list{padding-left:23px;background: url('../images/img/b_list.png')  3px 0px no-repeat; height:25px;}
.b_forgot{padding-left:23px;background: url('../images/img/b_forgot.png')  3px 0px no-repeat; height:25px;}
.b_del{padding-left:23px;background: url('../images/img/b_del.png')  3px 0px no-repeat; height:25px;}
.b_new{padding-left:23px;background: url('../images/img/b_new.png')  3px 0px no-repeat; height:25px;}
.b_user{padding-left:23px;background: url('../images/img/b_user.png')  3px 0px no-repeat; height:25px;}
.b_mud{padding-left:23px;background: url('../images/img/b_mud.gif')  7px 3px no-repeat; height:22px;}
.b_unmud{padding-left:23px;background: url('../images/img/b_unmud.gif')  3px 0px no-repeat; height:22px;}
.b_topic{padding-left:23px;background: url('../images/img/b_topic.gif')  3px 2px no-repeat; height:22px;}

.txt_titlebar{
	color:#FFF; padding-left:15px; font-size:14px; font-weight:bold;
}

/*---------- ตัวหนังสือบาร์ ---------------*/

.txt_school_name{
	/*font-family: 'THSarabunNew', sans-serif;*/
	font-family: 'Kanit', sans-serif;
	font-size:30px; font-weight:bold; color:#FFF;
	/*text-shadow: 0.05em 0.05em 0.05em #333333;*/
	font-weight:normal;
}

.txt_school_address{
	/*
	font-family: 'THSarabunNew', sans-serif;
	font-family: 'Chonburi', cursive;
	font-family: 'Itim', cursive;	
	*/
	font-family: 'Kanit', sans-serif;
	font-size:16px;color:#FFF;
	line-height:30px;
	/*text-shadow: 0.05em 0.05em 0.05em #333333;*/
	font-weight:normal;
}

.txt_school_footer{
	/*font-family: 'THSarabunNew', sans-serif;*/
	font-family: 'Kanit', sans-serif;
	font-size:15px;color:#FFF;
	line-height:25px;
	font-weight:normal;
}

.bar_blank{padding-left:28px; background: url('../images/img/bar_blank.jpg') no-repeat; height:36px; width:191px;FONT-WEIGHT: bold; FONT-SIZE: 11pt; COLOR: #006; FONT-FAMILY: Tahoma; LETTER-SPACING: 0px}	

.txt_title {	FONT-WEIGHT: bold; FONT-SIZE: 22pt; COLOR: #ffffff;}

.txt_title_bar {	
	MARGIN-TOP: 10pt; MARGIN-BOTTOM: -0pt; COLOR: #FFF;
	/*font-family: supermarketRegular;*/
	font-family: 'Kanit', sans-serif;
	font-size: 20px;
	text-align:center;
}


td .bg_top{
	color:#FFF;
	padding-left:18px;
	padding-right:18px;
	background: url('../images/menutop_02.jpg') repeat-x; height:34px;
}

td .bg_topover{
	color:#FFF;
	padding-left:18px;
	padding-right:18px;
	background: url('../images/bgtop_over.jpg') repeat-x; height:34px;
}

.bg_topline{background: url('../images/bgtop_line.jpg') repeat-Y; height:34px; width:2px;}



/*---------- สำหรับโรงหน้าเว็บโรงเรียนใหม่ ---------------*/
.bg_title{
	background:url(../images/bg_title.png) repeat-x; height:25px; padding-left:10px; font-weight:bold;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

/* =-=-=-=-=-=-=-[Menu Three]-=-=-=-=-=-=-=- */
/*
#menu1 {
	width: 100%;
	border: 0px solid #ccc;
	margin: 0px;
	}
	
#menu1 li a {
  	height: 25px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	voice-family:
  	height: 25px;
	text-decoration: none;
	}
	
#menu1 li a:link, #menu1 li a:visited {
	color: #888;
	display: block;
	background: url(../images/menu3.gif);
	padding: 4px 0 0 5px;
	height:25px;
	}
	
#menu1 li a:hover, #menu1 li a:active {
	color: #283A50;
	background: url(../images/menu3.gif) 0 -32px;
	padding: 4px 0 0 5px;
	height:25px;
	}
*/
#menu1 {
	width: 100%;
	border: 0px solid #ccc;
	margin: 0px;
	}
	
#menu1 li a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	voice-family:
	text-decoration: none;
	}
	
#menu1 li a:link, #menu1 li a:visited {
	display: block;
	/*background-color:#F0F8FF;*/
	padding: 4px 0 0 5px;
	/*height:22px;*/
	}
	
#menu1 li a:hover, #menu1 li a:active {
	/*background-color:#CEE7FF;*/
	padding: 4px 0 0 5px;
}

/*************** Pagination ***************/
#main-content .pagination {
                text-align: right;
                padding: 20px 0 5px 0;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 10px;
                }
.pagination a {
                margin: 0 5px 0 0;
                padding: 3px 6px;
                }

.pagination a.number {
				border: 1px solid #ddd;
                }

.pagination a.current {
                background: #469400 url('../images/bg-button-green.gif') top left repeat-x !important;
                border-color: #459300 !important;
                color: #fff !important;
 }
 
 .black-ribbon {
  position: fixed;
  z-index: 9999;
  width: 70px;
}
@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }


/*++++++++  Chat Live 2024-06-01 +++++++++*/
.live-chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.live-chat-buttons {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.chat-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    transition: background-color 0.3s ease;
    position: relative;
}

.chat-button.messenger {
    background-color: #0084ff;
}

.chat-button.phone {
    background-color: #34b7f1;
	cursor: pointer;
}

.chat-button.phone .phone-number {
    display: none;
    position: absolute;
    left: -160px;
    background-color: #34b7f1;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
}

.chat-button:hover {
    opacity: 0.8;
}

.toggle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff5e3a;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-button:hover {
    opacity: 0.8;
}
/*++++++++  END  Chat Live +++++++++*/