@tailwind base;
@tailwind components;
@tailwind utilities;


/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraBGwCYdA.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraaGwCYdA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcrabGwCYdA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraVGwA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5mOBWzVaF5NQ.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5mOBWoVaF5NQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5mOBWpVaF5NQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5mOBWnVaE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWzVaF5NQ.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWoVaF5NQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWpVaF5NQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWnVaE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
  width: 100%;
  overflow-x: hidden; /* ป้องกันการลากในแนวนอน */
}

body {
      font-family: 'Kanit', sans-serif;
    }

    /* ===== Sidebar ===== */
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #2f3640;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 20px;
      color: #818181;
      display: block;
      transition: 0.3s;
      border-radius: 8px;
    }

    .sidenav a:hover {
      color: #fff;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    #main {
      transition: margin-left .5s;
      padding: 16px;
    }

    .dropdown-btn {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 20px;
      color: #818181;
      display: block;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      outline: none;
    }

    .dropdown-container {
      display: none;
      background-color: #262626;
      padding-left: 8px;
    }

    .fa-caret-down {
      float: right;
      padding-right: 8px;
    }

    .major-link {
      display: block;
      color: #fff;
      padding: 8px 16px;
      text-decoration: none;
    }

    .major-link.active {
      background-color: #007bff;
      color: #fff;
    }

    /* ===== Overlay ===== */
    .overlay {
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 0;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.7);
      display: none;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .overlay.active {
      opacity: 1;
    }

    .sidenav-content {
      background-color: #2f3640;
      color: #fff;
      padding: 20px;
    }

    .dropdown-btn:hover {
      color: #fff;
    }

    /* ===== Hamburger Icon ===== */
    #hamburger {
      font-size: 24px;
      cursor: pointer;
      border: 1px solid #ccc;
      border-radius: 50%;
      padding: 10px 15px;
      color: #fff;
      background: #007bff;
      display: inline-block;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    #hamburger:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    }

    .sidenav .dropdown-btn,
    .sidenav .dropdown-container a {
      color: #fff;
    }

    /* ===== Responsive ===== */
    @media screen and (max-width: 1024px) {
      #hamburger {
        font-size: 16px;
        padding: 8px 12px;
      }

      .dropdown-btn {
        font-size: 15px;
      }

      .dropdown-container a {
        font-size: 14px;
      }
    }

    .major-detail {
      display: none;
      margin: 8px 0 8px 15px;
      padding-left: 50px;
      color: #ccc;
      font-size: 14px;
      list-style: disc;
    }

    .major-detail li {
      margin-bottom: 5px;
    }

    .major-link.active+.major-detail {
      display: block;
    }

    .major-detail-tnic {
      display: none;
      margin: 8px 0 8px 15px;
      padding-left: 50px;
      color: #ccc;
      font-size: 17px;
      list-style: disc;
    }

    .major-detail-tnic li {
      margin-bottom: 5px;
      margin-right: 10px;
    }

    .major-link.active+.major-detail-tnic {
      display: block;
    }

    .notification {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 25px;
      border-radius: 8px;
      color: white;
      font-weight: bold;
      z-index: 10000;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    .notification.success {
      background-color: #28a745;
    }

    .notification.error {
      background-color: #dc3545;
    }

    .major-tnic {
      display: block;
      color: #fff;
      padding: 8px 16px;
      text-decoration: none;
      font-size: 18px;
    }

    .major-tnic.active+.major-detail {
      display: block;
    }
 
    .extra-detail {
      display: none;
      margin: 6px 0 6px 25px;
      /* เว้นระยะซ้ายเพิ่ม */
      padding-left: 20px;
      color: #bbb;
      font-size: 13px;
      list-style: circle;
    }

    .extra-dropdown-btn {
      margin-top: 6px;
      padding: 4px 8px;
      font-size: 16px;
      color: #ccc;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }

    .extra-dropdown-btn:hover {
      color: #fff;
    }

    h1 {
      color: #210f90;
      font-weight: bolder;
    }

    body {
      font-family: 'Kanit', sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
    }

    .container-fluid {
      background-color: #ffffff;
      padding: 40px;
      border-radius: 12px;
      width: 100%;
      box-sizing: border-box;
    }

    h2 {
      color: #007bff;
      text-align: center;
      margin-bottom: 30px;
      font-weight: 700;
    }

    .form-group label {
      margin-bottom: 8px;
      display: block;
    }

    .lm label {
      margin-left: 80px;
    }

    label {
      font-size: 18px;
      font-weight: 200px;
      color: white;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .form-control,
    .form-select {
      border-radius: 8px;
      border: 1px solid #ced4da;
      padding: 12px 15px;
      margin-bottom: 15px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
      width: 70%;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: #80bdff;
      box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
      outline: none;
    }

    .btn-primary {
      background-color: #007bff;
      border-color: #007bff;
      padding: 12px 25px;
      border-radius: 8px;
      font-size: 1.1rem;
      font-weight: 600;
      transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
      display: block;
      width: 30%;
      margin-top: 20px;
    }

    .btn-primary:hover {
      background-color: #0056b3;
      border-color: #0056b3;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    }

    .form-row {
      display: flex;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
      justify-content: space-between;
    }

    .form-row>.col-md-6 {
      padding-right: 15px;
      padding-left: 15px;
      flex: 0 0 50%;
      max-width: 50%;
    }

    .form-group input {
      width: 80%;
      margin: auto;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
      width: 70%;
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 15px;
      appearance: none;
      background-color: white;
    }

    .dropdown-submenu {
      position: relative;
    }

    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -0.5rem;
    }

    .inher {
      width: 80%;
      height: 65px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
      margin-bottom: 0px;
      appearance: none;
      background-color: white;
      font-size: 16px !important;
      white-space: normal;
      overflow-wrap: break-word;
    }

    .valid {
      color: rgb(186, 255, 186);
      font-size: 0.9em;
      margin-left: 5px;
    }

    .invalid {
      color: rgb(255, 155, 155);
      font-size: 0.9em;
      margin-left: 5px;
    }

    .custom-dropdown-list {
      border: 1px solid #ccc;
      max-height: 200px;
      overflow-y: auto;
      background: #fff;
      z-index: 1000;
    }

    .dropdown-item {
      padding: 8px 12px;
      cursor: pointer;
    }

    .dropdown-item:hover {
      background: #f1f1f1;
      
    }

    span#fname-msg,
    span#lname-msg {
      display: inline;
    }

    .form-control {
      width: 70% !important;
      margin: auto;
    }

    .form-group-flex {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .sakura-gradient {
      background: linear-gradient(135deg, #ffdee9, #b5889e);
    }

    .sakura {
        display: inline-block;

        animation: bounceRotate 3s ease-in-out infinite;
        /* เพิ่ม effect เงาเบาๆ */
        text-shadow: 0 0 20px rgba(211, 116, 255, 0.6);
      }

      /* keyframes */
      @keyframes bounceRotate {
        0% {
          transform: translateY(0) rotate(0deg);
        }

        25% {
          transform: translateY(-5px) rotate(-5deg);
        }

        50% {
          transform: translateY(0) rotate(10deg);
        }

        75% {
          transform: translateY(-6px) rotate(-5deg);
        }

        100% {
          transform: translateY(0) rotate(0deg);
        }
      }

      /* ===== Hamburger Sticky ===== */
    #hamburger {
      position: fixed;
      top: 15px;
      left: 15px;
      background-color: #210f90;
      color: white;
      padding: 10px 14px;
      font-size: 18px;
      cursor: pointer;
      z-index: 3000;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease-in-out;
    }

    #hamburger:hover {
      background-color: #0056b3;
    }

    #hamburger span {
      display: inline;
      font-weight: 500;
    }

    /* ===== Overlay ===== */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.45);
      z-index: 1400;
      display: none;
    }

    /* ===== ปิดการ Scroll ของ HTML หลักเมื่อ Sidebar เปิด ===== */
    body.body-no-scroll {
      overflow: hidden;
      height: 100vh;
    }

    /* ===== Sidebar ===== */
    .sidenav {
      height: 100%;
      width: 0;
      /* ปิดเริ่มต้น */
      position: fixed;
      z-index: 2000;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 100vh;
      transition: width 0.3s ease-in-out;
      padding-top: 60px;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 30px;
      color: white;
      cursor: pointer;
      transition: color 0.3s ease-in-out;
    }

    .sidenav .closebtn:hover {
      color: #ff5c5c;
    }

    /* ===== Dropdown Buttons ===== */
    .dropdown-btn {
      padding: 12px 20px;
      text-align: left;
      font-size: 18px;
      color: #f1f1f1;
      background: none;
      border: none;
      outline: none;
      width: 100%;
      cursor: pointer;
      transition: background 0.3s, color 0.3s;
    }

    .dropdown-btn:hover {
      color: #00cfff;
      background-color: #1a1a1a;
    }

    /* ===== Dropdown Container ===== */
    .dropdown-container {
      display: none;
      background-color: #262626;
      padding-left: 50px;
    }

    .dropdown-container a {
      display: block;
      padding: 8px 20px;
      font-size: 17px;
      color: #bfbfbf;
      text-decoration: none;
      transition: color 0.2s ease-in-out;
      margin-right: 20px;
    }

    .dropdown-container a:hover {
      color: #fff;
    }

    /* ===== สาขา (Major) ===== */
    .major-detail {
      display: none;
      margin: 8px 0 8px 15px;
      padding-left: 50px;
      color: #ccc;
      font-size: 15px;
      list-style: disc;
    }

    .major-detail li {
      margin-bottom: 5px;
      position: relative;
      margin-right: 10px;
      font-size: 16px;
    }

    .major-link.active+.major-detail {
      display: block;
    }

    /* ===== Dropdown ชั้นที่ 3 ===== */
    .sub-dropdown-btn {
      display: inline-block;
      margin-top: 5px;
      margin-left: 10px;
      background: none;
      border: none;
      color: #00cfff;
      font-size: 14px;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      transition: color 0.3s ease-in-out;
    }

    .sub-dropdown-btn:hover {
      color: #66d9ff;
    }

    .sub-dropdown-btn.active {
      font-weight: bold;
      color: #4CAF50;
    }

    .sub-detail {
      display: none;
      margin-top: 5px;
      margin-left: 25px;
      padding-left: 20px;
      list-style: circle;
      color: #bbb;
      font-size: 16px;
    }

    .sub-dropdown-btn-tnic {
      display: inline-block;
      margin-top: 5px;
      margin-left: 10px;
      background: none;
      border: none;
      color: #00cfff;
      font-size: 17px;
      cursor: pointer;
      text-decoration: none;
      padding: 0;
      transition: color 0.3s ease-in-out;
    }

    .sub-dropdown-btn-tnic:hover {
      color: #66d9ff;
    }

    .sub-dropdown-btn-tnic.active {
      font-weight: bold;
      color: #66d9ff;
    }

    /* ===== Responsive ===== */
    @media screen and (max-width: 1024px) {
      #hamburger {
        font-size: 16px;
        padding: 8px 12px;
      }

      .dropdown-btn {
        font-size: 15px;
      }

      .dropdown-container a {
        font-size: 14px;
      }

      .sub-dropdown-btn {
        font-size: 13px;
      }

      .sub-detail {
        font-size: 13px;
      }
    }

    @media screen and (max-device-width: 600px) and (orientation: portrait){
      #tnis2 {
        margin-top: -50px;
      }

      #tnis2t1{
        font-size: 20px !important;
      }

      #tnis2t2{
        font-size: 16px !important;
      }
    }

    .omg:hover {
      transform: translateY(-6px) scale(1.1);

    }

    .omg {
      transition: transform 0.3s ease-in-out;
    }

    .gap-3 {
      gap: 2rem !important;
    }

    @media (min-width: 768px) {
      .row-cols-md-5>* {
        flex: 0 0 auto;
        width: 30%;
      }
    }

    @media screen and (max-device-width: 600px) and (orientation: portrait) {

      .container.py-5 .img1 {
        height: au300to !important;
        width: 300px !important;
        text-align: left !important;
        padding-left: 0px !important;
        margin-left: 3% !important;
        margin-top: -10%;
      }
    }

    /* สำหรับมือถือ*/
    @media screen and (max-device-width: 600px) and (orientation: portrait) {

      /* .dropdown-submenu {
  position: relative;
} */

.dropdown-submenu .dropdown-menu {
  top: 100%;                   /* ให้เริ่มตรงด้านบนของ parent */
  /* right: -100%;               ชิดขวาของ parent */
  /* margin-left: -200;   */
  inset: 30px auto auto 0px !important;        
  /* transform: translateX(0); */
}


      #maptni,
      #iconadd {
        width: 100% !important;
      }

      #majorOptions {
        font-size: 14px !important;
        padding: 5px 10px !important;
        inset: 0px auto auto 0px !important;
      }

      #facultyOptions {
        white-space: normal;
        overflow-wrap: break-word;
        font-size: 14px !important;
        inset: 0px auto auto 0px !important;
        padding: 5px 10px !important;
      }

      .form-control {
        width: 85% !important;
        margin: auto;
      }

      #sub1 {
        inset: 0px auto auto 9px !important;
      }

      .inher {
        height: 80px !important;
      }

      .dropdown-menu {
        text-align: left;
        font-size: 14px;
      }

      .dropdown-menu span {
        padding-left: 10px;
      }

      .dropdown-item {
        padding: 0px;
        margin: 0px;
      }

      label {
        display: flex !important;
        /* ใช้ Flexbox เพื่อจัดเรียงในบรรทัดเดียวกัน */
        align-items: center;
        /* จัดให้อยู่กึ่งกลางในแนวตั้ง */
        font-size: 16px !important;
        margin-left: 40px !important;
        display: inline-block !important;
        white-space: nowrap;
      }

      label span {
        display: inline-block;
        /* ทำให้ span แสดงในบรรทัดเดียวกัน */
        margin-left: 5px;
        /* เพิ่มระยะห่างระหว่าง Label กับข้อความสถานะ */
      }

      span#fname-msg,
      span#lname-msg,
      span#email-msg,
      span#phone-msg,
      span#lineidMsg {
        display: inline-block !important;
        /* ยืนยันว่าอยู่ในบรรทัดเดียวกัน */
        font-size: 14px;
        white-space: nowrap;
        /* ป้องกันการขึ้นบรรทัดใหม่ */
      }

      #countryDropdown,
      #provinceDropdown {
        width: 200px !important;
        /* กำหนดความกว้าง 90% ของหน้าจอ */
        margin: 0px 60px;
        /* จัดกึ่งกลางในแนวนอน */
        text-align: center !important;
        /* จัดข้อความชิดซ้าย */
        font-size: 16px;
        /* ปรับขนาดฟอนต์ให้เหมาะสม */

      }

      #provinceInput,
      #lineid,
      #countryInput {
        width: 260px !important;
      }

      option {
        font-size: 12px !important;
      }

      select#country,
      select#province {
        font-size: 16px;
        text-align: center;
      }

      select#grade,
      select#title {
        font-size: 16x;
        text-align: center;
      }

      #b2 {
        width: 200px;
      }

      #bb2 {
        margin-left: 20px;
      }

      /* #b1 {
        margin-left: 70px;
      } */

      #hh1 {
        text-align: center;
      }

      h1 {
        font-size: 16px !important;
      }

      button {
        font-size: 13px !important;
      }

      h2 {
        font-size: 12px !important;
      }

      p {
        font-size: 12px !important;
      }

      #bll {
        width: 100%;
      }

      #dd2 {
        text-align: center !important;
        margin-left: 10px;
        width: 107%;
      }

      #logo {
        flex-direction: column;
        margin-top: 10%;
      }

      .img1 {
        height: auto !important;
        width: 200px !important;
        text-align: left !important;
        padding-left: 0px !important;
        
      }

      #head1 {
        width: 100% !important;
        margin-top: 15px;
      }

      #s1 {
        padding: 10px;
      }

      input[type="text"],
      input[type="email"],
      input[type="tel"],
      select {
        width: 260px;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-bottom: 15px;
        appearance: none;
        background-color: white;
        margin-left: 40px !important;
      }

      #grade,
      #country,
      #title,
      #province {
        width: 260px;
      }

      #blue-row {
        flex-direction: column;
      }

      #sc1 {
        padding-left: 0px !important;
        width: 100% !important;
        margin-top: 7px !important;
      }

      #blue-row {
        flex-direction: row !important;
      }

      #txt1b {
        padding-left: 40px;
      }

      #langThBtn,
      #langEnBtn {
        padding: 10px 10px !important;
      }
    }
    

    /* .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex
;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    flex-direction: column;
    align-items: center;
} */
/* @media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }
} */


    /* แท็บเล็ตแนวตั้งงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงง /////////////////////////////////////////////////////////////////////////////////////////*/
    @media screen and (min-device-width: 601px) and (max-device-width: 900px) and (orientation: portrait) {
      /* .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    } */

    .sub-detail {
        font-size: 18px;
    }

        .dropdown-container a {
        font-size: 18px;
    }
    .gap-3 {
    gap: 1rem !important;
}
    #fbfoot{
      font-size: 17px !important;
    }
      #foot1{
        margin-left: -30px;
      }
      /* .row2{
        flex-direction: column !important;
        align-items: center !important;
      } */
      /* #logo1{
        margin-left: 150px !important;
      } */
      h1 {
        font-size: 35px !important;
      }

      #bll{
        width: 100%;
        margin-left: 50px;
      }

      #hh1 {
        text-align: center;
      }

      /* #b1 {
        margin-left: 220px;
    } */

      button {
        font-size: 18px !important;
      }

      .container-fluid {
        margin-left: 30px;
      }

      h2 {
        font-size: 12px !important;
      }

      p {
        font-size: 20px !important;
      }

      label {
        font-size: 25px !important;
        margin-left: 65px !important;
      }

      .row {
        flex-direction: row !important;
      }

      .dropdown-menu {
        text-align: center;
        font-size: 20px;

      }

      .dropdown-submenu {
        text-align: center;
      }

      option {
        font-size: 12px !important;
      }

      select#country,
      select#province {
        font-size: 20px;
        text-align: center;
      }

      select#grade,
      select#title {
        font-size: 20x;
        text-align: center;
      }

      #bll {
        width: 100%;
      }

          #dd2 {
        text-align: left !important;
        margin-left: -40px;
        width: 100%;
    }

    .typing-text{
      font-size: 30px !important;
    }

      #logo {
        flex-direction: row;
      }

          .img1 {
        height: auto !important;
        width: 500px !important;
        text-align: center !important;
        padding-left: 0px !important;
        margin-left: 0px !important;
    }
      #head1 {
        width: 100% !important;
        margin-top: 15px;
      }

      #s1 {
        padding: 10px;
      }

      input[type="text"],
      input[type="email"],
      input[type="tel"],
      select {
        width: 580px;
        font-size: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-bottom: 20px;
        appearance: none;
        background-color: white;
        margin-left: 65px !important;
        text-align: center;
      }

      #grade,
      #country,
      #title,
      #province {
        width: 580px;
      }

      #blue-row {
        flex-direction: column;
      }

      #sc1 {
        padding-left: 0px !important;
        width: 100% !important;
        margin-top: 7px !important;
      }

      #blue-row {
        flex-direction: row !important;
      }

      #txt1b {
        padding-left: 80px;
      }

      #langThBtn,
      #langEnBtn {
        padding: 10px 10px !important;
      }

      .container-fluid {
        margin-left: 0px;
    }

    }

    @keyframes bounceFade {
      0% {
        transform: translateY(0);
        opacity: 0.6;
      }

      50% {
        transform: translateY(-10px);
        opacity: 1;
      }

      100% {
        transform: translateY(0);
        opacity: 0.6;
      }
    }

    .animate-text {
      animation: bounceFade 2s infinite;
    }


    .typing-text {
      font-size: 40px;
      font-weight: 700;
      overflow: hidden;
      white-space: nowrap;
      border-right: 0.15em solid orange;
      /* เริ่มต้นด้วย width เป็น 0 */
      width: 0;
    }

    /* Classes ที่จะถูกเพิ่มโดย AOS เมื่อเลื่อนไปถึง */
    .typing-text.aos-animate {
      animation: typing 3s steps(20, end) forwards, blink-caret 0.75s step-end infinite;
    }

    @keyframes typing {
      from {
        width: 0
      }

      to {
        width: 100%
      }
    }

    @keyframes blink-caret {

      from,
      to {
        border-color: transparent
      }

      50% {
        border-color: orange
      }
    }

    @media screen and (max-device-width: 600px) and (orientation: portrait){
    .typing-text{
      font-size: 18px !important;
    }
  }

  @media screen and (max-device-width: 600px) and (orientation: portrait){
    #msdgree{
      font-size: 30px !important;
    }
     #msdgree2{
      font-size: 16px !important;
    }
    #bttms{
      font-size: 18px !important;
      width: 200px !important;
    }

    .dropdown-container{
      padding-left: 15px;
    }

    .major-detail-tnic {
      font-size: 14px !important;
    }

    .major-detail li  {
      font-size: 14px !important;
    }

    .major-detail {
      margin: 6px 0 0px -30px;
    }
  }

  .fa {
          padding: 20px;
          font-size: 50px;
          width: 50px;
          text-align: center;
          text-decoration: none;
          margin: 5px 2px;
          border-radius: 50%;
        }

        a {
          text-decoration: none;
        }

        /* TikTok */
        .fa-tiktok {
          font-size: 40px;
          color: #000;
          text-shadow: -3px -1px 0 #25F4EE, 3px 1px 0 #FE2C55
        }

        /* Instagram */
        .fa-instagram {
          font-size: 40px;
          background: radial-gradient(circle at 30% 107%,
              #fdf497 0%, #fdf497 5%,
              #fd5949 45%, #d6249f 60%,
              #285AEB 90%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .fa-youtube {
          font-size: 40px;
          color: #FF0000;
        }

        .fa-line {
          font-size: 40px;
          color: #06C755;
        }

        .fa-youtube,
        .fa-line,
        .fa-tiktok,
        .fa-instagram {
          transition: all 0.3s ease;
          /* เพิ่มความนุ่มนวล */
        }

        .fa-youtube:hover,
        .fa-line:hover,
        .fa-tiktok:hover,
        .fa-instagram:hover {
          transform: translateY(-6px) scale(1.1);
          /* ยกขึ้น + ขยายเล็กน้อย */
        }

        .custom-link {
          display: inline-flex;
          align-items: center;
          transition: all 0.2s ease;
          color: #6c757d;
          /* สีเริ่มต้น */
          text-decoration: none;
        }

        .custom-link:hover {
          color: #0d6efd;
          /* เปลี่ยนสีตอน hover */
          transform: translateY(-3px);
          /* ขยับขึ้นเล็กน้อย */
        }

        .map-container:hover {
              transform: none;
              /* ขยายเล็กน้อย */
              box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
              /* เงาชัดขึ้น */
            }

/* กล่องรวมปุ่ม social */
    .social-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      /* ระยะห่างแต่ละปุ่ม */
      z-index: 9999;
    }

    /* ปุ่มโซเชียล */
    .social-float a {
      font-size: 26px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .social-float .instagram {
      background: white;
    }

    /* เอฟเฟกต์ hover ปกติของปุ่ม social */
    .social-float a:hover {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    }

    /* 🚫 ยกเลิก hover effect เฉพาะปุ่ม IG ที่อยู่ใน .social-float */
    .social-float a.instagram:hover {
      transform: none !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }