/*
Theme Name: Fitness Theme
Author: Yojiko
Version: 1.0
Text Domain: fitness-custom-theme
*/
@font-face {
    font-family: "ff-normal";
    src: url("/wp-content/uploads/ff-font/SohoGothicPro-Regular.woff2") format("woff2"),url("/wp-content/uploads/ff-font/SohoGothicPro-Regular.woff") format("woff"),url("/wp-content/uploads/ff-font/SohoGothicPro-Regular.ttf") format("truetype"),url("/wp-content/uploads/ff-font/SohoGothicPro-Regular.eot?#iefix") format("embedded-opentype"),url("/wp-content/uploads/ff-font/SohoGothicPro-Regular.svg") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "ff-bold";
    src: url("/wp-content/uploads/ff-font/SohoGothicPro-Bold.woff2") format("woff2"),url("/wp-content/uploads/ff-font/SohoGothicPro-Bold.woff") format("woff"),url("/wp-content/uploads/ff-font/SohoGothicPro-Bold.ttf") format("truetype"),url("/wp-content/uploads/ff-font/SohoGothicPro-Bold.eot?#iefix") format("embedded-opentype"),url("/wp-content/uploads/ff-font/SohoGothicPro-Bold.svg") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
body{margin:0;background: #e6e6e6;font-family: "ff-normal";}
.container{max-width:1200px;margin:0 auto;padding:20px}
.header{width: 100%;background:url("/wp-content/uploads/2023/06/ff-banner.jpg");background-size:cover;background-position: center center;padding: 80px 0;}
.icon-ff{ transform:skewX(-8.4deg); background: #da1a32;max-width: 107px;padding:25px 0 5px 0;position: absolute;top:0;}
.icon-ff img {max-width: 107px;}
.txt-header { text-align:center;color:#FFF; position: relative;font-size: 35px;}
.ff-header{text-align: center;font-family: 'ff-bold';}
.ff-description{font-family: 'ff-normal';}
.club-tabs {margin: 0 0 50px 0;}
.club-tabs button {margin: 0 15px 0 0;width: 100%;max-width: 150px;max-height: 40px;border: 1px solid #da1a32;background: #FFF;padding: 10px 0;    font-weight: bold;color: #da1a32;}
.club-tabs .active {background:#da1a32;color:#FFF; }
.main-pt-box{display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;}
.box-pt .t-img{display: block;aspect-ratio: 1 / 1.3; /* กำหนดเป็นสี่เหลี่ยมจัตุรัส */overflow: hidden;margin-bottom: 10px;}
.box-pt .trainer img{width: 100%;height: 100%;object-fit: cover;display: block;}
.box-pt .t-name a{text-decoration: none;color: #000;font-size: 18px;font-family: "ff-normal"}
.box-pt .t-grading{font-family: "ff-normal";font-size: 14px;}
.box-pt{ animation: fadeIn .4s ease;}
.single-navigation {margin: 50px 0;}
.btn-back-home {width: 13%;background: #da1a32;color: white;display: inline-block;text-decoration: none;padding: 3px;text-align: center;}
.btn-page {width: 8%;background: #da1a32;color: white;display: inline-block;text-decoration: none;padding: 3px;text-align: center;float: right;margin-right:5px }
@keyframes fadeIn{
    from{opacity:0;transform:translateY(10px);}
    to{ opacity:1;transform:translateY(0);}
}
#scrollTopBtn{position: fixed;right: 20px;bottom: 0;width: 50px;height: 35px;border: 0;border-radius: 8% 8% 0 0;background: #454545;color: #fff;font-size: 20px;cursor: pointer;z-index: 99999;box-shadow: 0 2px 10px rgba(0,0,0,.3);}
#scrollTopBtn:hover{ opacity: .8;}
article{display:flex;gap:50px;align-items:flex-start;margin-bottom:60px;}
.featured-image,.c-pt-detail{flex:1;width:50%;}
.c-pt-detail p{margin: 0}
.c-pt-detail ul{list-style:none;margin:0;padding:0;}
.c-pt-detail li{position:relative;padding-left:18px;margin-bottom:8px;line-height:1.6;}
.c-pt-detail li::before{content:"-";position:absolute;left:0;top:0;font-weight:bold;}
.img-box{width:100%;aspect-ratio:5/7;overflow:hidden;border-radius:12px;background:#f5f5f5;}
.img-box img{width:100%;height:100%;display:block;object-fit:cover;}
.trainer-photo{width:100%;height:100%;object-fit:cover;}
.name-txt{font-family: "ff-bold";margin-bottom: 0;}
.grading-txt{font-family: "ff-bold";font-size: 20px;margin-bottom: 15px;}
.txt-red{color: #da1a32;}

/*Related Posts*/
.related-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.trainer-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;}
.trainer-card{text-decoration:none;color:#222;}
.trainer-card h3{margin-top:10px;font-size:16px;}

@media (max-width:821px){
    .btn-page{width: 12%;}
    .btn-back-home{width: 18%;}
}
@media (max-width:768px){
    .btn-page{width: 19%;font-size: 12px;}
    .btn-back-home{width: 30%;font-size: 12px;}
    article{ flex-direction:column;}
    .featured-image,.c-pt-detail{width:100%;}
    .txt-header{top: 20px;}
}