/* กำหนดตัวแปรทั่วไป */
   :root {
       --default-font: "Mali", serif;
       --background-color: #ffffff;
       --default-color: #212529;
       --heading-color: #2d465e;
       --accent-color: #0d83fd;
       --surface-color: #ffffff;
       --contrast-color: #ffffff;
       --nav-color: #212529;
       --nav-hover-color: #0d83fd;
       --nav-mobile-background-color: #ffffff;
       --nav-dropdown-background-color: #ffffff;
       --nav-dropdown-color: #212529;
       --nav-dropdown-hover-color: #0d83fd;
       scroll-behavior: smooth;
   }

   /* ฟอนต์และสีพื้นฐาน */
   html,
   body {
       font-family: var(--default-font);
       font-weight: 400;
       color: var(--default-color);
       /* background-color: var(--background-color); */
       background-image: linear-gradient(to right, rgb(208, 238, 255), #fff, #fff, #fff, #fff, #fff, rgb(208, 238, 255));
       height: 100%;
       margin: 0;
       display: flex;
       flex-direction: column;
   }

   main {
       flex: 1;
   }

   a {
       color: var(--accent-color);
       text-decoration: none;
       transition: 0.3s;
   }

   a:hover {
       color: color-mix(in srgb, var(--accent-color), transparent 25%);
       text-decoration: none;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       color: var(--heading-color);
   }

   /* *************************************************** */
   /* ปุ่มและเมนูหลัก */
   /* *************************************************** */
   .header {
       --background-color: rgba(255, 255, 255, 0);
       color: var(--default-color);
       background-color: var(--background-color);
       padding: 20px 0;
       transition: all 0.5s;
       z-index: 997;
   }

   .header .header-container {
       background: var(--surface-color);
       border-radius: 50px;
       padding: 5px 25px;
       box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
   }

   .scrolled .header .header-container {
       background: color-mix(in srgb, var(--surface-color), transparent 5%);
   }

   .header .logo {
       line-height: 1;
       padding-left: 5px;
   }

   .header .logo img {
       max-height: 36px;
       margin-right: 8px;
   }

   .header .logo h1 {
       font-size: 24px;
       margin: 0;
       font-weight: 500;
       color: var(--heading-color);
   }

   .header .btn-getstarted,
   .header .btn-getstarted:focus {
       color: var(--contrast-color);
       background: var(--accent-color);
       font-size: 14px;
       padding: 8px 20px;
       margin: 0 0 0 30px;
       border-radius: 50px;
       transition: 0.3s;
   }

   .header .btn-getstarted:hover,
   .header .btn-getstarted:focus:hover {
       color: var(--contrast-color);
       background: color-mix(in srgb, var(--accent-color), transparent 15%);
   }

   @media (max-width: 1200px) {
       .header {
           padding-top: 10px;
       }

       .header .header-container {
           margin-left: 10px;
           margin-right: 10px;
           padding: 10px 5px 10px 15px;
       }

       .header .logo {
           order: 1;
       }

       .header .btn-getstarted {
           order: 2;
           margin: 0 10px 0 0;
           padding: 6px 15px;
       }

       .header .navmenu {
           order: 3;
       }
   }

   /* *************************************************** */
   /* เมนู nav  */
   /* *************************************************** */
   /* Navmenu - Desktop */
   /* *************************************************** */
   @media (min-width: 1200px) {
       .navmenu {
           padding: 0;
       }

       .navmenu ul {
           margin: 0;
           padding: 0;
           display: flex;
           list-style: none;
           align-items: center;
       }

       .navmenu li {
           position: relative;
       }

       .navmenu a,
       .navmenu a:focus {
           color: var(--nav-color);
           padding: 18px 15px;
           font-size: 16px;
           font-family: var(--nav-font);
           font-weight: 400;
           display: flex;
           align-items: center;
           justify-content: space-between;
           white-space: nowrap;
           transition: 0.3s;
       }

       .navmenu a i,
       .navmenu a:focus i {
           font-size: 12px;
           line-height: 0;
           margin-left: 5px;
           transition: 0.3s;
       }

       .navmenu li:last-child a {
           padding-right: 0;
       }

       .navmenu li:hover>a,
       .navmenu .active,
       .navmenu .active:focus {
           color: var(--nav-hover-color);
       }

       .navmenu .dropdown ul {
           margin: 0;
           padding: 10px 0;
           background: var(--nav-dropdown-background-color);
           display: block;
           position: absolute;
           visibility: hidden;
           left: 14px;
           top: 130%;
           opacity: 0;
           transition: 0.3s;
           border-radius: 4px;
           z-index: 99;
           box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
       }

       .navmenu .dropdown ul li {
           min-width: 200px;
       }

       .navmenu .dropdown ul a {
           padding: 10px 20px;
           font-size: 15px;
           text-transform: none;
           color: var(--nav-dropdown-color);
       }

       .navmenu .dropdown ul a i {
           font-size: 12px;
       }

       .navmenu .dropdown ul a:hover,
       .navmenu .dropdown ul .active:hover,
       .navmenu .dropdown ul li:hover>a {
           color: var(--nav-dropdown-hover-color);
       }

       .navmenu .dropdown:hover>ul {
           opacity: 1;
           top: 100%;
           visibility: visible;
       }

       .navmenu .dropdown .dropdown ul {
           top: 0;
           left: -90%;
           visibility: hidden;
       }

       .navmenu .dropdown .dropdown:hover>ul {
           opacity: 1;
           top: 0;
           left: -100%;
           visibility: visible;
       }
   }

   /* *************************************************** */
   /* การเลื่อนบนมือถือ */
   /* *************************************************** */
   @media (max-width: 1199px) {
       .mobile-nav-toggle {
           color: var(--nav-color);
           font-size: 28px;
           line-height: 0;
           margin-right: 10px;
           cursor: pointer;
           transition: color 0.3s;
       }

       .navmenu {
           padding: 0;
           z-index: 9997;
       }

       .navmenu ul {
           display: none;
           list-style: none;
           position: absolute;
           inset: 60px 20px 20px 20px;
           padding: 10px 0;
           margin: 0;
           border-radius: 6px;
           background-color: var(--nav-mobile-background-color);
           overflow-y: auto;
           transition: 0.3s;
           z-index: 9998;
           box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
       }

       .navmenu a,
       .navmenu a:focus {
           color: var(--nav-dropdown-color);
           padding: 10px 20px;
           font-family: var(--nav-font);
           font-size: 17px;
           font-weight: 500;
           display: flex;
           align-items: center;
           justify-content: space-between;
           white-space: nowrap;
           transition: 0.3s;
       }

       .navmenu a i,
       .navmenu a:focus i {
           font-size: 12px;
           line-height: 0;
           margin-left: 5px;
           width: 30px;
           height: 30px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           transition: 0.3s;
           background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
       }

       .navmenu a i:hover,
       .navmenu a:focus i:hover {
           background-color: var(--accent-color);
           color: var(--contrast-color);
       }

       .navmenu a:hover,
       .navmenu .active,
       .navmenu .active:focus {
           color: var(--nav-dropdown-hover-color);
       }

       .navmenu .active i,
       .navmenu .active:focus i {
           background-color: var(--accent-color);
           color: var(--contrast-color);
           transform: rotate(180deg);
       }

       .navmenu .dropdown ul {
           position: static;
           display: none;
           z-index: 99;
           padding: 10px 0;
           margin: 10px 20px;
           background-color: var(--nav-dropdown-background-color);
           border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
           box-shadow: none;
           transition: all 0.5s ease-in-out;
       }

       .navmenu .dropdown ul ul {
           background-color: rgba(33, 37, 41, 0.1);
       }

       .navmenu .dropdown>.dropdown-active {
           display: block;
           background-color: rgba(33, 37, 41, 0.03);
       }

       .mobile-nav-active {
           overflow: hidden;
       }

       .mobile-nav-active .mobile-nav-toggle {
           color: #fff;
           position: absolute;
           font-size: 32px;
           top: 15px;
           right: 15px;
           margin-right: 0;
           z-index: 9999;
       }

       .mobile-nav-active .navmenu {
           position: fixed;
           overflow: hidden;
           inset: 0;
           background: rgba(33, 37, 41, 0.8);
           transition: 0.3s;
       }

       .mobile-nav-active .navmenu>ul {
           display: block;
       }
   }

   /* *************************************************** */
   /* โครงสร้าง Footer */
   /* *************************************************** */
   .footer {
       color: var(--default-color);
       background-color: color-mix(in srgb, var(--accent-color), transparent 93%);
       font-size: 14px;
       position: relative;
   }

   .footer .footer-top {
       padding-top: 50px;
   }

   .footer .footer-about .logo {
       line-height: 1;
       margin-bottom: 5px;
   }

   .footer .footer-about .logo img {
       max-height: 40px;
       margin-right: 6px;
   }

   .footer .footer-about .logo span {
       color: var(--heading-color);
       font-family: var(--heading-font);
       font-size: 26px;
       font-weight: 700;
       letter-spacing: 1px;
   }

   .footer .footer-about p {
       font-size: 14px;
       font-family: var(--heading-font);
   }

   .footer .social-links a {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
       font-size: 16px;
       color: color-mix(in srgb, var(--default-color), transparent 20%);
       margin-right: 10px;
       transition: 0.3s;
   }

   .footer .social-links a:hover {
       color: var(--accent-color);
       border-color: var(--accent-color);
   }

   .footer h4 {
       font-size: 16px;
       font-weight: bold;
       position: relative;
       padding-bottom: 12px;
   }

   .footer .footer-links {
       margin-bottom: 30px;
   }

   .footer .footer-links ul {
       list-style: none;
       padding: 0;
       margin: 0;
   }

   .footer .footer-links ul i {
       padding-right: 2px;
       font-size: 12px;
       line-height: 0;
   }

   .footer .footer-links ul li {
       padding: 10px 0;
       display: flex;
       align-items: center;
   }

   .footer .footer-links ul li:first-child {
       padding-top: 0;
   }

   .footer .footer-links ul a {
       color: color-mix(in srgb, var(--default-color), transparent 30%);
       display: inline-block;
       line-height: 1;
   }

   .footer .footer-links ul a:hover {
       color: var(--accent-color);
   }

   .footer .footer-contact p {
       margin-bottom: 5px;
   }

   .footer .copyright {
       padding: 25px 0;
       border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
   }

   .footer .copyright p {
       margin-bottom: 0;
   }

   .footer .credits {
       margin-top: 8px;
       font-size: 13px;
   }

   /* *************************************************** */
   /* เมนูเลื่อน */
   /* *************************************************** */
   .scroll-top {
       position: fixed;
       visibility: hidden;
       opacity: 0;
       right: 15px;
       bottom: -15px;
       z-index: 99999;
       background-color: var(--accent-color);
       width: 44px;
       height: 44px;
       border-radius: 50px;
       transition: all 0.4s;
   }

   .scroll-top i {
       font-size: 24px;
       color: var(--contrast-color);
       line-height: 0;
   }

   .scroll-top:hover {
       background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
       color: var(--contrast-color);
   }

   .scroll-top.active {
       visibility: visible;
       opacity: 1;
       bottom: 15px;
   }

   /* *************************************************** */
   /* Sections */
   /* *************************************************** */
   section,
   .section {
       color: var(--default-color);
       /* background-color: var(--background-color); */
       scroll-margin-top: 90px;
       overflow: clip;
   }

   @media (max-width: 1199px) {

       section,
       .section {
           scroll-margin-top: 66px;
       }
   }

   .section-0 {
       position: relative;
       padding-top: 160px;
   }

   .section-0::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
   }

   /* *************************************************** */
   /* การตั้งค่าอื่น ๆ */
   /* *************************************************** */
   .group a {
       color: var(--nav-color);
   }

   .group a:hover {
       color: var(--nav-hover-color);
   }

   .custom-card {
       border-radius: 30px !important;
       overflow: hidden;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
   }

   .custom-card:hover {
       border-radius: 50% 20% / 10% 40%;
       overflow: hidden;
   }

   .cardBox {
       position: relative;
   }

   .cardBox .content {
       display: flex;
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(255, 255, 255, 0.9);
       z-index: 1;
       justify-content: center;
       align-items: center;
       border-radius: 30px;
       transition: top 0.5s ease-in-out;
       opacity: 0;
   }

   .cardBox:hover .content {
       top: 0;
       opacity: 1;
       color: #fff;
       background: rgba(0, 0, 0, 0.6);
       border-radius: 30px;
   }

   .dropdown-menu-scrollable {
       max-height: 230px;
       overflow-y: auto;
       display: none;
   }

   .dropdown-menu-scrollable.show {
       display: block;
   }