* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin-top: 100px;
  height: 100%;
  background-color: #f8faf9;
  color: #334155; 
  font-family: 'Kanit', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* ==========================================================================
   2. TYPOGRAPHY & HEADINGS (สวยเฉียบ คมชัด)
   ========================================================================== */
.section-title {
  font-size: 32px; /* ขยายเล็กน้อยเพื่อความสมดุล */
  padding-top: 7%;
  padding-bottom: 20px;
  text-align: center;
  font-weight: 700; /* ความหนาระดับ Bold สไตล์พรีเมียม */
  color: #1e3a47; /* ปรับโทนน้ำเงินเข้มลุ่มลึก */
  margin: 0 5%;
  letter-spacing: 0.75px;
  text-shadow: 2px 2px 4px rgba(175, 201, 209, 0.4); /* ปรับเงาให้ฟุ้งละมุน */
}

/* Responsive Section Titles */
@media (max-width: 1125px) { .section-title { padding-top: 10%; font-size: 26px; text-shadow: 2px 2px 4px rgba(175, 201, 209, 0.4); } }
@media (max-width: 991px)  { .section-title { padding-top: 12%; font-size: 24px; text-shadow: 2px 2px 4px rgba(175, 201, 209, 0.4); } }
@media (max-width: 767px)  { .section-title { padding-top: 14%; font-size: 21px; text-shadow: 1.5px 1.5px 3px rgba(175, 201, 209, 0.3); } }
@media (max-width: 480px)  { .section-title { padding-top: 20%; font-size: 18px; text-shadow: 1px 1px 2px rgba(175, 201, 209, 0.3); } }

/* ==========================================================================
   3. FORMS, INPUTS & DROPDOWNS
   ========================================================================== */
.forminput {
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  width: 100%;
  height: 35px; /* เพิ่มมิติความสูงให้สมดุลตามหลัก UX ยุคใหม่ */
  padding: 0 12px;
  font-size: 14px;
  margin: 0;
  border-radius: 8px;
  color: #334155;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.forminput:focus {
  outline: none;
  border-color: #428299;
  box-shadow: 0 0 0 3px rgba(66, 130, 153, 0.15);
}

.forminputdate {
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  width: 100%;
  height: 40px; /* ยกระดับความสูงมาตรฐานระบบ */
  padding: 0 14px;
  font-size: 14px;
  border-radius: 10px;
  color: #334155;
  transition: all 0.3s ease;
}
.forminputdate:focus {
  outline: none;
  border-color: #428299;
  box-shadow: 0 0 0 3px rgba(66, 130, 153, 0.15);
}

.form-select {
  width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  color: #334155 !important;
  transition: all 0.3s ease !important;
}
.form-select:focus {
  border-color: #428299 !important;
  box-shadow: 0 0 0 3px rgba(66, 130, 153, 0.15) !important;
}

.dselect-tag {
  background-color: #8398a8 !important;
  color: #ffffff !important;
  height: auto !important;
  width: 95% !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  margin: 4px 4px 4px 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.dropdown-menu {
  width: 100% !important;
  max-width: 150% !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
  padding: 8px !important;
}


.haha {
  padding: 24px;
  background-color: #e3f0f5;
  width: 100%;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.labelname {
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  color: #1e3540;
  text-shadow: 1px 1px 0px #afc9d1;
  padding: 6px 10px 0px 10px;
  margin: -8px 0 0 0;
}

.labelnamesmall {
  font-size: 15px;
  text-align: center;
  font-weight: 600;
  color: #475d66;
  padding: 6px 0px 0px 10px;
  margin: 3px -60px 0 0;
}



#header a {
  text-decoration: none;
}

#header {

  display: flex;
  justify-content: space-between;
  height: 70px;
  padding: 15px 10% 15px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
  background-color: #428299;

}

#header #logo {
  font-size: 20px;
  padding: 5px 0 0 5%;
  color: #ffffff;
  width: auto;

}

#header #logo a {
  color: #ffffff;
  margin: 10px 0 0 0;
}

#header #logo a:hover {
  color: #a5c9d6;
}

@media (max-width: 1125px) {
  #header #logo a {
    font-size: 20px;
  }
}

@media (max-width: 991px) {
  #header #logo a {
    font-size: 19px;
  }
}

