/* Main */
.swal2-container {
    position: fixed !important;
}

body.swal2-shown {
    overflow: visible !important;
    padding-right: 0 !important;
}

/* my font */
@font-face {
  font-family: navFont;
  src: url(../font/Mitr-Medium.ttf);
}

@font-face {
  font-family: mainFont;
  /*src: url(../font/SF-Pro-Display-Thin.otf);*/
  src: url(../font/Mitr-Regular.ttf);
}

hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #ccc, transparent);
  margin: 30px 0;
}

table, th, td {
  /* border: 1px solid; */
}

#tablemain {
    width: 1024px;
    max-width: 1024px;
    margin: 0 auto;
    table-layout: fixed;
}
#tablemember {
	width: 1024px; 
	margin-top: 0;
}

#tablecmail {
	width: 1024px; 
	margin-top: 0;
}

div {
	font-family: mainFont;
}

.div2 {
	font-family: mainFont;
	font-weight: bold;
}
body{
	margin: 0;
	font-family: mainFont;
	font-size: 16px;	
	overflow-y:scroll;
	    background:
        linear-gradient(
            rgba(255,255,255,0.4),
            rgba(255,255,255,0.4)
        ),
        url("../img/backgroud_main.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	}
font{
	font-family: mainFont;	
	min-width: 900px;
}

.bodymain {
	font-family: mainFont;
	top: 0;
	margin-top: 0px;
	cursor: default;
	background: rgba(220, 220, 220, 0.8); /* Green background with 30% opacity */
	min-height: 700px;

  opacity: 0;
  animation: fadeIn 1.5s ease-in-out forwards;
}
#bodymain {
	border-radius: 10px; /* ความมนของขอบ */
	padding : 10px; /*จากระยะขอบนอกมาใน*/
	margin-top : 0px;
	margin-left:1px;
}
.autofade {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


.bodymember {	
	font-family: navFont;
	top: 0;
	margin-top: 0px;
	padding-top: 10px;
	cursor: default;
	background: rgba(220, 220, 220, 0.7); /* Green background with 30% opacity */
	min-height: 630px;
}
#bodymain_member {
	border-radius: 10px; /* ความมนของขอบ */
	padding : 20px; /*จากระยะขอบนอกมาใน*/
	margin-top : -25;
	margin-left:1px;
}
h2{
	text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff;
}
h1{
	text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff;
}
h3{
	color: #000 ;
	text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff;
}

/* nav footer */
.footernav {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: rgb(51,51,51);
	position: stick;
	bottom: 8;
	width: 1024px;
	height: 30px;
	font-size: 12px;
	border-radius: 5px; /* ความมนของขอบ */
}

/************************************************************************************************************************/
/* under line like not show */
a, a:link {
	text-decoration: none;
}		

/* button & effect */

.button_login {
  background-color: green; /* Green */
  border: none;
  color: white;
  padding: 10px 133px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.1s; /* Safari */
  transition-duration: 0.1s;
  border-radius: 5px;
}

.button_login2 {
  background-color: green; /* Green */
  border: none;
  color: white;
  padding: 7px 58px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.1s; /* Safari */
  transition-duration: 0.1s;
  border-radius: 5px;
  width: 250px;
  height: 40px;
}

.button_1 {
  background-color: green; /* Green */
  border: none;
  color: white;
  padding: 10px 42px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.1s; /* Safari */
  transition-duration: 0.1s;
  border-radius: 5px;
}
.button_2 {
  background-color: red; /* Green */
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.1s; /* Safari */
  transition-duration: 0.1s;
  border-radius: 5px;
}
.button_effect:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button_charector {
  background-color: green; /* Green */
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.1s; /* Safari */
  transition-duration: 0.1s;
  border-radius: 2px;
}
.button_charector:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/* scroll bar */
/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(150,150,150,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(150,150,150,0.4); 
}




/* icon gray */
/*
img#img-gray {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}
*/


/*_______________________________________________________________________________*/
		
		/* logo animetion */
        .logo {
            width: 700px; /* ขนาดโลโก้ */
			display: block;
			margin: 0 auto;   /* 👈 จัดกึ่งกลางแนวนอน */
            animation: float 4s ease-in-out infinite;
			margin-top: -30px;
        }
		.logo-area {
			margin-top: 0;
		}
        /* เอฟเฟกต์ลอยขึ้นลง */
        @keyframes float {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0);
            }
        }
		
