@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: #0066cc;
    text-decoration: none
}

a:visited {
    color: #0066cc;
    text-decoration: none
}

a:hover {
    color: #F60;
    text-decoration: none
}

a:active {
    color: #0066cc;
    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 5px 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;
}

.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;
}


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

.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 {
    MARGIN-TOP: 10pt;
    FONT-WEIGHT: bold;
    FONT-SIZE: 32pt;
    MARGIN-BOTTOM: -0pt;
    COLOR: #ffffff;
    LINE-HEIGHT: 95%;
    FONT-FAMILY: freesiaupc;
    LETTER-SPACING: -1px
}

.txt_title_bar {
    MARGIN-TOP: 10pt;
    FONT-WEIGHT: bold;
    FONT-SIZE: 17pt;
    MARGIN-BOTTOM: -0pt;
    COLOR: #0066CC;
    LINE-HEIGHT: 95%;
    FONT-FAMILY: freesiaupc;
    LETTER-SPACING: -1px
}

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 ul {
    margin: 0;
    padding: 0;
    width: 180px;
    list-style-type: none;
}

#menu1 ul li {
    padding-bottom: 2px;
}

#menu1 ul li a {
    voice-family: "\"}\"";
    voice-family: inherit;
    voice-family: text-decoration: none;
}

#menu1 ul li a:link,
#menu1 li a:visited {
    display: block;
    /*background-color:#F0F8FF;*/
    padding: 4px 0 0 5px;
}

#menu1 ul li a:hover,
#menu1 li a:active {
    /*background-color:#CEE7FF;*/
    padding: 4px 0 0 5px;
}


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

.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;
}

.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;
    font-weight: normal;
}


/*************** 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;
}

#box_shadow {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.39);
    -moz-box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.39);
    box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.39);
}

#gallery_index img {
    max-height: 150px;
    max-width: 200px;
    object-fit: cover;
}

.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 +++++++++*/