@media (max-width: 767px) {
  #header #logo a {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  #header #logo a {
    font-size: 17
  }
}

@media (max-width: 991px) {
  #header {
    background: #428299;
    height: 70px;
    padding: 15px 0;
    transition: all 0.5s;
  }

  #header #logo {
    color: #ffffff;
  }
}

@media (max-width: 991px) {
  #header {
    background: #428299;
    height: 70px;
    padding: 15px 0;
    transition: all 0.5s;
  }

  #header #logo {
    color: #ffffff;
  }
}

header ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 10%;
  width: 100%;
}

#header ul a,
#hamburger ul a {
  color: #ffffff;
  font-size: 16px;
}

#header ul li,
#hamburger ul li {
  padding: 5px;
  margin-left: 10px;
}

#header ul li a:hover,
#hamburger ul li a:hover {
  color: #a5c9d6;
}

#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 6px;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

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

.mobile-menu {
  display: none;
  position: absolute;
  top: 70px;
  left: 0;
  height: calc(100vh - 50px);
  width: 100%;
  background-color: #c8e0ec;
}

.mobile-menu li {
  margin-bottom: 10px;
  margin-top: 5%;

}

@media only screen and (max-width: 600px) {
  #header nav {
    display: none;
  }

  #hamburger-icon {
    display: block;
  }
}

.titlepart {
    padding: 10px 24px;
    background-color: #fdb199;
    color: #231f20;
    width: fit-content;
    border-radius: 0 20px 20px 0;
    font-weight: 600;
    margin: 24px 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}



.nav-tabs {
    font-size: 16px;
    width: 100%;
    background-color: #428299;
    color: #ffffff;
    text-align: center;
    border-bottom: none;
}

.nav-tabs ul {
    column-count: 4;
    column-rule: 1px dashed rgba(255, 255, 255, 0.3);
    list-style-type: none;
    padding: 4px 0;
}

.nav-tabs a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    padding: 10px;
    display: block;
    transition: all 0.2s ease;
}
.nav-tabs a:hover {
    color: #ffffff;
    background-color: rgba(255,255,255,0.1);
}

.nav-item { width: auto; }

.containnavtabs {
    background-color: #428299;
    width: 100%;
    border-radius: 12px 12px 0 0;
    padding: 4px 4px 0 4px;
}

.txtsum_avg_and_percent,
.result {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    background-color: #fcdbd1;
    color: #c2410c;
    padding: 12px 32px;
    border-radius: 30px;
    display: inline-block;
    margin: 20px auto;
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1);
}

@media (max-width: 767px) {

    .txtsum_avg_and_percent,
    .result {
        font-size: 16px;
        padding: 10px 20px;
    }
}


.sex, .education, .career, .target, .continue_use, .willjoin, .benefit, .ask_service, .describe_service, .quality_level, .ever_otheragency, .ever_otheragency_451, .typetraining, .type_51 {
  width: 100%;
  max-width: 600px;
  height: 280px;
  margin: 0 auto;
}

/* กล่องยกรองแผ่นชาร์ตสีขาวคลีนลอยตัวพรีเมียม */
.coversex, .covereducation, .covercareer, .covertarget, .covertypetraining, .covertype_51, .covercontinue_use, .coverpercentcontinue_use, .coverpercent45, .coverpercentpart6, .coverwilljoin, .coverbenefit, .coverask_service, .coverever_otheragency_451, .coverdescribe_service, .coverquality_level, .coverever_otheragency {
  border-radius: 16px;
  padding: 20px;
  margin: 15px 0;
  height: 100%;
}

.covercareer, .covertypetraining, .covertype_51 {
  width: 100%; /* ปรับจาก 40% เดิมเพื่อความสมบูรณ์แบบในการจัดระเบียบ Responsive */
  max-width: 100%;
}

/* ==========================================================================
   9. DATA STRIPS & METRICS INFOGRAPHICS (แถบดีไซน์โค้งมนสวยสะดุดตา)
   ========================================================================== */
