:root{
  --red:#d5101d;
  --red2:#b30b16;
  --red-dark:#7c050c;
  --red-deep:#500207;

  --gold:#d6a12b;
  --gold2:#ebc15a;
  --gold-light:#ffe396;

  --text:#241d1e;
  --muted:#766a6b;
}


/* =========================================================
   GLOBAL
========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
}

body{
  min-height:100vh;
  min-height:100dvh;

  overflow:hidden;

  font-family:'Prompt',sans-serif;

  color:var(--text);

  background:var(--red-deep);
}

button,
input{
  font:inherit;
}

button{
  touch-action:manipulation;
}

svg{
  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;

  stroke-linejoin:round;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.app-shell{
  display:grid;

  /*
    ฝั่งซ้าย 66%
    ฝั่ง Login 34%

    คงขนาด Login เดิม
  */

  grid-template-columns:
    minmax(0,66%)
    minmax(390px,34%);

  width:100vw;

  height:100vh;
  height:100dvh;

  overflow:hidden;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.visual-panel{
  position:relative;

  min-width:0;
  min-height:0;

  height:100%;

  overflow:hidden;

  background:#d9eef7;
}


/* CAMPUS IMAGE */

.campus-image{
  position:absolute;

  z-index:0;

  inset:-2%;

  width:104%;
  height:104%;

  object-fit:cover;

  object-position:center 50%;

  opacity:.48;

  transform:scale(1.02);

  filter:
    saturate(.80)
    contrast(.98)
    brightness(1.04);
}


/* IMAGE TINT */

.campus-tint{
  position:absolute;

  z-index:1;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(210,240,252,.70) 0%,
      rgba(230,245,246,.57) 28%,
      rgba(250,247,228,.43) 61%,
      rgba(255,241,208,.32) 81%,
      rgba(106,3,11,.12) 100%
    );
}


/* LIGHT */

.campus-light{
  position:absolute;

  z-index:2;

  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 49% 1%,
      rgba(255,226,111,.38),
      transparent 44%
    ),
    linear-gradient(
      90deg,
      rgba(113,4,11,.03),
      transparent 34%,
      transparent 77%,
      rgba(255,244,215,.10)
    );
}


/* SOFT GRID */

.soft-grid{
  position:absolute;

  z-index:3;

  inset:0;

  pointer-events:none;

  opacity:.045;

  background-image:
    linear-gradient(
      rgba(120,7,15,.35) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(120,7,15,.35) 1px,
      transparent 1px
    );

  background-size:
    42px
    42px;
}


/* =========================================================
   LEFT RIBBON
========================================================= */

.left-ribbon{
  position:absolute;

  z-index:60;

  left:0;
  top:0;

  width:
    clamp(
      118px,
      10.8vw,
      180px
    );

  height:62%;

  overflow:hidden;

  background:
    linear-gradient(
      155deg,
      #760409,
      #bd0d18 54%,
      #79050d
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 75%,
      84% 84%,
      68% 100%,
      0 93%
    );

  box-shadow:
    12px
    10px
    30px
    rgba(68,0,6,.18);
}


.ribbon-pattern{
  position:absolute;

  inset:0;

  opacity:.11;

  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 12px,
      rgba(255,255,255,.23) 13px,
      transparent 14px
    );
}


.ribbon-outline{
  position:absolute;

  right:8px;
  top:0;

  width:74%;
  height:36%;

  border:2px solid var(--gold-light);

  border-left:0;
  border-bottom:0;

  border-radius:
    0
    68px
    0
    0;
}


.ribbon-watermark{
  position:absolute;

  z-index:4;

  inset:
    11%
    10%
    12%
    10%;

  pointer-events:none;
}


.ribbon-watermark strong{
  position:absolute;

  left:4%;
  top:5%;

  writing-mode:vertical-rl;

  transform:rotate(180deg);

  font-family:'Montserrat',sans-serif;

  font-size:
    clamp(
      60px,
      5.5vw,
      92px
    );

  font-weight:900;

  line-height:.86;

  letter-spacing:-3px;

  background:
    linear-gradient(
      180deg,
      #fff9cf 0%,
      #ffe88b 14%,
      #f7c94d 31%,
      #d89412 49%,
      #fff2ad 66%,
      #e0a51d 80%,
      #b86d05 100%
    );

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  -webkit-text-fill-color:transparent;

  opacity:.84;

  filter:
    drop-shadow(
      0 1px 0
      rgba(255,255,255,.22)
    )
    drop-shadow(
      0 3px 4px
      rgba(70,36,0,.18)
    );
}


.ribbon-watermark span{
  position:absolute;

  right:8%;
  top:8%;

  writing-mode:vertical-rl;

  transform:rotate(180deg);

  white-space:nowrap;

  font-family:'Montserrat',sans-serif;

  font-size:
    clamp(
      10px,
      .9vw,
      15px
    );

  font-weight:800;

  letter-spacing:3px;

  background:
    linear-gradient(
      180deg,
      #fff7c7 0%,
      #ffe178 22%,
      #d99b17 50%,
      #fff0a1 72%,
      #bf7908 100%
    );

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  -webkit-text-fill-color:transparent;

  opacity:.96;

  filter:
    drop-shadow(
      0 1px 2px
      rgba(78,38,0,.2)
    );
}


/* =========================================================
   LEFT MAIN CONTENT
========================================================= */

.visual-content{
  position:relative;

  z-index:10;

  display:flex;

  flex-direction:column;

  width:100%;

  height:88%;

  padding:
    18px
    clamp(26px,2.8vw,48px)
    38px
    clamp(125px,11.3vw,188px);
}


/* =========================================================
   BRAND AREA
========================================================= */

.brand-section{
  width:100%;

  /*
    ตำแหน่ง Logo ด้านบน
  */

  transform:
    translateY(24px);
}


.brand-row{
  display:flex;

  align-items:center;

  justify-content:center;

  min-height:
    clamp(
      175px,
      21vh,
      220px
    );
}


.crest-box{
  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:
    0 0
    clamp(
      150px,
      min(11.5vw,18vh),
      200px
    );

  height:
    clamp(
      150px,
      min(11.5vw,18vh),
      200px
    );
}


.crest-image{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  filter:
    contrast(1.05)
    saturate(1.08)
    drop-shadow(
      0 7px 12px
      rgba(67,27,0,.12)
    );
}


.crest-fallback{
  display:none;

  align-items:center;

  justify-content:center;

  width:105px;

  height:105px;

  border:
    3px
    solid
    var(--gold);

  border-radius:50%;

  color:var(--red);

  background:
    rgba(255,255,255,.55);

  font-family:'Montserrat';

  font-weight:800;
}


.brand-divider{
  width:2px;

  height:
    clamp(
      115px,
      15vh,
      150px
    );

  margin:
    0
    clamp(
      18px,
      1.5vw,
      28px
    );

  background:
    linear-gradient(
      transparent,
      #77392e 16%,
      #77392e 84%,
      transparent
    );
}


.wordmark{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  justify-content:center;
}


.wordmark-logo{
  color:#e4101b;

  font-family:'Montserrat';

  font-size:
    clamp(
      72px,
      min(6.5vw,9vh),
      108px
    );

  font-weight:900;

  font-style:italic;

  line-height:.8;

  letter-spacing:-5px;
}


.wordmark-en{
  margin-top:11px;

  color:#282123;

  font-family:'Montserrat';

  font-size:
    clamp(
      13px,
      min(1.22vw,1.85vh),
      21px
    );

  font-weight:700;

  line-height:1.03;
}


.wordmark-en strong{
  color:#dc111c;
}


.wordmark-th{
  margin-top:7px;

  color:#655b5c;

  font-size:
    clamp(
      10px,
      min(.95vw,1.45vh),
      16px
    );
}


/* =========================================================
   SYSTEM HEADING

   จุดสำคัญ:
   ปรับตำแหน่งข้อความฝั่งซ้ายลง
   ให้ใกล้ภาพต้นแบบ
========================================================= */

.system-heading{
  width:100%;

  max-width:1100px;

  margin:
    0
    auto;

  text-align:center;

  /*
    เดิม 62px
    ปรับเป็น 108px
  */

  transform:
    translateY(108px);
}


.system-heading h1{
  margin:0;

  color:#85060d;

  font-size:
    clamp(
      60px,
      min(5.7vw,7.6vh),
      94px
    );

  font-weight:800;

  line-height:1;

  letter-spacing:-2.6px;

  text-shadow:
    0 2px 0
    rgba(255,255,255,.35),

    0 8px 18px
    rgba(77,0,6,.05);
}


.system-heading h2{
  margin:
    10px
    0
    0;

  color:#171314;

  font-family:'Montserrat';

  font-size:
    clamp(
      30px,
      min(2.75vw,3.7vh),
      46px
    );

  font-weight:800;

  line-height:1.02;
}


.system-heading p{
  margin:
    12px
    0
    0;

  color:#514748;

  font-size:
    clamp(
      12px,
      min(1.12vw,1.65vh),
      18px
    );
}


/* =========================================================
   SLOGAN
========================================================= */

.slogan{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:15px;

  margin-top:18px;

  color:#df111d;

  font-size:
    clamp(
      17px,
      min(1.55vw,2.15vh),
      25px
    );

  font-weight:700;

  font-style:italic;

  white-space:nowrap;
}


.slogan i{
  width:
    clamp(
      34px,
      3.2vw,
      52px
    );

  height:2px;

  background:var(--gold);
}


.hero-spacer{
  flex:1;

  min-height:20px;
}


/* =========================================================
   SYSTEM CARDS
========================================================= */

.system-cards{
  position:relative;

  z-index:34;

  display:grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    clamp(
      10px,
      1vw,
      16px
    );

  width:
    min(
      96%,
      950px
    );

  margin:
    0
    auto
    16px;
}


.system-card{
  display:flex;

  align-items:center;

  gap:10px;

  min-height:
    clamp(
      66px,
      7.8vh,
      84px
    );

  padding:
    10px
    12px;

  border:
    1px
    solid
    rgba(203,153,42,.48);

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.93),
      rgba(255,246,218,.84)
    );

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 13px 29px
    rgba(72,0,6,.12),

    inset
    0 1px 0
    rgba(255,255,255,.96);
}


.system-card-icon{
  display:flex;

  align-items:center;

  justify-content:center;

  flex:
    0 0
    clamp(
      40px,
      3.3vw,
      52px
    );

  height:
    clamp(
      40px,
      3.3vw,
      52px
    );

  border-radius:12px;

  color:#8b060f;

  background:
    linear-gradient(
      145deg,
      #ffe596,
      #d49c25
    );

  box-shadow:
    0 6px 12px
    rgba(116,69,0,.13);
}


.system-card-icon svg{
  width:58%;
  height:58%;
}


.system-card-text{
  min-width:0;
}


.system-card strong{
  display:block;

  color:#8d0710;

  font-size:
    clamp(
      10px,
      .88vw,
      14px
    );

  white-space:nowrap;
}


.system-card span{
  display:block;

  margin-top:2px;

  overflow:hidden;

  color:#6c6061;

  font-family:'Montserrat';

  font-size:
    clamp(
      6px,
      .50vw,
      8px
    );

  white-space:nowrap;

  text-overflow:ellipsis;
}


/* =========================================================
   WAVES
========================================================= */

.gold-wave{
  position:absolute;

  z-index:20;

  left:-8%;

  bottom:8.2%;

  width:116%;

  height:10%;

  border-radius:
    50%
    50%
    0
    0;

  background:
    linear-gradient(
      90deg,
      #c7840b 0%,
      #ffe792 43%,
      #d39b23 65%,
      #b86f08 100%
    );

  transform:
    rotate(.8deg);
}


.red-wave{
  position:absolute;

  z-index:21;

  left:-9%;

  bottom:6%;

  width:118%;

  height:12.5%;

  border-radius:
    50%
    50%
    0
    0;

  background:
    linear-gradient(
      90deg,
      #730409,
      #cf111d 46%,
      #9b0710 72%,
      #620307
    );

  transform:
    rotate(-.6deg);

  box-shadow:
    0 -8px 25px
    rgba(95,0,7,.13);
}


/* =========================================================
   BOTTOM FEATURE BAR
========================================================= */

.feature-bar{
  position:absolute;

  z-index:30;

  left:0;
  right:0;

  bottom:0;

  height:12%;

  min-height:78px;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr
    auto
    1fr
    auto
    1fr;

  align-items:center;

  padding:
    8px
    clamp(
      30px,
      3vw,
      52px
    );

  border-top:
    3px
    solid
    var(--gold2);

  color:white;

  background:
    linear-gradient(
      90deg,
      #720409,
      #bb0f19 50%,
      #660307
    );

  box-shadow:
    0 -10px 25px
    rgba(77,0,6,.12);
}


.feature{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:11px;
}


.feature > svg{
  width:
    clamp(
      28px,
      min(3vw,4.5vh),
      45px
    );

  height:
    clamp(
      28px,
      min(3vw,4.5vh),
      45px
    );

  stroke:var(--gold-light);
}


.feature b{
  display:block;

  font-size:
    clamp(
      9px,
      min(.88vw,1.38vh),
      14px
    );
}


.feature span{
  display:block;

  color:#ffe2e4;

  font-size:
    clamp(
      7px,
      min(.68vw,1.05vh),
      11px
    );
}


.feature-divider{
  width:1px;

  height:42px;

  background:
    rgba(255,255,255,.22);
}


/* =========================================================
   RIGHT LOGIN PANEL
========================================================= */

.login-panel{
  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  min-width:0;

  min-height:0;

  height:100%;

  overflow:hidden;

  padding:
    20px
    clamp(
      20px,
      2.4vw,
      42px
    )
    84px;

  background:
    radial-gradient(
      circle at 91% 10%,
      rgba(223,38,49,.58),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #550307,
      #90070f 43%,
      #bd101a
    );
}


.login-grid{
  position:absolute;

  inset:0;

  opacity:.04;

  background-image:
    linear-gradient(
      rgba(255,255,255,.35) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.35) 1px,
      transparent 1px
    );

  background-size:
    38px
    38px;
}


.gold-stripe{
  position:absolute;

  top:-22%;

  height:150%;

  pointer-events:none;

  transform:
    rotate(-29deg);
}


.stripe-a{
  left:6%;

  width:10px;

  background:
    linear-gradient(
      transparent,
      var(--gold-light),
      var(--gold),
      var(--gold-light),
      transparent
    );
}