/*_______________________________________________________________________________*/

		/* right menu container หลัก */
		#right-fab {
			position: fixed;
			bottom: 20px;
			right: 28px; /* ค่า default สำหรับ mobile */
			z-index: 9999;
			transition: bottom .2s ease;
			
			display: flex;
			flex-direction: column; /* ✅ ปกติ */
			align-items: center;
			gap: 12px;
			left: auto !important;
		}
			
		#right-floating-menu {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		/* ปุ่ม */
		.float-btn {
			position: relative; /* ✅ เพิ่มบรรทัดนี้ */
			width: 52px;
			height: 52px;
			border-radius: 50%;
			background: #2563eb;
			color: #fff;
			font-size: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 6px 15px rgba(0,0,0,.25);
			transition: all .25s ease;
		}


		.float-btn:hover {
			transform: translateX(-6px) scale(1.08);
			background: #1d4ed8;
		}

		/* back to top */
		#back-to-top {
			display: none; /* ปิดใช้งาน */
		}
		
		#back-to-top {
			position: static; /* ⭐ สำคัญ */
			background: #0f172a;
		}

		#back-to-top:hover {
			background: #020617;
			transform: translateY(-6px) scale(1.08);
		}


		@media (max-width: 768px) {
			#right-fab {
				right: 20px;
				bottom: 20px;
			}

			.float-btn {
				width: 46px;
				height: 46px;
				font-size: 20px;
			}
		}
			
		@media (max-width: 768px) {
			.float-btn:hover {
				transform: none;
			}
		}
		
		.float-btn:hover {
			transform: translateX(-6px) scale(1.08);
			background: #1d4ed8;
		}

		.float-btn.danger {
			background: #dc2626;
		}

		.float-btn.danger:hover {
			background: #b91c1c;
		}

		.float-btn.success {
			background: green;
		}

		.float-btn.success:hover {
			background: green;
		}

		.float-btn.warnning {
			background: #BF9900;
		}

		.float-btn.warnning:hover {
			background: #BF9900;
		}

		.float-btn.admin {
			background: #AA29FF;
		}

		.float-btn.admin:hover {
			background: #AA29FF;
		}
		.float-btn.etc {
			background: #999999;
		}

		.float-btn.etc:hover {
			background: #999999;
		}

		.float-btn::after {
			content: attr(title);
			position: absolute;
			right: calc(100% + 12px); /* ✅ แทน right:65px */
			top: 50%;
			transform: translateY(-50%);
			background: #0f172a;
			color: #fff;
			padding: 6px 10px;
			border-radius: 6px;
			white-space: nowrap;
			opacity: 0;
			pointer-events: none;
			transition: opacity .2s;
		}

		.float-btn:hover::after {
			opacity: 1;
		}
		

/* general form zone*/
.general-form,
.general-form h1,
.general-form span,
.general-form input,
.general-form label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
/* Form Container */
.general-form {
	font-family: navFont;
	color: #000;
	margin: auto;
	width: 300px;
	height: 420px;
	padding: 15px 25px 0 25px;
	margin-top: 20px;
	cursor: default;
}
/* Form Title */
.general-form	h1 {
	line-height: 40px;
	font-family: mainFont;
	font-size: 22px;
	font-weight: normal;
}
/* Form Input General Styles */
.general-form input[type=text],
.general-form input[type=password] {
	line-height: 14px;
	margin: 7px 0;
	padding: 5px 20px;
	border: 0;
	outline: none;
	color: #000;
	font-family: mainFont;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0px 1px 1px rgba(255,255,255, .2);
}
/* Form User&Pass Input Styles */
.general-form input[type=text],
.general-form input[type=password],
.js .general-form span {
	color: #000;
	width: 300px;
}
.general-form input[type=text]:hover,
.general-form input[type=password]:hover {
}
.general-form input[type=text]:focus,
.general-form input[type=password]:focus {
}


/* top back */
.bodymain{
    position: relative; /* สำคัญมาก */
}
.back-btn{
    position: absolute;
    top: 15px;
    right: 20px;
    text-decoration: none;
    background: #F54927;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    transition: 0.2s;
	/*width: 80px;*/
}

.back-btn:hover{
    background: #F87C63;
}