.percentsexmale, .percentsexfemale, .percentsexother, .percentpart45_dsdw, .percentpart45_agency, .percent1_5, .percent6_10, .percent11_15, .percentmorethan15, .percentpart6_dsdw, .percentpart6_agency {
  margin: 14px 0;
  padding: 16px 20px;
  width: 100%;
  height: auto;
  text-align: left;
  color: #ffffff;
  font-weight: 500;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.percentsexmale:hover, .percentsexfemale:hover, .percentsexother:hover {
  transform: translateY(-2px); /* เอฟเฟกต์ยกตัวเล็กน้อยยามเลื่อนผ่าน */
}

/* คุม Palette เฉดสีคราม-พาสเทลเดิมอย่างมีระบบ (ปรับสีฟอนต์สีอ่อนให้อ่านง่ายชัดเจน) */
.percentsexmale, .percentpart45_dsdw, .percent1_5, .percentpart6_dsdw { background-color: #8dafd1; color: #1e3a5f; }
.percentsexfemale, .percentpart45_agency, .percent6_10, .percentpart6_agency { background-color: #b9cee6; color: #2d4a6b; }
.percentsexother, .percent11_15 { background-color: #b5ddd2; color: #1c4d40; }
.percentmorethan15 { background-color: #ffe4b6; color: #523b18; }

.percentsexmale,
.percentsexfemale,
.percentsexother,
.percentpart45_dsdw,
.percentpart45_agency,
.percent1_5,
.percent6_10,
.percent11_15,
.percentmorethan15 {
    margin: 2% 0;
    padding: 1% 0 1% 3%;
    width: 100%;
    height: 17%;
    text-align: left;
    border-radius: 35px 8px 35px 8px;
}


.coverpercentsex, .coverpercentpart6 {
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  
}

/* ป้ายตัวเลขอเนกประสงค์ (Badges) */
.numberchart, .numberchart1, .numberchart2, .numberchart5, .numberchart_4 {
  font-size: 15px;
  font-weight: 600;
  background-color: #F7A440;
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-block;
  width: auto;
  box-shadow: 0 2px 4px rgba(247, 164, 64, 0.2);
}
.numberchart1 { padding: 6px 14px; }
.numberchart2 { padding: 4px 12px; }
.numberchart5 { padding: 4px 12px; }
.numberchart_4 { padding: 4px 10px; }

.covernumberchart, .covernumberchart_part4 {
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  text-align: left;
}

/* โซนแสดงช่วงอายุ */
.age, .pee_age { font-size: 18px; font-weight: 500; color: #4a5568; }
.num_age { font-size: 22px; font-weight: 700; color: #da392b; }
.coverage { margin: 1% 0 0 0; padding: 1% 1%; width: 100%; text-align: left; }


.choice { font-size: 16px; font-weight: 500; text-align: center; }

.coverchoice {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 12px;
  width: 100%;
  text-align: left;
}
@media (max-width: 768px) {
  .coverchoice { grid-template-columns: 1fr; } 
}


.ch1, .ch2, .ch3, .ch4, .ch5, .ch6 {
    border-radius: 8px 8px 20px 20px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1% 0.5%;
    margin-bottom: 1%;
}
.ch1:hover, .ch2:hover, .ch3:hover, .ch4:hover, .ch5:hover, .ch6:hover { transform: scale(1.01); }

.ch1 { background-color: #8dafd1; color: #1e3a5f; }
.ch2 { background-color: #b9cee6; color: #2d4a6b; }
.ch3 { background-color: #b5ddd2; color: #1c4d40; }
.ch4 { background-color: #ffe4b6; color: #523b18; }
.ch5 { background-color: #f7cf9e; color: #4f3411; }
.ch6 { background-color: #e4b0ad; color: #5c2421; }

/* ตัวจัดบล็อกความกว้างชื่อตัวแปรยืดหยุ่นตาม Responsive */
.choicename      { width: 15%; }
.choicejumnuan   { width: auto; margin: 0 2% 0 0; }
.choicenumber    { width: auto; }
.choicekon       { width: auto; margin: 0 1% 0 2%; }

@media (max-width: 1125px) { .choicename { width: 10%; } }
@media (max-width: 1000px) { .choicename { width: 12%; } }
@media (max-width: 834px)  { .choicename { width: 14%; } }
@media (max-width: 685px)  { .choicename { width: 16%; } }
@media (max-width: 610px)  { .choicename { width: 18%; } }
@media (max-width: 550px)  { .choicename { width: 20%; } }
@media (max-width: 512px)  { .choicename { width: 22%; } }
@media (max-width: 474px)  { .choicename { width: 30%; } }
@media (max-width: 379px)  { .choicename { width: 35%; } }
@media (max-width: 375px)  { .choicename { width: 32%; } }
@media (max-width: 350px)  { .choicename { width: 40%; } }
@media (max-width: 312px)  { .choicename { width: 45%; } }
@media (max-width: 293px)  { .choicename { width: 100%; } }


.table-bordered {
  width: 100%;
  background-color: #ffffff;
  border-collapse: separate; /* แยกฝั่งขอบเพื่อความโค้งมนที่สมบูรณ์ */
  border-spacing: 0;
  border: none !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  margin: 20px auto;
}

.table-bordered td, 
.table-bordered th {
  padding: 14px 18px;
  border: 1px solid #f1f5f9 !important; /* เส้นกรอบบางสบายตา */
  font-size: 14px;
  vertical-align: middle;
}

.redtext     { font-size: 16px; padding: 3px 3px 3px 2%; color: #4a5568; }
.redtextnum  { color: #da392b; font-size: 24px; font-weight: 700; }
.redtextkon  { font-size: 16px; padding: 3px 0 3px 1%; color: #718096; }

/* สีพื้นหลังของหัวข้อตารางแต่ละระดับ (ปรับเฉดให้สมูทสากลและคุมเฉดเดิม) */
.topquestiontitle { background-color: #e3f0f5 !important; color: #142e38; font-weight: 700; }
.questiontitle1   { background-color: #6A8CAF !important; color: #142e38; font-weight: 700; }
.questiontitle2   { background-color: #a4bfda !important; color: #142e38; font-weight: 700; }
.questiontitle3   { background-color: #85c0b0 !important; color: #142e38; font-weight: 700; }
.questiontitle4   { background-color: #F0BB62 !important; color: #142e38; font-weight: 700; }
.questiontitle5   { background-color: #F7A440 !important; color: #142e38; font-weight: 700; }
.questiontitle6   { background-color: #da392b !important; color: #142e38; font-weight: 700; }
.questiontitle7   { background-color: #781D42 !important; color: #142e38; font-weight: 700; }
.questiontitle8   { background-color: #583D72 !important; color: #142e38; font-weight: 700; }

.numberofsurvey   { text-align: center; font-size: 26px; font-weight: 600; margin-bottom: 2%; color: #1e3a47; }
.allsurvey        { color: #da392b; font-weight: 700; }



.codecolor {
  color: #064635; color: #519259; color: #F0BB62; color: #F7A440;
  color: #E1701A; color: #da392b; color: #781D42; color: #583D72;
  color: #6155A6; color: #A685E2; color: #FEA5AD; color: #E5707E;
  color: #FA877F; color: #FFAD87; color: #DFE38E; color: #EEF9BF;
  color: #85c0b0; color: #9fcbd3; color: #8AC6D1; color: #6A8CAF;
  color: #553C8B; color: #019267; color: #00C897; color: #FFD365;
  color: #FDFFA9; color: #FFAB76; color: #FF6363; color: #EA5C2B;
  color: #FF7F3F; color: #F6D860; color: #95CD41; color: #A3DA8D;
  color: #93FFD8; color: #548CFF; color: #7900FF; color: #2F86A6;
  color: #EC9CD3; color: #AE00FB; color: #A03C78; color: #ED8E7C;
  color: #ECD662; color: #92a9c0;
}

/* Continuous Container Responsive Layouts */
@media (max-width: 1125px) { #continue_use { width: 600px; height: 250px; } }
@media (max-width: 991px)  { #continue_use { width: 600px; height: 250px; } }
@media (max-width: 767px)  { #continue_use { width: 600px; height: 250px; } }
@media (max-width: 480px)  { #continue_use { width: 380px; height: 250px; } }
@media (max-width: 40px)   { #continue_use { width: 350px; height: 250px; } }







.btnreason {
  background-color: #F7A440;
  text-decoration: underline;
  margin: 1% 0 3% 5%;
  padding: 1% 1%;
  border-radius: 5px;
  width: auto;
  color: #000000;
}

.btnsuggest {
  background-color: #b9cee6;
  float: left;
  text-decoration: underline;
  margin: 1% 0 3% 5%;
  padding: 1% 1%;
  border-radius: 5px;
  width: auto;
  color: #000000;

}

.btnimpression {
  background-color: #b9cee6;
  float: left;
  text-decoration: underline;
  margin: 1% 0 3% 5%;
  padding: 1% 1%;
  border-radius: 5px;
  width: auto;
  color: #000000;

}


.willjoin {
  width: 600px;
  max-width: 100%;
  height: 250px;
}

.coverwilljoin {
  /* background-color: #638997; */
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  height: 100%;

}

.benefit {
  width: 600px;
  max-width: 100%;
  height: 250px;
}

.coverbenefit {
  /* background-color: #638997; */
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  height: 100%;

}

.ask_service {
  width: 600px;
  max-width: 100%;
  height: 250px;
}

.coverask_service {
  /* background-color: #638997; */
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  height: 100%;

}

.coverever_otheragency_451 {
  /* background-color: #638997; */
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  height: 100%;

}

.describe_service {
  width: 600px;
  max-width: 100%;
  height: 250px;
}

.coverdescribe_service {
  /* background-color: #638997; */
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  height: 100%;

}

.quality_level {
  width: 600px;
  max-width: 100%;
  height: 250px;
}

.coverquality_level {
  /* background-color: #638997; */
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  height: 100%;

}

.ever_otheragency,
.ever_otheragency_451 {
  width: 600px;
  max-width: 100%;
  height: 250px;
}

.coverever_otheragency,
.coverever_otheragency_451 {
  /* background-color: #638997; */
  margin: 1% 0 0 0;
  padding: 1% 1%;
  width: 100%;
  height: 100%;

}


.chart {
  width: 100%;
  min-height: 450px;
}

.row {
  margin: 0 !important;
}







.btnsubmit {
  width: 100px;
  height: 35px;
  padding: 0 10px 0px 10px;
  font-size: 16px;
  margin: 10px 0 0px 0;
  background-color: #428299;
  border-style: none;
  border-radius: 3px;
  color: #ffffff;
  border-radius: 25px;
}






.select2-selection__rendered {
  background-color: #cedff1;
  border-radius: 3px;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: 26px;
  border-color: #000000;

}

.Qrcode {
  margin: 50% 0 50% 0;
}

.bi-box-arrow-in-right {
  font-size: 18px;
  margin-right: 8px;
  font-weight: 800;
}


.bi-calendar-week-fill {
  color: #000000;
  margin: 0 0 0 -25px;
}


.result {
  font-size: 24px;
  text-align: center;
  background-color: #fcdbd1;
  padding: 0.5% 2%;
}

@media (max-width: 1125px) {
  .result {
    font-size: 24px;
    text-align: center;
  }
}

@media (max-width: 991px) {
  .result {
    font-size: 22px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .result {
    font-size: 18px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .result {
    font-size: 16px;
    text-align: center;
  }
}





.btn-warning {
    background-color: #fdbd5d !important;
    border: 1px solid #fdbd5d !important;
    color: #000000 !important;
    border-radius: 25px !important;
}
.btn-secondary{
    color: #000000 !important;
    border-radius: 25px !important;
}

.bi-box-arrow-in-right {
    font-size: 18px;
    margin-right: 8px;
    font-weight: 800;
}



.bi-calendar-week-fill {
    color: #000000;
    margin: 0 0 0 -25px;
}



/* ===== Search Form Advanced Layout ===== */
.containerpj {
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    margin: 20px auto 20px auto;
    width: auto;
}




.haha {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

/* Dropdown row — 4 คอลัมน์เต็มแถว */
.haha .form-group.col-md-3 {
    flex: 1 1 calc(25% - 12px);
    min-width: 180px;
    margin-bottom: 0;
}

/* Date row — เต็มความกว้าง */
.haha .form-row.col-md-12 {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.haha .form-row.col-md-12 .form-group.col-md-2 {
    flex: 0 0 auto;
}

.haha .form-row.col-md-12 .form-group.col-md-3 {
    flex: 1 1 180px;
}

.haha .form-row.col-md-12 .form-group.col-md-1 {
    flex: 0 0 110px;
}

/* ปุ่มตกลง — จัดกลาง */
.haha .form-group.col-md-12 {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* dselect override ให้เนียนตา */
.ds-selector-wrap {
    border-radius: 10px !important;
    border-color: #cde8dc !important;
    font-size: 14px;
    padding: 2px 0;
}

/* Responsive — สำหรับหน้าจอมือถือ */
@media (max-width: 768px) {
    .haha .form-group.col-md-3 {
        flex: 1 1 100%;
    }

    .haha .form-row.col-md-12 .form-group.col-md-3,
    .haha .form-row.col-md-12 .form-group.col-md-1 {
        flex: 1 1 100%;
    }
}



/* ==========================================================================
   1. TABLE MANAGEMENT & STYLES (ปรับสู่โทนสีฟ้าพรีเมียม #428299)
   ========================================================================== */

/* 1. จัดการกรอบตารางหลักให้มีความโค้งมนและมีมิติลอยตัว */
.table-responsive {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    background-color: #ffffff;
    margin: 15px 0;
}

/* 2. หัวตารางหลัก (Thead Dark -> เปลี่ยนเป็นเขียวเข้มลุ่มลึก) */
/* เปลี่ยนหัวตารางจากสีดำทึบ เป็นสีเขียวเข้มพรีเมียม */
.table .table-dark {
    background: linear-gradient(135deg, #428299, #2c5970) !important;
    /* ไล่เฉดสีฟ้าพรีเมียมลึกมีมิติ */
    color: #ffffff !important;
}

.table .table-dark th {
    border-bottom: 3px solid #8db7c7 !important;
    /* เพิ่มเส้นขอบล่างสีฟ้าพาสเทลให้ดูมีดีไซน์ */
    font-weight: 600;
    padding: 16px;
    letter-spacing: 0.5px;
    text-align: center;
    /* จัดตัวอักษรหัวตารางให้อยู่กึ่งกลางดูเรียบร้อยขึ้น */
}

/* 3. แถวหัวข้อบริการหลัก (Service Group Header) */
.service-group-header {
    background-color: #f0f6f9 !important;
    /* พื้นหลังฟ้าพาสเทลจางมากๆ ละมุนตา */
    border-left: 5px solid #428299;
    /* แถบสีฟ้าพรีเมียมซ้ายมือเพิ่มความเด่น */
    transition: background-color 0.2s ease;
}

.service-group-header:hover {
    background-color: #e3eff3 !important;
    /* ไฮไลท์เมื่อเมาส์ชี้ */
}

.service-group-header td {
    padding: 16px 18px !important;
    font-size: 15px;
}

/* 4. ปุ่มกดเปิดดูข้อเสนอแนะ (ปรับจาก btn-primary เดิมเป็นธีมเขียวซอฟต์มินิมอล) */
.service-group-header .btn-primary {
    background-color: #e3f0f5 !important;
    border: 1px solid #bcdae5 !important;
    color: #1e3a47 !important;
    font-weight: 600;
    border-radius: 20px;
    padding: 6px 14px;
    transition: all 0.25s ease;
}

.service-group-header .btn-primary:hover {
    background-color: #428299 !important;
    border-color: #428299 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(66, 130, 153, 0.2);
}

/* 5. พื้นที่ตารางย่อยภายในเมื่อกดสไลด์เปิด (Collapse Container) */
.table .collapse {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapse td[colspan="3"] {
    background-color: #f8fafc;
    /* พื้นหลังรองรับตารางย่อยให้อยู่ในเลเยอร์ที่ลึกขึ้น */
}

/* 6. ตารางข้อเสนอแนะย่อย (Child Table) */
.suggest-child-row {
    background-color: #ffffff !important;
    transition: background-color 0.2s ease;
}

.suggest-child-row:hover {
    background-color: #f0f6f9 !important;
    /* ชี้แล้วเปลี่ยนเป็นฟ้าอ่อนบางๆ */
}

.suggest-child-row td {
    padding: 12px 16px !important;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ไอคอนลูกศรชี้เข้าหาเนื้อหา */
.suggest-child-row .bi-arrow-return-right {
    color: #8398a8 !important;
    font-size: 15px;
}

/* 7. ปุ่มกดรายงาน (Action Button inside Table) */
.btn-report {
    background-color: #428299 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 500;
    padding: 5px 14px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(66, 130, 153, 0.15);
    transition: all 0.2s ease !important;
}

.btn-report:hover {
    background-color: #356b7f !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(53, 107, 127, 0.3);
}

/* 8. ตัวนำทางเปลี่ยนหน้า (Pagination ธีมเขียวพรีเมียมเข้าชุด) */
.pagination {
    gap: 4px;
}

.pagination .page-item .page-link {
    color: #1e3a47;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination .page-item .page-link:hover {
    background-color: #e3f0f5;
    border-color: #8db7c7;
    color: #1e3a47;
}

/* หน้าปัจจุบันที่เลือกอยู่ (Active State) */
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #428299, #356b7f) !important;
    border-color: #356b7f !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(66, 130, 153, 0.25);
}

/* ปุ่มที่กดไม่ได้ (Disabled State) */
.pagination .page-item.disabled .page-link {
    color: #cbd5e1;
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

/* ==========================================================================
   2. TARGET MENU & CARD SELECTION LAYOUT
   ========================================================================== */

/* Container หลักในการจัดวาง */
.menu-container {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    animation: fadeIn 0.6s ease-out;
}

.menu-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e3a47; /* ปรับเป็นสีน้ำเงินครามลุ่มลึก เข้ากับรหัสสี #428299 */
    margin-bottom: 40px;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 4px rgba(175, 201, 209, 0.4); /* เงาสะท้อนโทนฟ้าละมุน */
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
}

/* สไตล์ของการ์ดเมนูหลัก */
.menu-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid #edf2f7;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}

/* ขนาดและการจัดการรูปภาพ */
.menu-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 24px;
    transition: transform 0.4s ease;
}

/* ข้อความระบุกลุ่มเป้าหมาย */
.card-badge {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.card-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* --- เมนูที่ 1: โทนสีฟ้าครามพรีเมียม (ปรับจากเมนูเขียวเดิม) --- */
.menu-blue-premium {
    border-bottom: 5px solid #428299; /* ใช้สีหลักตามบรีฟ */
}

.menu-blue-premium .card-badge {
    background-color: #e3f0f5; /* พื้นหลังฟ้าพาสเทลซอฟต์ๆ */
    color: #1e3a47;
}

.menu-blue-premium .card-text {
    color: #1e3a47;
}

/* ลูกเล่นเมื่อชี้เมาส์ที่เมนูฟ้าพรีเมียม */
.menu-blue-premium:hover {
    transform: translateY(-8px);
    border-color: #356b7f; /* เข้มขึ้นตอน Hover */
    background-color: #fafdfc;
    box-shadow: 0 20px 30px -10px rgba(66, 130, 153, 0.25); /* เงาสีฟ้าครามฟุ้งมีมิติ */
}

/* --- เมนูที่ 2: โทนสีฟ้าพาสเทลละมุนตา --- */
.menu-blue {
    border-bottom: 5px solid #8db7c7; /* ใช้สีฟ้าพาสเทลคู่ใจของธีมระบบ */
}

.menu-blue .card-badge {
    background-color: #e0f7fa;
    color: #006064;
}

.menu-blue .card-text {
    color: #006064;
}

/* ลูกเล่นเมื่อชี้เมาส์ที่เมนูฟ้า */
.menu-blue:hover {
    transform: translateY(-8px);
    border-color: #428299; /* เปลี่ยนมาสลับใช้สีหลักตอนชี้เมาส์ */
    background-color: #f7fcfe;
    box-shadow: 0 20px 30px -10px rgba(66, 130, 153, 0.2);
}

/* เอฟเฟกต์รูปภาพดุ๊กดิ๊กเล็กน้อยตอน Hover */
.menu-card:hover img {
    transform: scale(1.08) rotate(2deg);
}

/* เอฟเฟกต์ปุ่มกดจำลองด้านล่างการ์ด */
.card-btn {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.menu-card:hover .card-btn {
    opacity: 1;
    text-decoration: underline;
}

/* ==========================================================================
   3. RESPONSIVE DESIGN & ANIMATIONS
   ========================================================================== */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        /* ยุบเหลือ 1 คอลัมน์เมื่อเปิดในมือถือ */
        gap: 20px;
    }

    .menu-title {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .menu-card {
        padding: 30px 20px;
    }
}

/* Animation สวยๆ ตอนโหลดหน้าเว็บครั้งแรก */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}