#content-wrapper {
  border-radius: 0px;
  background: #E5E5E5;
}
.header {
  background: #fff;
}
.color-ci:hover { color: #174f90!important; }
.main {
  padding-top: 75px;
}

.header .container-flex{
height: 75px;
}
.container-2-row{
  padding: 0px 10px;
}

/*color*/
.sidebarnav .sidebarnav-list > li h2 {
  color: #174f90;
}
.container-2-row .font-xl {
  color: #174f90;
}
.box-header h2 {
  color: #174f90;
}
.lab-2-col > label {
  color: #174f90;
}   
.sidebarnav .sidebarnav-list .submenu li a:hover, .sidebarnav .sidebarnav-list .submenu li a.active {
  color: #174f90;
}
.sidebarnav .sidebarnav-list .submenu li a.active i {
  color: #f6f2ec!important;
}
 
.form-login .btn-detail {
  background: #174f90 !important;
}
.form-login {
  background: #E5E5E5;
}

.btn-detail {
  height: 33px;
  background: #c4c4c4;
  font-weight:400px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  text-transform: unset;
  border-radius: 5px;
  position: relative;
  min-width: 140px;
}

.btn-red.btn-detail {
  color: #f6f2ec !important;
  background: #174f90 !important; 
}

.sidebarnav .sidebarnav-list .submenu li a:hover{
  color: #174f90!important;
}
.sidebarnav .sidebarnav-list .submenu li a.active {
  color: #f6f2ec!important;
} 
.sidebarnav .sidebarnav-list .submenu li a.active {
  background: #174f90!important;
}




/*table*/

.checkbox-badge {
  font-size: 12px;
  background-color: #000;
}
  
.btn-detail i {
  top: 0px!important;
}
  
.pointer {
  cursor: pointer;
}

.hidden {
  visibility: hidden;
}



/* FORM OLD*/
/* .formshared .form_border{
  padding: 20px;
  border-radius: 5px;
  border: 1px solid rgb(209 209 209);
}
.formshared label{
    margin-bottom: unset !important;
}
.formshared .component_list_boder{
  padding: 20px 10px;
  border-radius: 10px;
  border: 1px solid rgb(233 233 233);
  margin-bottom: 1rem;
  margin-left: 15px;
  margin-right: -15px;
}
section option {
  font-size: 20px;
} */



/* FORM */
.formshared {
  background: #f0f2f5;
  font-family: "Mitr";
  font-size: 16px;
}
.formshared .form-control {
    font-size: 14px;
}
.formshared label{
    font-size: 14px !important;
}
.formshared .form-control {
    background: #fff;
}
.formshared .upload-area {
    background-color: #e9ecef;
}
.formshared .select2-container--default .select2-selection--single {
    background-color: #ffffff;
}
.formshared .table td, .table th {
    vertical-align: unset;
}
.formshared .btn-delete {
  background: transparent;
  border: none;
  color: #e74c3c;
  font-size: 16px;
  cursor: pointer;
}
/* TAB LANGUAGE  */
.lang-tab-container {
  background: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  /* max-width: 700px; */
  margin: auto;
  font-family: sans-serif;
}
.tab-main {
  display: flex;
  list-style: none;
  padding-left: 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  margin-bottom: 0;
}
.tab-main li {
  flex: 1;
}
.tab-main li a {
  display: block;
  text-align: center;
  padding: 10px 0;
  background: #dee2e6;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  height: 40px;
}
.tab-main li.active a {
  background: #174f90;
  color: white;
}
/* CONTENT */
.seo-content {
  font-family: "Mitr";
  background: white;
  padding: 20px;
  border-radius: 0 0 8px 8px;
  border-top: none;
}
.seo-title {
  color: #174f90;
  font-size: 14px;
  margin-bottom: 15px;
}
/* SEO BOX */
.seo-box {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 20px;
}
.seo-box label {
  font-size: 13px;
  color: #555;
  display: block;
  margin-bottom: 6px;
}
.seo-box input.form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}