.stripe-b{
  left:10%;

  width:2px;

  opacity:.6;

  background:
    linear-gradient(
      transparent,
      var(--gold-light),
      transparent
    );
}


.login-ring{
  position:absolute;

  border:
    2px
    solid
    rgba(241,194,64,.27);

  border-radius:50%;
}


.ring-a{
  width:480px;

  height:480px;

  right:-320px;

  top:-275px;
}


.ring-b{
  width:500px;

  height:500px;

  left:-370px;

  bottom:-345px;
}


/* =========================================================
   QUOTE
========================================================= */

.quote{
  position:relative;

  z-index:5;

  display:flex;

  align-items:center;

  gap:9px;

  margin-bottom:18px;

  color:#fff4da;

  text-align:center;

  font-size:
    clamp(
      15px,
      min(1.25vw,1.9vh),
      21px
    );

  font-weight:600;

  line-height:1.4;
}


.quote b{
  color:var(--gold-light);

  font-family:Georgia,serif;

  font-size:
    clamp(
      34px,
      2.8vw,
      46px
    );

  line-height:1;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card{
  position:relative;

  z-index:10;

  width:
    min(
      100%,
      520px
    );

  overflow:hidden;

  border:
    2px
    solid
    var(--gold-light);

  border-radius:25px;

  background:
    rgba(255,255,255,.985);

  box-shadow:
    0 27px 70px
    rgba(42,0,4,.35);
}


.login-header{
  display:flex;

  align-items:center;

  gap:16px;

  padding:
    clamp(
      16px,
      2.1vh,
      23px
    )
    27px;

  color:white;

  background:
    linear-gradient(
      105deg,
      #89060e,
      #bc0f19
    );
}


.login-icon{
  display:flex;

  align-items:center;

  justify-content:center;

  flex:
    0 0
    clamp(
      51px,
      3.8vw,
      64px
    );

  height:
    clamp(
      51px,
      3.8vw,
      64px
    );

  border-radius:50%;

  color:#84151c;

  background:
    linear-gradient(
      135deg,
      #f8df88,
      #d4a128
    );
}


.login-icon svg{
  width:55%;
  height:55%;
}


.login-header h2{
  margin:0;

  font-size:
    clamp(
      22px,
      1.85vw,
      29px
    );

  line-height:1.1;
}


.login-header p{
  margin:
    5px
    0
    0;

  color:#f6dade;

  font-family:'Montserrat';

  font-size:
    clamp(
      7px,
      .66vw,
      10px
    );
}


.login-body{
  padding:
    clamp(
      18px,
      2.5vh,
      27px
    )
    29px
    clamp(
      17px,
      2.2vh,
      25px
    );
}


/* LOGIN MESSAGE */

.login-message{
  display:none;

  margin-bottom:11px;

  padding:
    8px
    12px;

  border-radius:9px;

  font-size:11px;
}


.login-message.error{
  display:block;

  color:#a20d16;

  background:#fff0f1;

  border:
    1px
    solid
    #efc1c4;
}


.login-message.success{
  display:block;

  color:#17633c;

  background:#effaf3;

  border:
    1px
    solid
    #b9dfc6;
}


/* =========================================================
   INPUT
========================================================= */

.form-control{
  position:relative;

  display:flex;

  align-items:center;

  width:100%;

  height:
    clamp(
      48px,
      min(4vw,5.9vh),
      59px
    );

  margin-bottom:14px;

  overflow:hidden;

  border:
    1px
    solid
    #ddd5d5;

  border-radius:999px;

  background:white;

  transition:.18s ease;
}


.form-control:focus-within{
  border-color:#d01b26;

  box-shadow:
    0 0 0 4px
    rgba(209,16,26,.07);
}


.field-icon{
  display:flex;

  align-items:center;

  justify-content:center;

  flex:
    0 0
    50px;

  color:#aaa2a2;
}


.field-icon svg{
  width:20px;

  height:20px;
}


.form-control input{
  flex:1;

  min-width:0;

  height:100%;

  padding:0;

  border:0;

  outline:0;

  color:#493f40;

  background:transparent;

  font-size:14px;
}


.form-control input::placeholder{
  color:#aaa2a2;
}


.show-password{
  display:flex;

  align-items:center;

  justify-content:center;

  flex:
    0 0
    51px;

  height:100%;

  border:0;

  color:#999191;

  background:transparent;

  cursor:pointer;
}


.show-password svg{
  width:21px;

  height:21px;
}


/* =========================================================
   OPTIONS
========================================================= */

.form-options{
  display:flex;

  align-items:center;

  justify-content:space-between;

  margin:
    3px
    4px
    clamp(
      13px,
      1.8vh,
      19px
    );
}


.remember{
  position:relative;

  display:flex;

  align-items:center;

  gap:8px;

  color:#65595a;

  cursor:pointer;
}


.remember input{
  position:absolute;

  opacity:0;
}


.fake-check{
  position:relative;

  width:20px;

  height:20px;

  border:
    1.5px
    solid
    #a83d43;

  border-radius:4px;
}


.remember input:checked + .fake-check{
  background:var(--red);

  border-color:var(--red);
}


.remember input:checked + .fake-check::after{
  content:'✓';

  position:absolute;

  left:4px;

  top:-3px;

  color:white;

  font-weight:800;
}


.remember em{
  font-style:normal;

  font-size:12px;
}


.forgot{
  padding:0;

  border:0;

  color:#1774cb;

  background:transparent;

  font-size:12px;

  text-decoration:underline;

  cursor:pointer;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-action{
  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  height:
    clamp(
      49px,
      min(4.1vw,6.1vh),
      61px
    );

  border:0;

  border-radius:999px;

  color:white;

  background:
    linear-gradient(
      90deg,
      #b70c16,
      #dd111e
    );

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  box-shadow:
    0 10px 22px
    rgba(181,12,22,.24);

  transition:.16s ease;
}


.login-action:hover{
  transform:
    translateY(-1px);

  filter:
    brightness(1.04);
}


.login-action:disabled{
  cursor:wait;

  opacity:.85;
}


.login-action-content{
  display:flex;

  align-items:center;

  gap:9px;
}


.login-action-content svg{
  width:21px;

  height:21px;
}


.button-spinner{
  display:none;

  width:23px;

  height:23px;

  border:
    3px
    solid
    rgba(255,255,255,.35);

  border-top-color:white;

  border-radius:50%;

  animation:
    spin
    .7s
    linear
    infinite;
}


@keyframes spin{

  to{
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   OR
========================================================= */

.or{
  display:flex;

  align-items:center;

  gap:12px;

  margin:
    clamp(
      11px,
      1.7vh,
      18px
    )
    0;

  color:#978b8c;
}


.or span{
  flex:1;

  height:1px;

  background:#e9dede;
}


.or b{
  font-size:11px;

  font-weight:400;
}


/* =========================================================
   REGISTER
========================================================= */

.register-action{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  width:100%;

  height:
    clamp(
      45px,
      min(3.8vw,5.5vh),
      55px
    );

  border:
    1.4px
    solid
    #d26269;

  border-radius:999px;

  color:#ba0e18;

  background:white;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  transition:.16s ease;
}


.register-action:hover{
  color:white;

  background:#b90c16;
}


.register-action svg{
  width:21px;

  height:21px;
}


.register-note{
  margin-top:11px;

  color:#928586;

  text-align:center;

  font-size:9px;

  line-height:1.5;
}


.register-note strong{
  display:block;

  color:#be121c;

  font-weight:500;
}


/* =========================================================
   LOGIN FOOTER
========================================================= */

.login-footer{
  position:relative;

  z-index:5;

  display:flex;

  flex-direction:column;

  align-items:center;

  margin-top:
    clamp(
      10px,
      1.8vh,
      19px
    );

  color:#efcc6c;

  transform:
    rotate(-5deg);
}


.login-footer b{
  font-family:Georgia,serif;

  font-size:21px;

  font-style:italic;
}


.login-footer span{
  font-family:Georgia,serif;

  font-size:14px;

  font-style:italic;
}


/* =========================================================
   DEVELOPER CREDIT
========================================================= */

.developer-credit{
  position:absolute;

  z-index:80;

  left:50%;

  bottom:15px;

  transform:
    translateX(-50%);

  width:max-content;

  max-width:90%;

  padding:
    7px
    18px;

  border-radius:7px;

  text-align:center;

  background:
    rgba(83,0,7,.55);

  backdrop-filter:
    blur(8px);

  box-shadow:
    0 6px 18px
    rgba(50,0,4,.14);

  font-family:'Montserrat',sans-serif;

  line-height:1.15;
}


.developer-credit > div{
  display:flex;

  align-items:baseline;

  justify-content:center;

  gap:8px;
}


.developer-label{
  color:#f7ce69;

  font-size:
    clamp(
      7px,
      .55vw,
      10px
    );

  font-weight:900;

  letter-spacing:1.5px;
}


.developer-credit strong{
  color:#fff;

  font-size:
    clamp(
      8px,
      .65vw,
      11px
    );

  font-weight:700;
}


.developer-college{
  display:block;

  margin-top:4px;

  color:
    rgba(255,255,255,.82);

  font-size:
    clamp(
      6px,
      .52vw,
      9px
    );

  font-weight:500;
}


/* =========================================================
   OVERLAYS
========================================================= */

.loading-overlay,
.modal-overlay{
  position:fixed;

  z-index:10000;

  inset:0;

  display:none;

  align-items:center;

  justify-content:center;

  background:
    rgba(55,0,5,.57);

  backdrop-filter:
    blur(6px);
}


.loading-overlay.show,
.modal-overlay.show{
  display:flex;
}


.loading-box{
  display:flex;

  align-items:center;

  gap:14px;

  padding:
    18px
    24px;

  border:
    2px
    solid
    var(--gold);

  border-radius:16px;

  color:var(--red-dark);

  background:white;
}


.main-spinner{
  width:30px;

  height:30px;

  border:
    4px
    solid
    #efdada;

  border-top-color:
    var(--red);

  border-radius:50%;

  animation:
    spin
    .7s
    linear
    infinite;
}


.loading-box b,
.loading-box span{
  display:block;
}


.loading-box span{
  color:#8b7d7e;

  font-size:11px;
}


/* =========================================================
   MODAL
========================================================= */

.modal-overlay{
  z-index:11000;
}


.modal{
  position:relative;

  width:
    min(
      430px,
      calc(100vw - 30px)
    );

  padding:
    34px
    29px
    26px;

  text-align:center;

  border:
    2px
    solid
    var(--gold);

  border-radius:21px;

  background:white;

  box-shadow:
    0 26px 70px
    rgba(0,0,0,.25);
}


.modal-close{
  position:absolute;

  right:11px;

  top:7px;

  border:0;

  color:#9b8c8d;

  background:transparent;

  font-size:28px;

  cursor:pointer;
}


.modal-icon{
  display:flex;

  align-items:center;

  justify-content:center;

  width:68px;

  height:68px;

  margin:
    0
    auto
    13px;

  color:var(--red);

  border-radius:50%;

  background:#fff0df;

  font-size:29px;

  font-weight:800;
}


.modal h3{
  color:var(--red-dark);
}


.modal-text{
  color:#77696a;

  font-size:13px;

  line-height:1.75;
}


.modal-ok{
  min-width:130px;

  min-height:42px;

  margin-top:18px;

  border:0;

  border-radius:11px;

  color:white;

  background:var(--red);

  cursor:pointer;
}


 @media
(max-height:850px)
and
(min-width:901px){

  .visual-content{
    padding-top:10px;
    padding-bottom:30px;
  }

  .brand-section{
    transform:translateY(6px);
  }

  .brand-row{
    min-height:22vh;
  }

  .crest-box{
    flex-basis:min(14vw,22vh);
    height:min(14vw,22vh);
  }

  .brand-divider{
    height:16vh;
  }

  .wordmark-logo{
    font-size:min(8vw,12vh);
  }

  .wordmark-en{
    font-size:min(1.55vw,2.25vh);
  }

  .wordmark-th{
    font-size:min(1.05vw,1.55vh);
  }

  .system-heading{
    transform:translateY(92px);
  }

  .system-heading h1{
  font-size:min(5.6vw,7.5vh) !important;
}

.system-heading h2{
  font-size:min(2.95vw,3.9vh) !important;
}

.system-heading p{
  font-size:min(1.25vw,1.7vh) !important;
}

.slogan{
  margin-top:11px !important;
  font-size:min(1.6vw,2.15vh) !important;
}

  .hero-spacer{
    min-height:15px;
  }

  .system-card{
    min-height:60px;
    padding:7px 9px;
  }

  .login-panel{
    padding-bottom:76px;
  }

  .quote{
    margin-bottom:10px;
  }

  .login-header{
    padding-top:15px;
    padding-bottom:15px;
  }

  .login-body{
    padding-top:17px;
    padding-bottom:15px;
  }

  .form-control{
    height:48px;
  }

  .login-action{
    height:49px;
  }

  .register-action{
    height:45px;
  }

  .or{
    margin:10px 0;
  }

  .login-footer{
    margin-top:8px;
  }

  .developer-credit{
    bottom:12px;
  }
}


  /*
    เดิม 44px
    ปรับเป็น 76px
    เพื่อให้ข้อความลงต่ำกว่าเดิม
  */

  .system-heading{
    transform:
      translateY(76px);
  }


  .system-heading h1{
    font-size:
      min(
        5.1vw,
        6.7vh
      );
  }


  .system-heading h2{
    font-size:
      min(
        2.45vw,
        3.3vh
      );
  }


  .system-heading p{
    margin-top:7px;
  }


  .slogan{
    margin-top:12px;

    font-size:
      min(
        1.4vw,
        1.95vh
      );
  }


  .hero-spacer{
    min-height:15px;
  }


  .system-card{
    min-height:60px;

    padding:
      7px
      9px;
  }


  .login-panel{
    padding-bottom:76px;
  }


  .quote{
    margin-bottom:10px;
  }


  .login-header{
    padding-top:15px;

    padding-bottom:15px;
  }


  .login-body{
    padding-top:17px;

    padding-bottom:15px;
  }


  .form-control{
    height:48px;
  }


  .login-action{
    height:49px;
  }


  .register-action{
    height:45px;
  }


  .or{
    margin:
      10px
      0;
  }


  .login-footer{
    margin-top:8px;
  }


  .developer-credit{
    bottom:12px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  body{
    overflow:auto;

    background:#76050c;
  }


  .app-shell{
    display:block;

    width:100%;

    height:auto;

    overflow:visible;
  }


  .visual-panel{
    height:820px;
  }


  .login-panel{
    min-height:720px;
  }


  .system-cards{
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

  .visual-panel{
    height:760px;
  }


  .left-ribbon{
    width:64px;

    height:50%;
  }


  .ribbon-watermark strong{
    font-size:38px;
  }


  .ribbon-watermark span{
    font-size:7px;

    letter-spacing:1.8px;
  }


  .visual-content{
    height:86%;

    padding:
      12px
      12px
      28px
      68px;
  }


  .brand-section{
    transform:
      translateY(8px);
  }


  .brand-row{
    min-height:110px;

    justify-content:flex-start;
  }


  .crest-box{
    flex-basis:78px;

    height:78px;
  }


  .brand-divider{
    height:70px;

    margin:
      0
      8px;
  }


  .wordmark-logo{
    font-size:38px;

    letter-spacing:-2px;
  }


  .wordmark-en{
    margin-top:4px;

    font-size:6.5px;
  }


  .wordmark-th{
    font-size:5.8px;
  }


  .system-heading{
    transform:
      translateY(22px);
  }


  .system-heading h1{
    font-size:34px;
  }


  .system-heading h2{
    font-size:16px;
  }


  .system-heading p{
    font-size:8px;
  }


  .slogan{
    gap:6px;

    margin-top:8px;

    font-size:8.5px;

    white-space:normal;
  }


  .slogan i{
    display:none;
  }


  .hero-spacer{
    min-height:12px;
  }


  .system-cards{
    width:96%;

    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:6px;
  }


  .system-card{
    min-height:49px;

    padding:5px;

    border-radius:10px;
  }


  .system-card-icon{
    flex-basis:30px;

    height:30px;

    border-radius:8px;
  }


  .system-card strong{
    font-size:7.5px;
  }


  .system-card span{
    font-size:4.8px;
  }


  .feature-bar{
    height:14%;

    min-height:95px;

    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:4px;

    padding:
      5px
      8px;
  }


  .feature-divider{
    display:none;
  }


  .feature{
    justify-content:flex-start;
  }


  .feature > svg{
    width:24px;

    height:24px;
  }


  .feature b{
    font-size:8px;
  }


  .feature span{
    font-size:6px;
  }


  .gold-wave{
    bottom:11.5%;
  }


  .red-wave{
    bottom:9.5%;
  }


  .developer-credit{
    width:88%;

    max-width:88%;

    bottom:9px;

    padding:
      6px
      8px;

    white-space:normal;
  }


  .developer-credit > div{
    flex-wrap:wrap;

    gap:5px;
  }

}


/* =========================================================
   SSVIT BEAUTIFUL POPUP
========================================================= */

.ssvit-popup-overlay{
  position:fixed;

  inset:0;

  z-index:99999;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:24px;

  background:
    rgba(40,0,0,.62);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  animation:
    ssvitPopupFade
    .18s
    ease;
}


.ssvit-popup-overlay[hidden]{
  display:none !important;
}


.ssvit-popup-card{
  width:
    min(
      430px,
      100%
    );

  background:#ffffff;

  border:
    2px
    solid
    #d8a936;

  border-radius:24px;

  padding:
    32px
    30px
    28px;

  text-align:center;

  box-shadow:
    0 30px 90px
    rgba(60,0,0,.35);

  animation:
    ssvitPopupOpen
    .22s
    ease;
}


.ssvit-popup-icon{
  width:72px;

  height:72px;

  margin:
    0
    auto
    18px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  font-size:35px;

  font-weight:900;

  background:#fff1f1;

  color:#b4000d;

  border:
    1px
    solid
    #ffd0d0;
}


.ssvit-popup-icon.success{
  background:#ecfff1;

  color:#17823b;

  border-color:#bceac9;
}


.ssvit-popup-icon.info{
  background:#fff7df;

  color:#9a6800;

  border-color:#f0d084;
}


.ssvit-popup-card h3{
  margin:
    0
    0
    12px;

  color:#990008;

  font-size:22px;

  font-weight:800;
}


.ssvit-popup-message{
  color:#555;

  font-size:15px;

  line-height:1.7;

  white-space:pre-line;

  margin-bottom:24px;
}


.ssvit-popup-ok{
  min-width:140px;

  border:0;

  border-radius:12px;

  padding:
    12px
    28px;

  background:
    linear-gradient(
      135deg,
      #980008,
      #d3111d
    );

  color:#fff;

  font-weight:800;

  font-size:15px;

  cursor:pointer;

  box-shadow:
    0 8px 20px
    rgba(160,0,10,.25);

  transition:.18s;
}


.ssvit-popup-ok:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 11px 25px
    rgba(160,0,10,.32);
}


@keyframes ssvitPopupFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}


@keyframes ssvitPopupOpen{

  from{
    opacity:0;

    transform:
      translateY(12px)
      scale(.96);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}

/* =========================================================
   BRAND AREA - ENLARGED
========================================================= */

.brand-section{
  width:100%;
  transform:translateY(8px);
}

.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(220px,28vh,320px);
}

.crest-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 clamp(200px,16vw,290px);
  height:clamp(200px,16vw,290px);
}

.crest-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    contrast(1.05)
    saturate(1.08)
    drop-shadow(0 7px 12px rgba(67,27,0,.12));
}

.brand-divider{
  width:2px;
  height:clamp(150px,19vh,210px);
  margin:0 clamp(24px,2vw,36px);
  background:linear-gradient(
    transparent,
    #77392e 16%,
    #77392e 84%,
    transparent
  );
}

.wordmark{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.wordmark-logo{
  color:#e4101b;
  font-family:'Montserrat';
  font-size:clamp(100px,8.2vw,155px);
  font-weight:900;
  font-style:italic;
  line-height:.8;
  letter-spacing:-6px;
}

.wordmark-en{
  margin-top:14px;
  color:#282123;
  font-family:'Montserrat';
  font-size:clamp(20px,1.75vw,30px);
  font-weight:700;
  line-height:1.05;
}

.wordmark-en strong{
  color:#dc111c;
}

.wordmark-th{
  margin-top:10px;
  color:#655b5c;
  font-size:clamp(15px,1.15vw,21px);
}


.system-heading{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  text-align:center;

  /* ขยับขึ้นจากเดิม */
  transform:translateY(58px);
}

.system-heading h1{
  margin:0;
  color:#85060d;

  /* ลดขนาดลง */
  font-size:clamp(58px,5.2vw,90px);

  font-weight:800;
  line-height:.95;
  letter-spacing:-2px;

  text-shadow:
    0 2px 0 rgba(255,255,255,.35),
    0 8px 18px rgba(77,0,6,.05);
}

.system-heading h2{
  margin:8px 0 0;
  color:#171314;
  font-family:'Montserrat',sans-serif;

  /* ลดขนาดภาษาอังกฤษ */
  font-size:clamp(28px,2.55vw,43px);

  font-weight:800;
  line-height:1;
}

.system-heading p{
  margin:8px 0 0;
  color:#514748;

  font-size:clamp(11px,1vw,16px);
}

.slogan{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:13px;

  /* ลดระยะด้านบน */
  margin-top:12px;

  color:#df111d;

  /* ลดขนาดลงเล็กน้อย */
  font-size:clamp(15px,1.35vw,22px);

  font-weight:700;
  font-style:italic;
  white-space:nowrap;
}

.slogan i{
  width:clamp(32px,3vw,48px);
  height:2px;
  background:var(--gold);
}

/* =========================================================
   FIX DESKTOP / NOTEBOOK
   ลดหัวข้อ + ยกกล่องสีเหลืองขึ้น
========================================================= */

@media (max-height:850px) and (min-width:901px){

  .system-heading{
    transform:translateY(38px) !important;
  }

  .system-heading h1{
    font-size:min(4.55vw,6.1vh) !important;
    line-height:.94 !important;
  }

  .system-heading h2{
    margin-top:7px !important;
    font-size:min(2.2vw,2.9vh) !important;
  }

  .system-heading p{
    margin-top:6px !important;
    font-size:min(1.15vw,1.55vh) !important;
  }

  .slogan{
    margin-top:9px !important;
    font-size:min(1.2vw,1.65vh) !important;
  }

  .hero-spacer{
    min-height:0 !important;
  }

  /* ยกกล่องสีเหลือง 4 กล่องขึ้น */
  .system-cards{
    transform:translateY(-20px) !important;
  }

}

/* =========================================================
   FINAL DESKTOP TITLE SIZE OVERRIDE
   ขยายหัวข้อฝั่งซ้าย
========================================================= */

@media (min-width:901px){

  .system-heading h1{
    font-size:clamp(68px,6.2vw,110px) !important;
    line-height:.92 !important;
    letter-spacing:-2.5px !important;
  }

  .system-heading h2{
    font-size:clamp(32px,3.15vw,54px) !important;
    line-height:1 !important;
    margin-top:9px !important;
  }

  .system-heading p{
    font-size:clamp(14px,1.25vw,20px) !important;
    margin-top:9px !important;
  }

  .slogan{
    font-size:clamp(18px,1.65vw,27px) !important;
    margin-top:13px !important;
    gap:15px !important;
  }

  .slogan i{
    width:clamp(40px,3.5vw,60px) !important;
  }

  /* ช่วยยกกล่อง 4 กล่องขึ้น ไม่ให้ตกขอบ */
  .system-cards{
    transform:translateY(-28px) !important;
  }

}

/* ซ่อนชื่อสถาบัน + slogan สีแดง */
.system-heading p,
.slogan{
  display:none !important;
}