/**
* Design By Eggda-Studio (CLEAN FULL VERSION)
**/

@import url("https://fonts.googleapis.com/css?family=Kanit:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=thai");
@import url("https://fonts.googleapis.com/css?family=Mitr:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=thai");
@import url("https://fonts.googleapis.com/css?family=Asap:400,700|Roboto");

/* =========================
   BASE
   ========================= */
html, body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: url("../../images/bg_body.jpg") no-repeat center top fixed;
  background-size: cover;
  background-color: transparent;
}

body{
  font-family: "Kanit", sans-serif;
  color: #000;
  overflow-x: hidden;
  cursor: url('../../images/cusor.png'), auto;
}

a{ cursor: url('../../images/link.cur'), auto; }
ul{ list-style-type: none; }

a:link, a:visited, a:hover, a:active{
  text-decoration: none;
  outline: 0 !important;
}

/* Scrollbar */
body::-webkit-scrollbar{ width:5px; height:5px; background-color:#fff; }
body::-webkit-scrollbar-track{ background-color:#fff; }
body::-webkit-scrollbar-thumb{ background:#eee; }

/* =========================
   PARTICLES (FULL PAGE)
   ========================= */
#particles-js,
#particles-js2{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;              /* หลังสุด */
  pointer-events: none;
  background: transparent !important;
}

#particles-js canvas,
#particles-js2 canvas{
  background: transparent !important;
}

/* =========================
   LAYOUT (NEW STRUCTURE)
   ใช้แทน table-layout เดิม
   ========================= */
.wrapper{
  position: relative;
  z-index: 5;              /* อยู่หน้า particles */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  /* ให้เหมือนเดิมบน PC */
  min-width: 1200px;

  /* ไม่ fix สูง ไม่ใส่ bg ซ้ำ */
  height: auto;
  background: transparent;
}

/* ระยะเว้นบน: ปรับได้ 150-250 */
.top-space{ height: 180px; }

.content-area{
  display: flex;
  min-height: 1130px;      /* เท่าเดิม */
}

.left-space{
  width: 20px;
  flex: 0 0 20px;
}

.main-content{
  width: 1160px;
  flex: 0 0 1160px;
}

/* =========================
   LEGACY TABLE LAYOUT (DISABLE BREAKERS)
   ถ้ายังมีบางหน้าที่เรียกใช้ header_table/header_img อยู่ได้
   แต่ปิดตัวพัง margin:-268em
   ========================= */
.header_table{
  width: 1200px;
  position: relative;
  z-index: 5;
  margin: 0 auto !important;     /* ✅ ปิด -268.2em */
  top: 0 !important;             /* ✅ ปิดการดัน */
}

.header_img{
  width: 1200px;
  height: 0;
  position: absolute;
  z-index: 6;
}
.header_img > div{ position: absolute; }

/* โลโก้/สไลเดอร์ (คงของเดิม) */
.img-logo{
  background: url(../../images/logo.png);
  width: 915px;
  height: 470px;
  position: absolute;
  top: 24em;
  left: 9em;
  z-index: 99;
  -webkit-animation: .5s jumpjumpEffect infinite linear;
  -moz-animation: .5s jumpjumpEffect infinite linear;
  animation: .5s jumpjumpEffect infinite linear;
}

@-webkit-keyframes jumpjumpEffect {
  0%{ -webkit-transform: translate(0,0); transform: translate(0,0); }
  50%{ -webkit-transform: translate(0,5px); transform: translate(0,5px); }
  100%{ -webkit-transform: translate(0,0); transform: translate(0,0); }
}
@keyframes jumpjumpEffect {
  0%{ -webkit-transform: translate(0,0); transform: translate(0,0); }
  50%{ -webkit-transform: translate(0,5px); transform: translate(0,5px); }
  100%{ -webkit-transform: translate(0,0); transform: translate(0,0); }
}

.img-header{
  -webkit-animation: 5s menu_set infinite linear;
  -moz-animation: 5s menu_set infinite linear;
  animation: 5s menu_set infinite linear;
}

.img-slider{
  background: url(../../images/img-slider.png);
  width: 560px;
  height: 150px;
  position: absolute;
  z-index: 20;
  top: 57.5em;
  right: 22.5em;
  -webkit-animation: 15s devlEffect infinite linear;
  -moz-animation: 15s devlEffect infinite linear;
  animation: 15s devlEffect infinite linear;
}

@-webkit-keyframes devlEffect {
  0%{ -webkit-transform: translateY(0); transform: translateY(0); }
  90%{ -webkit-transform: translateY(2%); transform: translateY(2%); }
  95%{ -webkit-transform: translateY(4%); transform: translateY(4%); }
  100%{ -webkit-transform: translateY(0%); transform: translateY(0%); }
}
@keyframes devlEffect {
  0%{ -webkit-transform: translateY(0); transform: translateY(0); }
  90%{ -webkit-transform: translateY(2%); transform: translateY(2%); }
  95%{ -webkit-transform: translateY(4%); transform: translateY(4%); }
  100%{ -webkit-transform: translateY(0%); transform: translateY(0%); }
}

@-webkit-keyframes menu_set {
  0%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1); }
  25%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95); }
  50%{ transform-origin:bottom; transform:skewX(-2deg) scaleY(1); }
  75%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95); }
  100%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1); }
}
@keyframes menu_set {
  0%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1); }
  25%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95); }
  50%{ transform-origin:bottom; transform:skewX(-2deg) scaleY(1); }
  75%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95); }
  100%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1); }
}

