@charset "UTF-8";
/* CSS Document */
.franchise-sec-01{padding: 0 0 30px 0; }
.franchise-sec-01 .row {--bs-gutter-x: 0;}
.franchise-sec-01 .main-h-fs{padding-top: 50px; padding-bottom: 0; text-align: center;}
.franchise-sec-01 .main-h-fs img{width: 300px; height: auto;}
.franchise-sec-01 .main-h-fs h3{font-size: 24pt; color: #ff5f07; line-height: 26pt; padding: 20px 0 20px 0; font-family: 'db_heaventroundedbold','Kiwi Maru';}
.franchise-sec-01 .main-h-fs h1{font-size: 32pt; color: #ff5f07; line-height: 36pt; padding: 20px 0 20px 0; font-family: 'db_heaventroundedbold','Kiwi Maru';}
.franchise-sec-01 .main-h-fs span{text-transform: uppercase; padding: 0 0 30px 0; display: block; font-size: 18pt; font-family: 'db_heaventroundedmed','Kiwi Maru';}


.franchise-sec-01 .main-ico-fs {text-align: center; position: relative;}
.franchise-sec-01 .fs-number {position: relative; z-index: 99; top: 40px; left: 50px; text-align: left; font-family: 'db_heaventroundedbold','Kiwi Maru';
font-size: 42pt; color: #ffc947; font-weight: bold;}
.franchise-sec-01 .main-ico-fs img{width: 80%; height: auto;}
.franchise-sec-01 .main-ico-fs p{font-size: 15pt; color: #55322b; line-height: 17pt; padding: 20px 20px 30px 20px;}
 

.franchise-sec-02{padding: 100px 30px 100px 30px; background:url("../images/fs-success-bg.jpg") no-repeat top; background-size: cover;}
.franchise-sec-02 .row {--bs-gutter-x: 0;}
.franchise-sec-02 h3 {font-size: 28pt; color: #ff5f07; line-height: 30pt; padding: 0; margin: 0; text-align: center; font-family: 'db_heaventroundedmed','Kiwi Maru';} 
.franchise-sec-02 i {font-size: 18pt; color: #ffc947; line-height:21pt; padding: 0 0 30px 0; margin: 0; text-align: center; font-style: normal; display: block;
font-family: 'db_heaventroundedmed','Kiwi Maru';}
.franchise-sec-02 h5 {color: #fff;  padding: 0 100px 50px 100px; margin: 0; text-align: center; font-style: normal; display: block;
font-family: 'db_heaventroundedregular','Kiwi Maru';}
.img-review{width: 100%; height: auto; position: relative; z-index: 10;}
.img-review img{width: 100%; height: auto;}
.icon-vdo-review{width: 20%!important; height: auto; position: absolute; top: 35%;  left:40%; z-index: 11; opacity: 0.8;} 

.vdo-review-content{height: 510px;}
.vdo-review-body{padding: 0 0 10px 0;}

 
.franchise-sec-03 {padding: 80px 0 0 0; text-align: center; margin: 0;}  
.franchise-sec-03 .h-reg-fs-form{border-top-left-radius: 0; border-top-right-radius: 0;} 
.franchise-sec-03 .h-reg-fs-form ul{text-align: center; list-style: none; padding: 0; }
.franchise-sec-03 .h-reg-fs-form ul li{width: 100%; text-align: center; line-height: 12pt;}
.franchise-sec-03 .h-reg-fs-form ul li p {color:#FF5F07; font-size: 30pt; line-height: 32pt; font-weight: 600; padding: 0; ;} 
.franchise-sec-03 .h-reg-fs-form ul li.logo-reg-fs img{width: 160px; height: auto;}  
.franchise-sec-03 .h-reg-fs-form ul li.line-sec img{width: 150px; position: relative; top: 10px;}
 

.franchise-sec-03 .r-btn-reg-main {padding: 0; margin: 0; text-align: center; min-height: 150px; }
.franchise-sec-03 .btn-rgt {color: #fff; background: #ff5f07; font-size: 17pt; padding: 5px 30px; border: 2px solid #ff5f07; border-radius: 45px; min-width: 200px; 
z-index: 99; position: relative; top: 10px;} 
.franchise-sec-03 .btn-rgt:hover{color: #ff5f07;background: #fff; border: 2px solid #ff5f07;}  
 /* ---------- FORM FIELD ---------- */
  /* ------- Form Floating & Input ------- */
.franchise-form-reg .form-floating .form-control,
    .form-floating .form-select {
      border: none;
      border-bottom: 2px solid #5a3b1e;
      border-radius: 0;
      background-color: transparent;
      font-size: 16pt; color: #5a3b1e;  padding-left:0; padding: 0; margin: 0;
      box-shadow: none; 
      transition: border-color 0.3s ease; /*ใน option*/
    } 
.franchise-form-reg .form-floating .form-control:focus,
.franchise-form-reg .form-floating .form-select:focus {
      border-color: #f46c1e; /*อักษรลอยตอน hover*/
      box-shadow: none;
    }

.franchise-form-reg .form-floating label,
.franchise-form-reg .form-check-label {font-weight: 500; color: #50342D; font-size: 16pt!important; padding-left: 0;}
.franchise-form-reg .form-floating .form-select  ~ label {font-size: 18pt!important; color: #50342D; opacity: 1.0; margin-top: 10px;padding-left: 0;}

 
.franchise-form-reg .form-floating .form-control:focus ~ label{
      transform: scale(.85) translateY(-1.5rem) translateX(0.15rem);
      color: #FF5F04;  opacity: 1;  font-size: 14pt!important; 
    }
.franchise-form-reg .form-floating .form-select:focus ~ label{
      transform: scale(.85) translateY(-1.5rem) translateX(0.15rem);
      color: #FF5F04;  opacity: 1;  font-size: 14pt!important;  margin-top: 0px;
    }
.franchise-form-reg .form-floating .form-control:not(:placeholder-shown) ~ label {
      transform: scale(.85) translateY(-1.5rem) translateX(0.15rem);
      color: #FF5F04;  opacity: 1;  font-size: 14pt!important; 
    }
/* ลอย label ขึ้นเมื่อ select มีค่าที่เลือก (option ไม่ใช่ disabled) */
.franchise-form-reg .form-select:valid ~ label {
  transform: scale(.85) translateY(-1.5rem) translateX(0.15rem);
  color: #FF5F04;  opacity: 1;  font-size: 14pt !important;  margin-top: 0;
}

.franchise-form-reg .form-label{font-size: 16pt; color: #50342D; font-weight: bold; padding-right: 30px;}


/* สี radio */ 
.franchise-form-reg .radio-inline-group {text-align: left;}
.franchise-form-reg [type="radio"] + label{
    position:relative; padding-left:30px; margin-right: 20px; cursor:pointer; display:inline-block; color:#50342D; line-height:25px;}

.franchise-form-reg [type="radio"] + label::before{
    content:""; position:absolute;
    left:0; top:0; width:20px; height:20px; border-radius: 100%;  border:1px solid #50342E; background:#fff;
}
.franchise-form-reg input[type=radio] + label::after {border: 0;}

.franchise-form-reg [type="radio"]:checked + label::after{
    content:"";  position:absolute; left:3px; top:3px;  width:14px; height:14px;
    border-radius:100%; background:#50342E; transform:scale(1);
    opacity:1; transition:all .3s ease;
}

.franchise-form-reg [type="radio"]:not(:checked) + label::after{
    content:""; position:absolute; left:4px; top:4px; width:14px;  height:14px; border-radius:100%; background:#fff!important; transform:scale(0); opacity:0;
}

/* ------- Button ------- */
 
.franchise-form-reg button{   

  background: #ff5f07; color: #ffffff; padding: 5px 30px 5px 30px;  cursor:  pointer;  font-size: 18pt; border: 3px solid #ff5f07; 
  -moz-transition: all 0.3s; 
  -webkit-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  -ms-transition: all 0.3s; border-radius: 25px; min-width: 200px; margin-top: 20px;} 

.franchise-form-reg  button:hover{ background: #ffffff; color: #ff5f07; padding: 5px 30px 5px 30px; text-decoration: none; border: 3px solid #ff5f07;}



.franchise-sec-04 {background: url("../images/tl-bg04.gif") repeat-x center top #FEF4E3; background-size: contain; padding: 120px 0 30px 0; margin: 0;}
.franchise-sec-04 .fs-service-head {text-align: center; padding-bottom: 10px;}
.franchise-sec-04 .fs-service-head img{width: auto; height: 70px;}
.franchise-sec-04 .nav-tabs {border-bottom: 0; padding: 0;}
.franchise-sec-04 .nav-tabs .nav-link {border-radius: 50px; padding: 3px 30px; font-weight: 600; min-width: 180px; background-color: #fff;
	color: #764B3F; border:1px solid #764B3F; margin-left: 5px; margin-right: 5px;}

.franchise-sec-04 .nav-tabs .nav-link.active {background-color: #764B3F; border:1px solid #764B3F; color: #fff;}
.franchise-sec-04 .tab-sub-title {font-size: 14pt; font-weight: bold; text-align: center; padding: 0 10px 20px 10px;}
.package-box {background: #fff; border-radius: 16px; padding: 20px;margin-bottom: 30px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);}
.package-box .card-header {background: none; padding-bottom: 20px;}

.service-box {background: #fff; border-radius: 16px; padding: 20px;margin-bottom: 30px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); font-weight: 600}
.service-box .card-header {background: none; padding-bottom: 20px; padding-left: 0; margin-bottom: 20px;}

.package-title {color: #50302A; font-weight: bold; margin-bottom: 10px; display: inline; font-size: 18pt; }
.package-h{color: #FE5F07; font-weight: bold;font-size: 20pt; }
.price {color: #FE5F07; font-weight: bold; font-size: 18pt; padding: 10px 0;}

 .franchise-sec-04 .btn-register {
  background-color: #f46c1e;
  color: #ffffff; font-weight: bold;  border: none; border-radius:25px;
  padding: 5px 25px;transition: background-color 0.3s ease;}

.franchise-sec-04 .btn-register:hover {background-color: #5a3b1e; color: #ffffff;}
.franchise-sec-04 ul {padding-left: 1.2rem;}
.franchise-sec-04 ul li {margin-bottom: 8px;}


.franchise-sec-05{padding: 0; background: url("../images/frame-cuve-04.gif") repeat-x bottom center #ffffff; }
.franchise-sec-05 .fs-system-title{text-align: center; background: url("../images/fs-system-bg.jpg") no-repeat top center #ffffff; padding-top: 100px;}
.franchise-sec-05 .fs-system-head{text-align: center;}
.franchise-sec-05 .fs-system-head span{text-align: center; font-size: 26pt; line-height: 28pt; font-family: 'db_heaventroundedbold','Kiwi Maru'; color: #50302A; 
padding: 0; margin: 0;letter-spacing: 0.02em; display: block; }
.franchise-sec-05 .fs-system-head p img{width: 160px; height: auto;}
.franchise-sec-05 .fs-system-head img{width: 150px; height: auto;}
.franchise-sec-05 .pd-title-img{padding: 0; margin: 0; text-align: left;}
.franchise-sec-05 .pd-title-img img{width: 40%; height: auto;} 


 .franchise-sec-05 .equal-card {background: #ffffff; border-radius: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); padding: 30px; height: 100%; /* เพื่อให้ใช้ h-100 ได้ */display: flex; flex-direction: column; border: 1px solid #eee;}
.franchise-sec-05 .card-title-orange {font-size: 16pt; line-height: 18pt; color: #f46c1e; font-weight: bold; text-align: center; letter-spacing: 0.03em;}
.franchise-sec-05 .card-divider {width: 40px; height: 3px; background-color: #814f3a; margin: 10px auto 20px;position: relative;}
.franchise-sec-05 .card-divider::before,
.franchise-sec-05 .card-divider::after {content: ""; width: 20px; height: 3px; background-color: #814f3a; position: absolute; top: 0;}
.franchise-sec-05 .card-divider::before {left: -30px;}
.franchise-sec-05 .card-divider::after {right: -30px;}
.franchise-sec-05 .card-content {flex-grow: 1; /* ให้เนื้อหาเต็มพื้นที่เท่ากัน */font-size: 14pt; line-height: 16pt; }
.franchise-sec-05 .card-content p{padding: 5px 0; margin: 0;}
 
.franchise-sec-06{padding:40px 0 0 0; background:#F7F7F7;} 
.franchise-sec-06 .row {--bs-gutter-x: 0;}
 
.franchise-sec-06 .franchise-benefit-header {padding:0 0 30px 0; text-align: center;}  
.franchise-sec-06 .franchise-benefit-header ul{text-align: center; list-style: none; width: 100%; font-weight: bold; padding-top: 25px; padding-left: 0;}
.franchise-sec-06 .franchise-benefit-header ul li{width: 100%; text-align: center; padding: 0; margin: 0; float: left;} 
.franchise-sec-06 .franchise-benefit-header ul li p img{width:auto; height: 30px;} 
.franchise-sec-06 .franchise-benefit-header ul li p i {color: #FD8305; font-style:normal; font-size: 35pt; padding: 0 0 0 10px; display: inline-block; }
.franchise-sec-06 .franchise-benefit-header ul li img {width: 90px; height: auto;  margin-top: -22px;} 
.franchise-sec-06 .franchise-benefit-header ul li em img{width: 150px;} 

.franchise-sec-06 ul.franchise-list {padding: 0; list-style: none;} 
.franchise-sec-06 .franchise-item {display: flex; align-items: center; gap: 15px;}
.franchise-sec-06 .franchise-icon {min-width:50px; min-height: 50px; background-color: #50302A; border-radius: 50%; display: flex;align-items: center;  justify-content: center; flex-shrink: 0;}

.franchise-sec-06 .franchise-icon img {width: 32px; height: 32px;}
.franchise-sec-06 .franchise-text {color: #50302A; font-size: 16pt;  line-height: 18pt; padding-right: 40px;}

.franchise-sec-07 {padding: 0; margin: 0;}   
.franchise-sec-07 .row {--bs-gutter-x: 0;}
.franchise-sec-07 .pd-main-item {position: relative; overflow: hidden;margin:0;padding:0;}
.franchise-sec-07 .pd-main-item img{ max-width:100%;height:auto;-webkit-transition: 0.6s ease;  transition: 0.6s ease;}
.franchise-sec-07 .pd-main-item img:hover{ -webkit-transform: scale(1.2); transform: scale(1.2);}
.franchise-sec-07 .pd-main-item .img-thumbnail {border:0px; padding: 0; border-radius: 0;} 


.franchise-sec-08{padding: 80px 0 0px 0; background: url("../images/frame-cuve-04.jpg") repeat-x center top ; background-size: contain;}
.franchise-sec-08 .row {--bs-gutter-x: 0;}
.franchise-sec-08 .fs-fc-title-icon{padding: 0; margin: 0; text-align: center;}
.franchise-sec-08 .fs-fc-title-icon img{width: auto; height: 100px;}

.franchise-sec-08 .fs-fc-title {text-align: center; padding-bottom: 50px;}
.franchise-sec-08 .fs-fc-title p{font-size: 30pt; color: #ff5f07; line-height: 32pt; padding: 20px 0 10px 0; margin: 0; 
font-family: 'db_heaventroundedbold','Kiwi Maru';} 
.franchise-sec-08 .fs-fc-title img{width: auto; height: 35px;}

.franchise-sec-09{padding: 30px 0 100px 0; margin: 0; background:url("../images/update-bg.gif") bottom right repeat-x #fff; background-size: cover; min-height: 300px;}
.franchise-sec-09 .step-card {
	  background:url("../images/tl-bg03.jpg") center repeat; background-size: auto; 
	  border: 1px #D6BE9F solid;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      padding: 40px 20px 20px 20px; text-align: center; font-weight: bold; position: relative;
      height: 100%;
      display: flex; align-items: center; justify-content: center;
    }

.franchise-sec-09 .step-badge {
      position: absolute;
      top: -20px; left: 80%;
      transform: translateX(-50%); width: 40px; height: 45px;
    }

.franchise-sec-09 .step-text {
       font-size: 16pt; color: #50302A; line-height:18pt;
 }
 
/*icon contact*/
.franshine-ico-contact {position: fixed; bottom: 80px; right: 20px; z-index: 99999;}
.franshine-ico-contact ul {list-style: none; text-align: right;}
.franshine-ico-contact ul li{padding: 0; margin: 0 0 10px 0; display: block;}
.franshine-ico-contact ul li img{width: auto; height: 60px;} 
.franshine-ico-contact ul li img.click-promotion-fs {max-width: 120px; height: auto;}

@media (max-width: 1200px) {     
 .franchise-sec-08{padding: 100px 0 0px 0; background: url("../images/frame-cuve-04.jpg") repeat-x center top; background-size: auto;} 
}

@media (max-width: 992px) {  
.vdo-review-content{height: 52%;} 

.franchise-sec-08 .fs-fc-title {text-align: center; padding-bottom: 60px;}
.franchise-sec-08 .fs-fc-title p{font-size: 26pt; line-height: 24pt; padding: 20px 0 10px 0; margin: 0; }
.franchise-sec-08 .fs-fc-title img{height: 25px; width: auto;}
	
.franchise-sec-05 .fs-system-head{order: 2;}
.franchise-sec-05 .fs-system-head p{padding:25px 0 5px 0; margin: 0;}
.franchise-sec-05 .pd-title-img{order: 1; text-align: center; position: relative; margin-top: -30px; }
.franchise-sec-05 .pd-title-img img{width: 30%;}
	
.franchise-sec-06 .franchise-text {color: #50302A; font-size: 14pt;  line-height: 16pt; padding-right: 30px;}
 
.franchise-sec-08 .content-title {padding: 0; margin: 0; }
.franchise-sec-08 .content-text{padding: 30px 50px 50px 50px;}
.franchise-sec-08 .content-image{text-align: center;}	
.franchise-sec-08 .content-image img {width: 80%; height: auto; margin: 0 auto;}	 
	
.franchise-sec-09{padding: 0 0 80px 0; margin: 0; background:url("../images/update-bg.gif") bottom right repeat-x #fff; background-size: contain; min-height: 300px;}
.franchise-sec-09 .col {margin-bottom: 20px;}
} 

@media (max-width: 768px) {   
.franchise-sec-01 .main-h-fs {padding-top: 50px;}
.franchise-sec-01 .main-h-fs img{width: 250px; height: auto;} 
.franchise-sec-01 .fs-number {font-size: 32pt;}
	
.franchise-sec-02 h3 {font-size: 24pt; line-height: 27pt;} 
.franchise-sec-02 i {font-size: 16pt; line-height: 19pt; }
.franchise-sec-02 span {padding: 0 20px 50px 20px; font-size: 14pt; list-style: 16pt;} 
.franchise-sec-02 h5{ padding: 0 0 50px 0;}
	 
.franchise-sec-04 .fs-service-head img{width: 90%; height: auto;}
	
.franchise-sec-05 {padding:0; margin-top: 0px;}
.franchise-sec-05 .fs-system-head{order: 2;}
.franchise-sec-05 .fs-system-head p{padding:25px 0 5px 0; margin: 0;}
.franchise-sec-05 .pd-title-img{order: 1; text-align: center; position: relative; margin-top: -30px; }
.franchise-sec-05 .pd-title-img img{width: 40%;}
	
.franchise-sec-07 .content-title p {font-size: 22pt; line-height: 24pt;}
.franchise-sec-08 .fs-fc-title p{font-size: 22pt; line-height: 24pt; padding: 20px 0 10px 0; margin: 0; }
}

@media (max-width: 576px) {   
.franchise-sec-01 .main-h-fs {padding: 30px 30px 0 30px;}
.franchise-sec-01 .main-h-fs img{width: 60%; height: auto;}
.franchise-sec-01 .main-h-fs h3 {font-size: 22pt; line-height: 25pt; padding: 0 30px;}
.franchise-sec-01 .main-h-fs span { font-size: 16pt; }
.franchise-sec-01 .fs-number {font-size: 28pt; top:0; left: 30px;}	

.vdo-review-content{height: 52%;}
	
.franchise-sec-06 .trainer-box {padding: 0;}  
.franchise-sec-06 .franchise-text {font-size: 16pt;  line-height: 18pt; padding-right: 40px;}
 
.franchise-sec-08 .fs-fc-title {text-align: center; padding-bottom: 50px;}	
.franchise-sec-09 .step-badge {position: absolute;top: -20px;left: 50%; transform: translateX(-50%);width: 40px;height: 45px;}

}

@media (max-width: 540px) {  
.vdo-review-content{height: 49%;}
	
}
@media (max-width: 490px) {  
.vdo-review-content{height: 46%;}
}
@media (max-width: 450px) {   
.franchise-sec-01 .main-h-fs img{width: 80%; height: auto;}
	
.franchise-sec-01 .main-h-fs h3 {font-size: 20pt; line-height: 23pt; padding: 0 30px;}
.franchise-sec-01 .fs-number {font-size: 28pt; top:40px; left: 60px;}	
.franchise-sec-01 .main-ico-fs .col-6{width: 100%;}
	
.main-ico-fs .col-6{width: 100%;}
	
.vdo-review-content{height: 43%;}
}
@media (max-width: 350px) {  
.franchise-sec-04 .fs-service-head img{width: auto; height: 35px;}
.vdo-review-content{height: 35%;}
}

/*icon contact*/
.franchise-ico-contact {position: fixed; bottom: 70px; right: 20px; z-index: 99999;}
.franchise-ico-contactul {list-style: none; text-align: right;}
.franchise-ico-contact ul li{padding: 0; margin: 0 0 10px 0; display: block;} 

.franchise-ico-contact ul li a {border-radius:30px; padding: 8px 20px; font-size: 16pt; color: #ffffff; background: #FF5F05;}
.franchise-ico-contact ul li a:hover{ background: #ff2400;}