/*** responsive ******/
 @media screen and (min-width: 320px) and (max-width: 767px) {

     .anima-itemLeft01,
     .anima-itemRight01,
     .anima-itemBottom01 {
         display: none;
     }

     .nav {
         display: none;
     }

     .hero-dotts {
         width: 60px;
         height: 25px;
         left: 0;
         transform: translate(-58%, -1%);
         background-size: 100%;
     }

     .hero {
         height: 100%;
         min-height: 100%;
         display: block;
         margin: 0 auto;
         padding: 25px 0;
     }

     .hero-img img {
         text-align: center;
         margin: 0 auto;
         width: 100%;
     }

     .hero-leftcontent {
         display: block;
     }

     .hero-leftjumbotext h2 {
         font-size: 50px;
         margin: 0;
         line-height: 60px;
     }

     .hero-leftjumbotext h3 {
         font-size: 40px;
         margin: 0;
         line-height: 50px;
     }

     .hero-media {
         text-align: center;
         display: block;
     }

     .hero-media p {
         display: inline-block;
     }

     .hero-metaText {
         margin: 0;
         padding: 25px 0 0 0;
         max-width: 100%;
     }

     .hero-rightcontent {
         display: block;
     }

     .hero-rightcontent .hero-img {
         margin: 0px;
         display: none;
     }

     .hero-rightjumbotext {
         position: relative;
         padding: 0;
         margin-right: 0;
         padding-top: 15px;
     }

     .hero-rightjumbotext p {
         font-size: 20px;
         line-height: 30px;
     }

     .hero-rightjumbotext h2 {
         font-size: 34px;
         line-height: 40px;
     }

     .hero-rightjumbotext h3 {
         font-size: 30px;
         line-height: 40px;
     }

     .hero-rightjumbotext p {
         font-size: 20px;
         line-height: 30px;
     }

     .hero-rightjumbotext:before {
         content: "";
         width: 90%;
         height: 1px;
         background: #400378;
         position: absolute;
         right: 50%;
         top: 14px;
         transform: translate(50%, -50%);
     }

     .hero-content {
         display: block;
     }

     .hero-rightcontent a {
         display: block;
         padding: 16px;
         text-align: center;
         font-size: 24px;
         margin: 40px auto 0;
         max-width: 200px;
     }

     .aboutExpo h2 {
         font-size: 24px;
         line-height: 26px;
     }

     .about h3 {
         font-size: 20px;
         line-height: 54px;
     }

     .about h3:before {
         width: 25%;
     }

     .aboutExpo {
         padding: 50px 0;
         min-height: auto;
     }

     .aboutAnima_left {
         display: none;
     }

     .verticalText {
         display: none;
     }

     .aboutExpo p {
         font-size: 14px;
         line-height: 20px;
     }

     .aboutAnima_right {
         display: none;
     }

     .aboutExpo .horizontalText h2 {
         display: none;
     }

     .horizontalText {
         display: none;
     }

     .venuDetails h2 {
         font-size: 24px;
         margin: 0;
         padding: 0;
     }

     .venuDetails {
         min-height: auto;
         padding: 50px 0;
     }

     .venuDetails h3 {
         padding: 0;
         font-size: 28px;
     }

     .venuDetails h3:before {
         width: 44%;
     }

     .venuinner {
         margin: 40px 0;
         display: block;
     }

     .venuinner ul {
         display: block;
     }

     .venuinner ul li h2 {
         font-size: 18px;
         line-height: 20px;
     }

     .venu-icon {
         max-width: 40px;
         margin-right: 15px;
         margin-bottom: 15px;
     }

     .venu-icon img {
         width: 40px;
     }

     .venucontent {
         padding: 50px 0;
         display: block;
     }

     .venucontent-left {
         margin-bottom: 24px;
     }

     .partners-section {
         display: block;
         min-height: auto;
     }

     .partners-wrap {
         display: block;
     }

     .partners-grid {
         display: table;
         text-align: center;
         margin: 0 auto;
         grid-template-columns: auto;
     }

     .partner-card:after {
         display: none;
     }

     .partners-left {
         max-width: 460px;
         margin-bottom: 40px;
     }

     .partner-card:before {
         display: none;
     }

     .partners-wrap {
         display: block;
     }

     .partners-grid {
         display: table;
         text-align: center;
         margin: 0 auto;
         grid-template-columns: auto;
     }

     .partner-card:after {
         display: none;
     }

     .partner-card:before {
         display: none;
     }

     .partners-left p {
         font-size: 16px;
         line-height: 18px;
     }

     .partners-left h2 {
         font-size: 40px;
         line-height: 40px;
     }

     .whyexpo {
         display: block;
         min-height: auto;
         padding: 50px 0;
     }

     .whyexpo .container {
         display: block;
     }

     .whyexpo h2 {
         font-size: 40px;
         line-height: 40px;
         margin-bottom: 20px;
     }

     .whyexpo h3 {
         font-size: 24px;
     }

     .whyexpo:before {
         display: none;
     }

     .whyexpo {
         display: block;
         min-height: auto;
         padding: 50px 0;
     }

     .whyexpo .container {
         display: block;
     }

     .whyexpo h2 {
         font-size: 40px;
         line-height: 40px;
         margin-bottom: 10px;
         text-align: left;
     }

     .whyexpo h3 {
         font-size: 24px;
         text-align: left;
     }

     .whyexpo:before {
         display: none;
     }



     .whyexpo-right img {
         max-width: 50%;
     }

     .whyexpo-left {
         margin-bottom: 50px;
     }

     .whyexpo ul li {
         font-size: 16px;
     }

     .whyexpo p {
         text-align: left;
     }

     .whyexpo .whyexpo-right h3:before {
         right: inherit;
     }
 }



 @media screen and (min-width: 768px) and (max-width: 1024px) {
     .nav {
         display: flex;
         gap: 20px;
         flex-wrap: wrap;
     }

     .hero-leftjumbotext h3 {
         font-size: 40px;
         line-height: 50px;
     }

     .hero-leftjumbotext h2 {
         font-size: 80px;
         color: #400378;
         font-family: 'Kanit-SemiBold';
         line-height: 60px;
         margin: 40px 0 0 20px;
     }

     .hero-leftjumbotext {
         max-width: 300px;
     }

     .hero-metaText {
         margin: 0 25px 0 0;
         padding: 50px 0 0 0;
         max-width: 420px;
     }

     .hero-leftjumbotext {
         max-width: 300px;
     }

     .hero-media p {
         display: block;
     }

     .hero-media {
         display: block;
     }

     .hero-metaText h2 {
         text-align: right;
     }

     .hero-rightjumbotext {
         position: relative;
         padding: 20px;
         margin-right: 20px;
         max-width: 320px;
     }

     .hero-rightjumbotext h2 {
         font-size: 40px;
         line-height: 50px;
         margin: 10px 0 0 0px;
     }

     .hero-rightjumbotext h3 {
         font-size: 30px;
         line-height: 40px;
         margin: 0px 0 0 0px;
     }

     .hero-rightcontent .hero-img {
         margin-left: 0;
         position: relative;
         margin-top: 0;
         max-width: 200px;
     }

     .hero-rightjumbotext p {
         font-size: 20px;
         line-height: 20px;
     }

     .hero-rightcontent a {
         font-size: 20px;
         line-height: 20px;
         padding: 16px;
         text-align: center;
     }

     .hero-rightcontent .hero-img:before {
         content: "";
         width: 60px;
         height: 30px;
         background: rgba(63, 3, 120, 80%);
         position: absolute;
         right: -30px;
         bottom: 80%;
     }

     .hero {
         min-height: 60vh;
     }

     .hero {
         background: url(../images/hero-banner-ipad.png) !important;
         background-position: center bottom !important;
         background-size: cover !important;
     }
     .hero-dotts {
         width: 140px;
         height: 24px;
         position: absolute;
         left: 58%;
         top: 6%;
         transform: translate(-58%, -1%);
         background-size: contain;
     }

     .hero-leftcontent {
         display: flex;
         width: 100%;
         justify-content: center;
     }

     .hero-rightcontent {
         display: flex;
         width: 100%;
         align-items: center;
         justify-content: center;
         margin-top: 30px;
     }

     .hero-img {
         margin: 0;
         max-width: 200px;
     }

     .verticalText h2 {
         display: none;
     }

     .aboutExpo,
     .venuDetails {
         min-height: auto;
         padding: 50px 0;
     }

     .aboutExpo h2 {
         font-size: 50px;
         line-height: 70px;
     }

     .aboutExpo h3 {
         font-size: 30px;
         line-height: 50px;
     }

     .aboutExpo p {
         font-size: 18px;
         line-height: 24px;
     }

     .anima-itemLeft01 {
         left: -44px;
     }

     .anima-itemRight01 {
         right: -30px;
     }

     .anima-itemBottom01 img {
         max-width: 50%;
         text-align: center;
     }

     .aboutExpo .horizontalText h2,
     .venuDetails .horizontalText h2 {
         display: none;
     }

     .aboutAnima_right {
         right: -60px;
     }

     .aboutAnima_left {
         left: -60px;
     }

     .venuDetails h3 {
         font-size: 30px;
         line-height: 50px;
         padding-top: 20px;
     }

     .venuinner ul li h2 {
         font-size: 18px;
         font-family: 'Kanit-Thin';
         line-height: 24px;
     }

     .venu-icon img {
         width: 36px;
     }

     .venucontent {
         padding-top: 50px;
         display: block;
     }

     .venucontent-right {
         margin: 40px auto;
         max-width: 500px;
         height: 220px;
     }

     .venuDetails h2 {
         font-size: 50px;
         line-height: 70px;
     }

     .venucontent-left h2 {
         margin: 0 30px;
     }

     .venucontent-right h2 {
         font-size: 20px;
         line-height: 30px;
     }

     .venucontent-right p {
         font-size: 18px;
         line-height: 24px;
         margin: 20px 0;
     }

     .venucontent-left {
         margin: 0 auto;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .partners-section {
         padding: 50px 0;
         min-height: auto;
     }

     .partners-wrap {
         display: block;
     }

     .partners-left h2 {
         font-size: 40px;
         line-height: 40px
     }

     .partners-left p {
         font-size: 18px;
         line-height: 24px;
     }

     .partners-left {
         max-width: 100%;
         margin-bottom: 20px;
     }

     .partners-grid {
         display: flex;
         flex-wrap: wrap;
     }

     .partner-card:nth-child(-n + 8)::before {
         display: none;
     }

     .partner-card:not(:nth-child(4n))::after {
         display: none;
     }


     .whyexpo-left {
         max-width: 48%;
     }

     .whyexpo-right {
         max-width: 48%;
     }

     .whyexpo:before {
         display: none;
     }


     .whyexpo h3 {
         font-size: 20px;
     }

     .whyexpo p {
         font-size: 18px;
     }

     .whyexpo ul li {
         font-size: 16px;
     }

     .whyexpo {
         min-height: auto;
         padding: 50px 0;
     }

     .whyexpo h2 {
         font-size: 40px;
         line-height: 40px;
         margin-bottom: 20px;
     }

     .whyexpo-right img {
         max-width: 50%;
         margin: 0 0 0 auto;
     }
     .btn-dark, .btn-line{
        font-size: 14px;
     }

 }


 .admin-menu-toggle {
     display: none;
     width: 44px;
     height: 44px;
     border: 1px solid #dedbe5;
     background: #fff;
     color: #400378;
     cursor: pointer;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 5px;
     flex: 0 0 auto;
 }

 .admin-menu-toggle span {
     width: 22px;
     height: 2px;
     background: currentColor;
     display: block;
     transition: .25s ease;
 }

 body.sidebar-open .admin-menu-toggle span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 body.sidebar-open .admin-menu-toggle span:nth-child(2) {
     opacity: 0;
 }

 body.sidebar-open .admin-menu-toggle span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 .sidebar-backdrop {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .38);
     z-index: 9;
 }

 body.sidebar-open .sidebar-backdrop {
     display: block;
 }

 .table-scroll-hint {
     display: none;
     margin: 0 0 10px;
     font-size: 13px;
     color: #777;
     font-family: "Kanit-Light", sans-serif;
 }

 @media (max-width: 1400px) {
     .main-area {
         padding-left: 28px;
         padding-right: 28px;
     }

     .profile-grid {
         grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         gap: 30px;
     }
 }

 @media (max-width: 1199px) {
     .sidebar {
         width: 270px;
         padding-left: 24px;
     }

     .main-area {
         margin-left: 270px;
         padding-left: 24px;
         padding-right: 24px;
     }

     .nav-item {
         gap: 14px;
         font-size: 14px;
     }

     .page-head {
         align-items: stretch;
         flex-direction: column;
         margin-bottom: 24px;
     }

     .page-right,
     .toolbar {
         width: 100%;
     }

     .search-box {
         max-width: none;
         width: min(100%, 340px);
     }

     .search-box input {
         max-width: none;
         width: 100%;
         height: 50px;
         font-size: 14px;
     }

     .select-wrapper {
         width: min(100%, 260px);
         display: flex;
     }

     .data-table {
         min-width: 100%;
     }
 }

 @media (max-width: 991px) {
     .admin-menu-toggle {
         display: inline-flex;
     }

     .sidebar {
         transform: translateX(-105%);
         transition: transform .3s ease;
         width: min(82vw, 310px);
         padding: 24px 16px 28px;
         box-shadow: 14px 0 30px rgba(0, 0, 0, .12);
         overflow-y: auto;
     }

     body.sidebar-open .sidebar {
         transform: translateX(0);
     }

     .sidebar:before {
         display: none;
     }

     .brand img {
         max-width: 170px;
     }

     .side-nav {
         margin-top: 26px;
     }

     .main-area {
         margin-left: 0;
         padding: 0 20px 48px;
         width: 100%;
     }

     .topbar {
         height: 78px;
         justify-content: space-between;
         gap: 15px;
         position: sticky;
         top: 0;
         background: #fff;
         z-index: 8;
         border-bottom: 1px solid #eee;
     }

     .admin-nav {
         margin-left: auto;
         align-items: center;
     }

     .admin-nav h2 {
         font-size: 14px;
         line-height: 22px;
         /*margin-left: 20px;*/
     }

     .page {
         margin-top: 24px;
         max-width: 100%;
     }

     .profile-grid,
     .company-form-grid {
         grid-template-columns: 1fr;
         gap: 22px;
     }

     .info-card,
     .skills-card,
     .interview-details,
     .interview-card,
     .decision-card {
         padding: 18px;
     }
 }

 @media (max-width: 767px) {
     .main-area {
         padding: 0 14px 36px;
     }

     .topbar {
         height: 68px;
     }

     .admin-nav h2:before {
         height: 24px;
     }

     .page-head h2 {
         font-size: 22px;
         line-height: 30px;
     }

     .page-right {
         display: grid;
         grid-template-columns: 1fr;
         gap: 10px;
     }

     .toolbar,
     .select-wrapper,
     .search-box {
         width: 100%;
         max-width: 100%;
         display: flex;
     }

     .pagination {
         justify-content: center;
         flex-wrap: wrap;
         gap: 6px;
     }

     .page-btn {
         min-width: 34px;
         height: 34px;
         padding: 0 10px;
     }

     /* Turn wide data tables into readable mobile cards */
     .table-wrap {
         overflow: visible;
         font-size: 14px;
         line-height: 22px;
     }

     .table-scroll-hint {
         display: none;
     }

     .data-table,
     .data-table thead,
     .data-table tbody,
     .data-table th,
     .data-table td,
     .data-table tr {
         display: block;
         width: 100%;
         min-width: 0;
     }

     .data-table thead {
         display: none;
     }

     .data-table {
         border-collapse: collapse;
         min-width: 0;
     }

     .data-table tbody {
         display: grid;
         gap: 14px;
     }

     .data-table tbody tr,
     .data-table tbody tr:nth-child(odd) {
         background: #fff;
         border: 1px solid #e7e3ef;
         box-shadow: 0 10px 24px rgba(64, 3, 120, .08);
         padding: 12px;
     }

     .data-table tbody tr:nth-child(odd) td:first-child,
     .data-table tbody tr:nth-child(odd) td:last-child {
         border-radius: 0;
     }

     .data-table td {
         min-height: 0;
         height: auto;
         padding: 10px 0;
         border-bottom: 1px solid #eee;
         display: grid;
         grid-template-columns: minmax(120px, 42%) 1fr;
         gap: 12px;
         align-items: center;
         word-break: break-word;
     }

     .data-table td:last-child {
         border-bottom: 0;
     }

     .data-table td::before {
         content: attr(data-label);
         color: #400378;
         font-family: "Kanit-Medium", "Kanit-Regular", sans-serif;
         font-size: 13px;
         line-height: 18px;
         position: static;
     }

     .status {
         min-width: 0;
         width: fit-content;
         max-width: 100%;
     }

     .info-row,
     .line-row {
         grid-template-columns: 1fr;
         gap: 2px;
     }

     .skills-list {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
     }

     .interview-card label {
         display: grid;
         gap: 8px;
     }

     .form-actions {
         display: grid;
         grid-template-columns: 1fr;
         gap: 10px;
     }

     .ghost-btn,
     .primary-btn {
         width: 100%;
     }
 }

 @media (max-width: 420px) {
     .main-area {
         padding-left: 10px;
         padding-right: 10px;
     }

     .admin-nav h2 {
         /*display: none;*/
     }

     .page-head h2 {
         font-size: 20px;
     }

     .data-table td {
         grid-template-columns: 1fr;
         gap: 4px;
     }

     .data-table td::before {
         font-size: 14px;
         font-family: 'Kanit-Light';
     }
 }

 @media (min-width: 768px) {
     .table-wrap {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }

     .table-wrap .data-table {
         margin-bottom: 4px;
     }

     .table-scroll-hint {
         display: block;
     }
 }

 @media (max-width: 680px) {
     .hero-inner {
         grid-template-columns: 1fr;
         gap: 0px;
     }

     .hero-actions {
         flex-direction: column;
     }

     .hero-gradient {
         background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .82) 52%, rgba(255, 255, 255, .96) 100%);
     }

     .hero {
         background: url(../images/hero-banner-mobile.png) !important;
         background-position: center bottom !important;
         background-size: cover !important;
     }

     .btn-line {
         background: #fff;
     }
     .hero-copy{
        order:2;
     }

 }