.component-container {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 6px;
  border-radius: 6px;
  padding: 24px;
  margin: 30px auto;
}
.component-header {
  font-size: 16px;
  font-weight: 600;
  color: #174f90;
  border-bottom: 2px solid #174f90;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.component-item {
  display: flex;
  align-items: stretch;
  margin-bottom: 24px;
}
.delete-button {
  background: #e74c3c;
  border: none;
  color: white;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 16px;
  cursor: pointer;
  margin-left: -17px;
  margin-top: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-button.list {
    position: absolute;
    top: 0px;
    right: -10px;
}
.delete-button:hover {
  background: #c0392b;
}


/* คอลัมน์: Sort ซ้าย */
.sidebar-sort {
  width: 40px;
  text-align: center;
  font-size: 16px;
  color: #999;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
}
.sidebar-sort span {
  font-size: 16px;
  margin-top: 4px;
  margin-right: 4px;
}
/* คอลัมน์: HEADING */
.component-sidebar {
  width: 140px;
  background: #d9e9fb;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #174f90;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  padding: 0 10px;
}
/* Main content */
.component-wrapper {
  flex: 1;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 16px 20px;
  display: flex;
  gap: 0px;
  flex-wrap: wrap;
}
.body-component {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 20px;
  margin-top: 5px;
}

/* Toolbar */
/* ปรับให้ toolbar-box ทำหน้าที่ layout เหมือน component-toolbar เดิม */
.toolbar-box {
  margin-bottom: 16px;
  width: auto;
  /* flex: 1 1 auto; */
  min-width: 180px;
  padding-left: 15px;
}
/* จัดกลุ่ม label + radio */
.toolbar-box .label {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

/* ปุ่มเพิ่ม section */
.select-group {
  appearance: none;
  padding: 6px 14px;
  border-radius: 6px;
  background: #e9ecef;
  color: #333;
  font-size: 13px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  padding-right: 30px; /* เผื่อพื้นที่ให้ลูกศร */
}
/* เมื่อโฟกัสหรือเลือก */
.select-group:focus,
.select-group:active {
  background: #4da3ff;
  color: white;
  outline: none;
  border-color: #4da3ff;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ปุ่ม radio */
.radio-group {
  display: flex;
  gap: 8px;
}
.radio-btn {
  display: inline-block;
  cursor: pointer;
}
.radio-btn input[type="radio"] {
  display: none;
}
.radio-btn span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  background: #e9ecef;
  color: #333;
  font-size: 13px;
  transition: all 0.2s ease;
}
.radio-btn input[type="radio"]:checked + span {
  background: #4da3ff;
  color: white;
}


/* กล่องเพิ่ม section */
.add-list {
  border: 2px dashed #4da3ff;
  background: #e5effb;
  color: #2196f3;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.add-list i {
  margin-right: 6px;
}


.btn_add_gallery {
  cursor: pointer;
  padding: 10px;
  border-radius: 5%;
  border: none;
  width: 70px; 
  margin-bottom: 70px;
  margin-top: 53px;
  font-size: 25px;
}









/* addSectionNewUI */
.add-section-btn {
  width: 100%;
  padding: 40px 20px;
  background-color: #e5effb;
  border: 2px dashed #4da3ff;
  border-radius: 8px;
  color: #2196f3;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease, border 0.3s ease;
}

.add-section-btn:hover {
  background-color: #d8eafc;
  border-color: #2196f3;
}

.add-section-btn i {
  margin-right: 6px;
}

.img_row{
  background: #f5f6f8;
}
.img_ex_comp {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 32%;
  margin:7px;
}

.img_ex_comp img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  object-fit: cover;
  max-height: 140px;
}

.img_ex_comp:hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background: #9ed1fb !important;
}

.img_ex_comp br {
  display: none;
}

.img_ex_comp::after {
  content: attr(data-label);
  /* font-weight: 600; */
  font-size: 16px;
  color: #174f90;
  background: #f5f5f5;
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
  margin: -16px;
  padding: 5px;
}