.status_text{
  -webkit-animation: 8s slogo infinite linear;
  -moz-animation: 8s slogo infinite linear;
  animation: 8s slogo infinite linear;
}
@-webkit-keyframes slogo{
  from, 50%, to{ opacity:1; }
  25%, 75%{ opacity:0; }
}
@keyframes slogo{
  from, 50%, to{ opacity:1; }
  25%, 75%{ opacity:0; }
}

/* เอาชั้นพื้นหลังที่ซ้อนออก */
.change{ display:none !important; }

/* =========================
   STATUS BOX
   ========================= */
.box-status-on{
  text-align:center;
  color:#00720b;
  font-family:'Asap', sans-serif;
  font-size:1.2em;
  font-weight:800;
  letter-spacing:0.2px;
  -webkit-text-shadow:0 2px 3px rgb(82 190 92 / 35%);
  text-shadow:0 2px 3px rgb(82 190 92 / 35%);
}
.box-status-off{
  text-align:center;
  color:#ff3838;
  font-family:'Asap', sans-serif;
  font-size:1.2em;
  font-weight:800;
  letter-spacing:0.2px;
  -webkit-text-shadow:0 2px 3px rgb(254 171 171 / 35%);
  text-shadow:0 2px 3px rgb(254 171 171 / 35%);
}
.box-status-player{
  text-align:center;
  color:#f47900;
  font-family:'Asap', sans-serif;
  font-size:1.5em;
  font-weight:800;
  margin-top:0.2em;
  -webkit-text-shadow:0 1px 3px rgb(0 0 0 / 15%);
  text-shadow:0 1px 3px rgb(0 0 0 / 15%);
}
.box-status-user{
  text-align:center;
  color:#004ef4;
  font-family:'Asap', sans-serif;
  font-size:1.5em;
  font-weight:800;
  margin-top:0.5em;
  -webkit-text-shadow:0 1px 3px rgb(0 0 0 / 15%);
  text-shadow:0 1px 3px rgb(0 0 0 / 15%);
}
.box-status-char{
  text-align:center;
  color:#fff;
  font-family:'Asap', sans-serif;
  font-size:1.5em;
  font-weight:800;
  margin-top:0.3em;
  -webkit-text-shadow:0 1px 3px rgb(0 0 0 / 15%);
  text-shadow:0 1px 3px rgb(0 0 0 / 15%);
}
.rank-box{ color:#000; margin-top:0.5em; }

.rank-number,
.rank-name,
.rank-point{
  font-size:11px;
  color:#fff;
  background-color:#141414;
  border:solid 1px #383838;
  padding:.15em;
  border-radius:50px;
  width:100%;
  letter-spacing:0.5px;
  margin:0 auto;
}

.table-rank{ width:100%; max-width:100%; }
.table-rank > thead > tr > th,
.table-rank > tbody > tr > th,
.table-rank > tfoot > tr > th,
.table-rank > thead > tr > td,
.table-rank > tbody > tr > td,
.table-rank > tfoot > tr > td{
  padding:4px;
  line-height:1.25;
  vertical-align:middle;
  border-top:0;
}
.table-rank > thead > tr > th{
  vertical-align:bottom;
  border-bottom:0;
  color:#fff;
  font-size:12px;
  font-weight:400;
  letter-spacing:0.5px;
}
.table-rank > caption + thead > tr:first-child > th,
.table-rank > thead:first-child > tr:first-child > th,
.table-rank > caption + thead > tr:first-child > td,
.table-rank > thead:first-child > tr:first-child > td{ border-top:0; }
.table-rank > tbody + tbody{ border-top:0; }
.table-rank .table-rank{ background-color:transparent; }

/* =========================
   ALERT BOX (ONE VERSION ONLY)
   ========================= */
.show-reloadbox{
  padding:15px;
  border-radius:4px;
  color:#db2828;
  background-color:#ffe8e6;
  border-color:#ffa5a5;
  width:96%;
  margin:5em auto 0;
  font-family:Tahoma;
  font-size:12px;
}

/* =========================
   ALLNEWS EVENT BOX (FIXED)
   ========================= */
.allnews-row, .allnews-row *{ box-sizing:border-box; }

.allnews-row{
  width:1000px;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:flex-start;
  align-items:flex-start;
}

.allnews-col{
  position:relative;
  min-height:1px;
  padding:0;
  float:none !important;
  width:320px !important;
  flex:0 0 320px;
}

.allnews-box{
  margin-top:25px;
  width:320px;
  height:310px;
  position:relative;
  padding:10px;
  margin-bottom:1.5em;
  background-color:#fff;
  border:solid 1px rgba(0,0,0,0.05);
  border-radius:6px;
  box-shadow:0 5px 0 rgba(0,0,0,0.05);
  transform:translateY(0) scale(1);
  transform-origin:center;
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.allnews-box:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 7px 0 rgba(0,0,0,0.05);
}

figure{
  margin:-10px 0 0 -10px;
  width:320px;
  height:200px;
  padding:0;
  background:transparent;
  overflow:hidden;
  border-radius:6px 6px 0 0;
}

.boximg-shine{ margin-bottom:5px; }

.boximg-shine figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}
.allnews-box:hover .boximg-shine figure img{ transform:scale(1.05); }

.boximg-shine figure{ position:relative; }
.boximg-shine figure::before{
  position:absolute;
  top:0;
  left:-75%;
  z-index:2;
  display:block;
  content:'';
  width:50%;
  height:100%;
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
  transform:skewX(-25deg);
}
.allnews-box:hover .boximg-shine figure::before{
  animation:shine .75s ease-in-out;
}
@keyframes shine{ 100%{ left:125%; } }

.allnews-text-harder{
  font-size:16px;
  font-weight:300;
  letter-spacing:1px;
  color:#000;
  padding:5px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.allnews-text{
  font-size:14px;
  font-weight:400;
  letter-spacing:0.8px;
  color:#636363;
  padding:5px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.allnews-time{
  font-family:Tahoma;
  font-size:11px;
  color:#c3c3c3;
  padding:5px;
}
.allnews-time span{ font-family:Tahoma; float:right; }
.allnews-botton{ padding:5px; }

.btn-view{
  color:#ff5757;
  background-color:#fff;
  border-color:#e8e8e8;
  letter-spacing:0.5px;
  font-weight:400;
}
.btn-view:hover{
  color:#333;
  background-color:#e8e8e8;
  border-color:#e8e8e8;
}
.btn-view:focus, .btn-view.focus{
  color:#ff5757;
  background-color:#fff;
  border-color:#e8e8e8;
  outline:0 !important;
}
.btn-view:active, .btn-view.active{
  color:#ff5757;
  background-color:#fff;
  border-color:#e8e8e8;
}

/* bootstrap btn active fix (คงของเดิม แต่ให้ถูก) */
.btn:active, .btn.active{
  background-image:none;
  outline:0 !important;
  -webkit-box-shadow:none;
  box-shadow:none;
}

/* labels */
.label{
  display:inline;
  padding:0.1em 0.7em 0.1em;
  font-size:75%;
  font-weight:400;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  border-radius:0.25em;
}

/* =========================
   NOTICE LIST
   ========================= */
.icon-notice{ background:url('../../images/icon/news.png') no-repeat; margin-top:5px; }
.icon-event{ background:url('../../images/icon/event.png') no-repeat; margin-top:5px; }

.notice-list ul li{
  padding:0 0 7px 60px;
  font-family:'Prompt', sans-serif;
  font-size:12px;
  font-weight:200;
  color:#fff;
  transition:.3s all;
}
.notice-list ul li:hover{
  padding:0 0 7px 65px;
  font-family:'Prompt', sans-serif;
  font-size:12px;
  font-weight:200;
  color:#ff0;
  transition:.3s all;
}
.notice-list ul li a{
  font-family:Tahoma;
  font-size:12px;
  color:#009a71;
  transition:.3s all;
}
.notice-list ul li a:hover{
  font-family:Tahoma;
  font-size:12px;
  color:#69debf;
  text-decoration:none;
  transition:.3s all;
}
.notice-list ul li p{
  float:right;
  color:#696969;
  font-family:Tahoma;
  font-size:11px;
  padding-right:0;
  padding-top:2px;
}

.war-online{
  background-color:#44ab11;
  color:#fff;
  font-size:18px;
  padding:3px 20px 3px;
  border-radius:30px;
}
.online-box-wrap .box-status-player{ color:#00FF00; }

/* =========================
   NAV TABS
   ========================= */
.nav-tabs{
  border-bottom:5px solid #f5f5f5;
  width:100%;
  padding-top:5px;
  font-size:16px;
}
.nav-tabs > li{
  float:left;
  margin-bottom:-1px;
  left:15%;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
  border-width:0;
  background-color:transparent;
}
.nav-tabs > li > a{
  border:none;
  color:#000;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover{
  border:none;
  color:#ff0000 !important;
  background:transparent;
}
.nav-tabs > li > a::after{
  content:"";
  background:#ff0000;
  height:5px;
  position:absolute;
  width:100%;
  left:0;
  bottom:-4px;
  transition:all 250ms ease 0s;
  transform:scale(0);
}
.nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after{
  transform:scale(1);
}

@keyframes castle_r{
  0%{ opacity:0; }
  50%{ opacity:1; }
  100%{ opacity:0; }
}

/* =========================
   FORMS (YOUR ORIGINAL STYLE)
   ========================= */
label{
  display:inline-block;
  max-width:100%;
  margin-bottom:10px;
  font-family:'Prompt', sans-serif;
  font-weight:400;
  color:#000;
  letter-spacing:0.5px;
}
label a{ color:#3936ff; }
label a:hover{ color:#ff2658; text-decoration:none; }
label a:focus{ color:#ff2658; text-decoration:none; outline:0 !important; }

.form-control{
  display:block;
  width:100%;
  height:34px;
  padding:6px 12px;
  font-size:16px;
  line-height:1.42857143;
  color:rgba(0,0,0,0.87);
  background-color:#fff;
  background-image:none;
  border:1px solid #eee;
  border-radius:0px; /* คงเดิม */
  -webkit-box-shadow:none;
  box-shadow:none;
  -webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus{
  border-color:#8ccaff;
  outline:0;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(255,255,255,0.6);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(255,255,255,0.6);
}

.input-lg{
  height:46px;
  padding:10px 45px;
  line-height:1.3333333;
  border-radius:6px;
  font-family:'Prompt', sans-serif;
  font-weight:200;
  letter-spacing:0.5px;
}

.input-lg2{
  height:46px;
  padding:0 16px;
  line-height:1.3333333;
  border-radius:6px;
  font-family:'Prompt', sans-serif;
  font-weight:200;
  color:rgba(191,191,191,.87);
}

.has-feedback label ~ .form-control-feedback{ top:31px; }

.form-control::-moz-placeholder{ color:rgba(191,191,191,.87); opacity:1; }
.form-control::-ms-input-placeholder{ color:rgba(191,191,191,.87); }
.form-control::-webkit-input-placeholder{ color:rgba(191,191,191,.87); }

.form-control-feedback{ left:0; color:rgba(191,191,191,.87); }

.help-block{
  font-family:Tahoma;
  font-size:12px;
  display:block;
  margin-top:10px;
  margin-bottom:-10px;
  color:#7caaff;
}

.checkbox2 label{ font-weight:300; margin-top:20px; }

.btn-lg, .btn-group-lg > .btn{
  padding:10px 14px;
  font-size:18px;
  line-height:1.3333333;
  border-radius:5px;
}

.btn-register{
  color:#fff;
  background-color:#21BA45;
  border-color:#21BA45;
  letter-spacing:1px;
  -webkit-transition:.5s all;
  -moz-transition:.5s all;
  -ms-transition:.5s all;
  transition:.5s all;
  -o-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  -ms-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  -moz-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  -webkit-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  text-shadow:0 1px 0 rgba(0,0,0,0.15);
}
.btn-register:hover{
  color:#fff;
  background-color:#16ab39;
  border-color:#16ab39;
  letter-spacing:2px;
  -webkit-transition:.5s all;
  -moz-transition:.5s all;
  -ms-transition:.5s all;
  transition:.5s all;
  text-shadow:none;
  box-shadow:none;
}
.btn-register:focus, .btn-register.focus{
  color:#fff;
  background-color:#0ea432;
  border-color:#0ea432;
  outline:0 !important;
}
.btn-register:active, .btn-register.active{
  color:#fff;
  background-color:#198f35;
  border-color:#198f35;
}

.btn-close{
  color:#fff;
  background-color:#db2828;
  border-color:#db2828;
  letter-spacing:1px;
  -webkit-transition:.5s all;
  -moz-transition:.5s all;
  -ms-transition:.5s all;
  transition:.5s all;
  -o-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  -ms-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  -moz-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  -webkit-text-shadow:0 1px 0 rgba(0,0,0,0.15);
  text-shadow:0 1px 0 rgba(0,0,0,0.15);
}
.btn-close:hover{
  color:#fff;
  background-color:#d01919;
  border-color:#d01919;
  letter-spacing:2px;
  -webkit-transition:.5s all;
  -moz-transition:.5s all;
  -ms-transition:.5s all;
  transition:.5s all;
  text-shadow:none;
  box-shadow:none;
}
.btn-close:focus, .btn-close.focus{
  color:#fff;
  background-color:#ca1010;
  border-color:#ca1010;
  outline:0 !important;
}
.btn-close:active, .btn-close.active{
  color:#fff;
  background-color:#b21e1e;
  border-color:#b21e1e;
}

/* ✅ FIX: ของเดิมคุณมี .btn:close ซึ่งไม่มีจริง */
.btn.close, .btn .close{
  background-image:none;
  outline:0;
  -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.080);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.080);
}

.form-group{ margin-bottom:30px; }

/* select arrow */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background: url("../../images/btn_down.png") #fff no-repeat calc(100% - 10px) !important;
}
select::-ms-expand{ display:none; }
select > option{
  font-family:Tahoma;
  font-weight:500;
  font-size:14px;
  color:#333;
}

/* Modal */
.modal-body{ padding:15px 14px 15px; }
.modal-lg{ width:900px; margin:35px auto 0; }
.modal-header{ border-bottom:none; }
.modal-title{ font:18px 'Kanit'; margin:0; line-height:1.42857143; }
.modal-header .close{ margin-top:-10px; }

.b{ font-weight:bold; color:#ff5757; }

/* Panel */
.form-panel{ border:1px solid transparent; }
.form-panel-title{ margin-top:0; margin-bottom:0; font-size:14px; color:#fff; }
.form-panel-title a{
  color:#fff;
  font-weight:400;
  letter-spacing:2px;
  padding-left:5px;
  -webkit-animation:1s textled infinite linear;
  -moz-animation:1s textled infinite linear;
  -o-animation:1s textled infinite linear;
  -ms-animation:1s textled infinite linear;
  animation:1s textled infinite linear;
}
@keyframes textled{
  0%{ padding-left:5px; color:#555; }
  50%{ padding-left:10px; color:#ff0000; }
  100%{ padding-left:5px; color:#555; }
}

.form-panel-body{
  padding:10px;
  background-color:#fff;
  font-size:12px;
  font-weight:400;
  letter-spacing:0.5px;
}
.form-panel-heading{
  padding:13px 15px;
  border-bottom:1px solid transparent;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
}
.form-panel-group{ margin-bottom:20px; }
.form-panel-group .form-panel{ margin-bottom:0; border-radius:6px; }
.form-panel-group .form-panel + .form-panel{ margin-top:5px; }
.form-panel-group .form-panel-heading{ border-bottom:0; }
.form-panel-group .form-panel-heading + .form-panel-collapse > .form-panel-body{
  border-top:1px solid #eee;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
}
.form-panel-default{ border-color:#eee; }
.form-panel-default > .form-panel-heading{
  color:#333;
  background-color:#fff;
  border-color:#eee;
}

.input-group-addon{
  padding:5px 15px;
  font-size:14px;
  font-weight:200;
  letter-spacing:1px;
  line-height:1;
  color:#43f5ff;
  text-align:center;
  background-color:#fff;
  border:1px solid #eee;
  border-radius:6px;
}

/* Table transparent (กันบัง BG) */
table{ background: transparent !important; }

/* =========================
   RESPONSIVE (คงพฤติกรรมเดิม: ต่ำกว่า 1170 ให้ล็อค 1200)
   ========================= */

/* ===== FORCE POSITION REGISTER (ชัวร์ 100%) ===== */

/* 1) กันตัวเก่าที่ชอบดันด้วย margin แปลกๆ */
.header_table{
  margin: 0 auto !important;
  top: 0 !important;
}

/* 2) ปิดตัวเว้นบนเดิม */
.page-register .top-space{
  height: 0 !important;
  display: none !important;
}

/* 3) ขยับ "กล่องจริง" ที่เห็นบนจอ */
.page-register .ui.message.piled.segment{
  margin-top: 580px !important;   /* ✅ ปรับเลขนี้ = ระยะบน */
}

/* 4) กัน wrapper/พื้นหลังไม่ให้บัง */
.page-register .wrapper{
  background: transparent !important;
  height: auto !important;
}
/* FIX: stop scroll-jitter from animation libraries */
.page-register [data-aos],
.page-download [data-aos]{
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

.page-register .wow,
.page-download .wow{
  animation: none !important;
  visibility: visible !important;
}

/* =====================================================
   ALLNEWS 4 COLUMNS (BIG + CLEAN) - READY TO USE
   วางท้ายไฟล์ CSS เพื่อ Override ของเดิมแบบชนะชัวร์
   ===================================================== */

#allview .allnews-row,
#allview .allnews-row *{
  box-sizing: border-box !important;
}

/* ===== ROW ===== */
#allview .allnews-row{
  width: 1200px !important;               /* กรอบเดิม */
  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;     /* จัดกลางสวย */
  align-items: flex-start !important;

  gap: 12px !important;                   /* ช่องว่างกำลังดี -> การ์ดใหญ่ขึ้น */
}

/* ===== COL (4 ช่อง) ===== */
#allview .allnews-row .allnews-col{
  float: none !important;
  padding: 0 !important;

  width: calc((100% - (12px * 3)) / 4) !important;
  flex: 0 0 calc((100% - (12px * 3)) / 4) !important;
  max-width: calc((100% - (12px * 3)) / 4) !important;
}

/* ===== BOX ===== */
#allview .allnews-row .allnews-col .allnews-box{
  width: 100% !important;                 /* ทับ width 320 เดิม */
  height: 330px !important;
  padding: 10px !important;
  margin-top: 25px !important;

  border-radius: 10px !important;
  box-shadow: 0 5px 0 rgba(0,0,0,0.05) !important;

  transform: translateY(0) scale(1);
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}

#allview .allnews-row .allnews-col .allnews-box:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 22px rgba(0,0,0,0.16) !important;
}

/* ===== IMAGE (figure ของเดิมล็อก 320px -> ต้องทับ) ===== */
#allview .allnews-row .allnews-col .allnews-box figure{
  width: calc(100% + 20px) !important;    /* ชดเชย padding 10 */
  height: 220px !important;
  margin: -10px 0 0 -10px !important;

  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
}

/* รูป */
#allview .allnews-row .allnews-col .boximg-shine figure img{
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .25s ease;
}

#allview .allnews-row .allnews-col .allnews-box:hover .boximg-shine figure img{
  transform: scale(1.08);
}

/* ===== TEXT SCALE ===== */
#allview .allnews-text-harder{
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
}

#allview .allnews-text{
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

#allview .allnews-time{
  font-size: 11px !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px){
  #allview .allnews-row{
    width: 1000px !important;
  }
  #allview .allnews-row .allnews-col{
    width: calc((100% - (12px * 2)) / 3) !important;
    flex: 0 0 calc((100% - (12px * 2)) / 3) !important;
    max-width: calc((100% - (12px * 2)) / 3) !important;
  }
}

@media (max-width: 900px){
  #allview .allnews-row{
    width: 92% !important;
  }
  #allview .allnews-row .allnews-col{
    width: calc((100% - 12px) / 2) !important;
    flex: 0 0 calc((100% - 12px) / 2) !important;
    max-width: calc((100% - 12px) / 2) !important;
  }
}

@media (max-width: 520px){
  #allview .allnews-row .allnews-col{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #allview .allnews-row .allnews-col .allnews-box figure,
  #allview .allnews-row .allnews-col .boximg-shine figure img{
    height: 210px !important;
  }
}