@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


:root {
  --base-clr: #ffffff; /* พื้นหลังสีขาว */
  --line-clr: #d0d7e2; /* สีเส้นเป็นฟ้าอ่อน */
  --hover-clr: #e3eaf5; /* สี hover เป็นฟ้าจาง */
  --text-clr: #1a1f33; /* สีข้อความเป็นน้ำเงินเข้ม */
  --accent-clr: #3a73ff; /* สีเน้นเป็นน้ำเงินสดใส */
  --secondary-text-clr: #5c6f92; /* สีข้อความรองเป็นฟ้าหม่น */
}

*{
  margin: 0;
  padding: 0;
}
html{
  font-family: 'Sarabun', Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5rem;
}
body{
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--base-clr);
  color: var(--text-clr);
  display: grid;
  grid-template-columns: auto 1fr;
}
#sidebar{
  box-sizing: border-box;
  height: 100vh;
  width: 250px;
  padding: 5px 1em;
  background-color: var(--base-clr);
  border-right: 1px solid var(--line-clr);

  position: sticky;
  top: 0;
  align-self: start;
  transition: 300ms ease-in-out;
  overflow: hidden;
  text-wrap: nowrap;
}
#sidebar.close{
  padding: 5px;
  width: 60px;
}
#sidebar ul{
  list-style: none;
}
#sidebar > ul > li:first-child{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  .logo{
    font-weight: 600;
  }
}
#sidebar ul li.active a{
  color: var(--accent-clr);

  svg{
    fill: var(--accent-clr);
  }
}

#sidebar a, #sidebar .dropdown-btn, #sidebar .logo{
  border-radius: .5em;
  padding: .85em;
  text-decoration: none;
  color: var(--text-clr);
  display: flex;
  align-items: center;
  gap: 1em;
}
.dropdown-btn{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
#sidebar svg{
  flex-shrink: 0;
  fill: var(--text-clr);
}
#sidebar a span, #sidebar .dropdown-btn span{
  flex-grow: 1;
}
#sidebar a:hover, #sidebar .dropdown-btn:hover{
  background-color: var(--hover-clr);
}
#sidebar .sub-menu{
  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms ease-in-out;

  > div{
    overflow: hidden;
  }
}
#sidebar .sub-menu.show{
  grid-template-rows: 1fr;
}
.dropdown-btn svg{
  transition: 200ms ease;
}
.rotate svg:last-child{
  rotate: 180deg;
}
#sidebar .sub-menu a{
  padding-left: 2em;
}
#toggle-btn{
  margin-left: auto;
  padding: 1em;
  border: none;
  border-radius: .5em;
  background: none;
  cursor: pointer;

  svg{
    transition: rotate 150ms ease;
  }
}
#toggle-btn:hover{
  background-color: var(--hover-clr);
}

main{
  padding: min(30px, 7%);
}
/* main p{
  color: var(--secondary-text-clr);
  margin-top: 5px;
  margin-bottom: 15px;
} */

.container{
  border: 1px solid var(--line-clr);
  border-radius: 1em;
  margin-bottom: 20px;
  padding: min(2em, 10%);

  /* h2, p { margin-top: 1em } */
  h2 { margin-top: 1em }
}

.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.purple { color: purple; }
.yellow { color: darkgoldenrod; }

/* ABOUT SECTION */
#about {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 1rem;
  height: fit-content;
  margin-top: 80px;

  .about-img {
    align-items: center;
    text-align: center;
  
    img {
        width: 100%;
        height: 530px;
        max-width: 530px;
        border-radius: 20%;
        object-fit: cover;
    }
  }
  .about-text {
    h2 {
      line-height: 1.3;
      margin-bottom: 20px;
    }
    .section__text__p2 {
      margin-bottom: 1rem;
    }
    .exp-area {
      margin-bottom: 30px;
    
      p {
        font-weight: 600;
        font-size: 19px;
        line-height: 42px;
    
        span {
          font-weight: 400;
          margin-left: 8px;
          a {
            text-decoration: none;
            color: var(--text-clr);
          }
        }
      }
    }
    .socials-container {
      display: flex;
      justify-content: left;
      gap: 2rem;
    
      .icon {
        cursor: pointer;
        height: 2rem;
      }
    }
  }
}


/* contact */
.contact-con {
  display: flex;
  flex-direction: column;
  gap: 20px; 
  border-radius: 2rem;
  border: var(--line-clr) 0.1rem solid;
  padding: 2rem;
  margin: 2rem auto;

  .contact-item {
    width: fit-content;
    gap: 0.5rem;
    display: flex; /* Enable flexbox for each contact item */
    align-items: center; /* Center image and text vertically */
    justify-content: center;
  
    .contact-icon {
        cursor: default;
        height: 2.5rem;
    }
    p a {
      text-decoration: none;
      color: var(--text-clr);
    }
  }
}


/* content */
.content-con {
  padding: 20px 1%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 10px;
  align-items: center;
  justify-items: center;
  .content-item {
    display: flex;
    flex-direction: column;
    /* height: 260px; */
    width: 220px;
    margin-bottom: 20px;
    /* border-radius: 1px; */
    transition: 0.3s;
    overflow: hidden;
    a {
      text-decoration: none;
      color: var(--text-clr);
    }
  }
  /* .content-item:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,.3);
  } */
  .thumbnail {
    width: 100%;
    border-radius: 8px;
  }
  .video-title {
    text-align: left;
    font-size: 14px;
    padding: 0px 5px;
    width: 220px; /* ปรับค่าตามความเหมาะสม */
    height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}


/* series */
.series-con {
  padding: 20px 1%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1rem;

  .series-item {
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 420px;
    margin: 0 auto;
    border: var(--line-clr) 1px solid;
    border-radius: 20px;
    padding: 20px 20px;
    @media (max-width: 700px) {
      height: fit-content;
    }
  
    img{
      height: 250px;
      max-width: 250px;
      object-fit: contain;
      /* width: fit-content; */
      border-radius: 10px;
      /* display: block; */
      margin: auto;
    }

    .series-title {
      text-align: center;
      padding: 16px 0px;
      .series-name {
        color: var(--text-clr);
        font-size: 18px;
        font-weight: 700;
      }
      p{
        font-size: 14px;
      }
    }

    .series-more-detail {
      margin-top: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      height: 36px;
      flex-grow: 1;
      color: var(--base-clr);
      text-decoration: none;
    }
    /* ถ้ามีปุ่มเดียว ให้จัดกึ่งกลาง */
    .series-more-detail:has(.a:only-child) {
      justify-content: flex-end;
    }
    /* ถ้ามีมากกว่าหนึ่งปุ่ม ให้จัดซ้าย-ขวา */
    .series-more-detail {
      justify-content: space-between;
    }
    
    .series-more-detail a {
      background: var(--secondary-text-clr);
      color: var(--base-clr);
      padding: 6px 25px;
      border-radius: 30px;
      text-decoration: none;
      flex: 1;
      margin: 0 5px;
      text-align: center;
      margin-top: auto;
    }
    .series-more-detail a:hover {
      color: var(--accent-clr);
      background: var(--hover-clr);
    }
  }
}

/* photoshoots */
.photoshoots-con {
  padding: 20px 1%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1rem;

  .photoshoots-item {
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 380px;
    margin: 0 auto;
    border: var(--line-clr) 1px solid;
    border-radius: 20px;
    padding: 20px 20px;
    @media (max-width: 700px) {
      height: fit-content;
    }
  
    img{
      height: 250px;
      max-width: 250px;
      object-fit: contain;
      /* width: fit-content; */
      border-radius: 10px;
      /* display: block; */
      margin: auto;
    }

    .photoshoots-title {
      text-align: center;
      padding: 16px 0px;
      .photoshoots-name {
        color: var(--text-clr);
        font-size: 18px;
        font-weight: 700;
      }
      p{
        font-size: 14px;
      }
    }

    .photoshoots-more-detail {
      margin-top: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      height: 36px;
      flex-grow: 1;
      color: var(--base-clr);
      text-decoration: none;
    }
    /* ถ้ามีปุ่มเดียว ให้จัดกึ่งกลาง */
    .photoshoots-more-detail:has(.a:only-child) {
      justify-content: flex-end;
    }
    /* ถ้ามีมากกว่าหนึ่งปุ่ม ให้จัดซ้าย-ขวา */
    .photoshoots-more-detail {
      justify-content: space-between;
    }
    
    .photoshoots-more-detail a {
      background: var(--secondary-text-clr);
      color: var(--base-clr);
      padding: 6px 25px;
      border-radius: 30px;
      text-decoration: none;
      flex: 1;
      margin: 0 5px;
      text-align: center;
      margin-top: auto;
    }
    .photoshoots-more-detail a:hover {
      color: var(--accent-clr);
      background: var(--hover-clr);
    }
  }
}

/* event */
.groupbydate {
  background: var(--secondary-text-clr);
  color: var(--base-clr);
  padding: 1rem 2rem;
  font-size: 20px;
  border-radius: 30px;
  margin-top: 2rem;
}
.event-con {
  padding: 20px 1%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1rem;

  .box{
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 480px;
    margin: 0 auto;
    border: var(--text-clr) 1px solid;
    border-radius: 20px;
    padding: 20px;
    @media (max-width: 800px) {
      height: 480px;
    }
    @media (max-width: 600px) {
      height: fit-content;
    }
  
    img{
      height: 250px;
      max-width: 250px;
      object-fit: contain;
      /* width: fit-content; */
      border-radius: 10px;
      /* display: block; */
      margin: auto;
    }
  
    p{
      /* color:#777; */
      font-size: 14px;
      /* line-height: 1.8; */
    }
  
    .red { color: red; }
    .blue { color: blue; }
    .green { color: green; }
    .purple { color: purple; }
    .yellow { color: darkgoldenrod; }
  
    .event-title {
      text-align: left;
      /* padding: .5rem 1rem 0 1rem; */
    }
    .event-name {
      color: var(--text-clr);
      font-size: 18px;
      font-weight: 700;
    }
  
    .event-detail {
      text-align: left;
      /* padding: 0 1rem; */
      .event-tag {
        line-height: 1;
        padding: 5px 0px;
        a {
            color: var(--secondary-text-clr);
            font-size: 14px;
            text-decoration: none;
        }
      }
      .event-detail-box {
        border: var(--text-clr) 0.1rem solid;
        width: fit-content;
        padding: 0px 10px;
        border-radius: 20px;
        margin: 6px 0px;
        font-size: 14px;
        i {
          padding: 0px 5px;
        }
      }
    }
  
    .event-more-detail {
      margin-top: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      height: 36px;
      flex-grow: 1;
      color: var(--base-clr);
      text-decoration: none;
    }

    .event-more-detail:has(.a:only-child) {
      justify-content: flex-end;
    }
    .event-more-detail {
      justify-content: space-between;
    }
  
    .event-more-detail a {
      background: var(--secondary-text-clr);
      color: var(--base-clr);
      padding: 6px 25px;
      border-radius: 30px;
      text-decoration: none;
      flex: 1;
      /* margin: 0 5px; */
      text-align: center;
      margin-top: auto;
    }
    .event-more-detail a:hover {
      color: var(--accent-clr);
      background: var(--hover-clr);
    }
  
  }
  .box-2{
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 420px;
    margin: 0 auto;
    border: var(--text-clr) 1px solid;
    border-radius: 20px;
    padding: 20px;
    @media (max-width: 800px) {
      height: 480px;
    }
    @media (max-width: 600px) {
      height: fit-content;
    }
  
    img{
      height: 250px;
      max-width: 250px;
      object-fit: contain;
      /* width: fit-content; */
      border-radius: 10px;
      /* display: block; */
      margin: auto;
    }
  
    p{
      /* color:#777; */
      font-size: 14px;
      /* line-height: 1.8; */
    }
  
    .red { color: red; }
    .blue { color: blue; }
    .green { color: green; }
    .purple { color: purple; }
    .yellow { color: darkgoldenrod; }
  
    .event-title {
      text-align: left;
      /* padding: .5rem 1rem 0 1rem; */
    }
    .event-name {
      color: var(--text-clr);
      font-size: 18px;
      font-weight: 700;
    }
  
    .event-detail {
      text-align: left;
      /* padding: 0 1rem; */
      .event-tag {
        line-height: 1;
        padding: 5px 0px;
        a {
            color: var(--secondary-text-clr);
            font-size: 14px;
            text-decoration: none;
        }
      }
      .event-detail-box {
        border: var(--text-clr) 0.1rem solid;
        width: fit-content;
        padding: 0px 10px;
        border-radius: 20px;
        margin: 6px 0px;
        font-size: 14px;
        i {
          padding: 0px 5px;
        }
      }
    }
  
    .event-more-detail {
      margin-top: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      height: 36px;
      flex-grow: 1;
      color: var(--base-clr);
      text-decoration: none;
    }

    .event-more-detail:has(.a:only-child) {
      justify-content: flex-end;
    }
    .event-more-detail {
      justify-content: space-between;
    }
  
    .event-more-detail a {
      background: var(--secondary-text-clr);
      color: var(--base-clr);
      padding: 6px 25px;
      border-radius: 30px;
      text-decoration: none;
      flex: 1;
      /* margin: 0 5px; */
      text-align: center;
      margin-top: auto;
    }
    .event-more-detail a:hover {
      color: var(--accent-clr);
      background: var(--hover-clr);
    }
  
  }
}

#loading {
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  /* font-size: 20px; */
  font-weight: bold;
  /* z-index: 999; */
}

hr {
  border: 1px solid var(--line-clr); /* กำหนดความหนาและสีของเส้น */
  width: 100%; /* กำหนดความกว้างของเส้นให้เป็น 50% ของหน้าเว็บ */
  margin: 20px auto; /* จัดให้อยู่ตรงกลางด้วยการตั้ง margin ด้านซ้าย-ขวาเป็น auto */
}

/* concert */
.concert-con {
  padding: 20px 1%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;

  .concert-item{
    display: flex;
    flex-direction: column;
    width: 270px;
    height: 480px;
    margin: 0 auto;
    border: var(--text-clr) 1px solid;
    border-radius: 20px;
    padding: 20px 20px;
    @media (max-width: 700px) {
      height: fit-content;
    }
    img{
      height: 270px;
      /* width: fit-content; */
      border-radius: 10px;
      margin: auto;
    }
    p{
      font-size: 14px;
    }
    .red { color: red; }
    .blue { color: blue; }
    .green { color: green; }
    .purple { color: purple; }
    .yellow { color: darkgoldenrod; }
  
    .concert-title {
      text-align: left;
      padding-top: 16px;
    }
    .concert-name {
      color: var(--text-clr);
      font-size: 18px;
      font-weight: 700;
    }
  
    .concert-detail {
      text-align: left;
      .concert-tag {
        line-height: 1;
        padding: 5px 0px;
        a {
            color: var(--secondary-text-clr);
            font-size: 14px;
            text-decoration: none;
        }
      }
      .concert-detail-box {
        border: var(--text-clr) 0.1rem solid;
        width: fit-content;
        padding: 0px 10px;
        border-radius: 20px;
        margin: 6px 0px;
        font-size: 14px;
        i {
          padding: 0px 5px;
        }
      }
    }
  
    .concert-more-detail {
      margin-top: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      height: 36px;
      flex-grow: 1;
      color: var(--base-clr);
      text-decoration: none;
    }

    .concert-more-detail:has(.a:only-child) {
      justify-content: flex-end;
    }
    .concert-more-detail {
      justify-content: flex-end;
    }

    .concert-more-detail a {
      background: var(--secondary-text-clr);
      color: var(--base-clr);
      padding: 6px 25px;
      border-radius: 30px;
      text-decoration: none;
      flex: 1;
      /* margin: 0 5px; */
      text-align: center;
      margin-top: auto;
    }
    .concert-more-detail a:hover {
      color: var(--accent-clr);
      background: var(--hover-clr);
    }
  
  }
}

/* popup */
#popup, .popup {
  display: none; /* Make sure to change to 'flex' when opening */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* display: flex; */
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .popup-content {
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Align items in a column */
    align-items: center; /* Center items horizontally */
    justify-content: center;
    height: 80%; /* Set a fixed height for the popup content */
    max-width: 90%; /* Adjust maximum width of the content */
    overflow: hidden; /* Hide overflow to avoid scrollbars */

    img {
      max-width: 100%; /* Ensure the image does not exceed the popup width */
      max-height: 100%; /* Ensure the image does not exceed the popup height */
      object-fit: contain; /* Maintain aspect ratio */
      cursor: pointer;
    }

    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.7);
      border: none;
      font-size: 24px;
      color: #333;
      cursor: pointer;
      padding: 10px;
      border-radius: 50%;
    }
    .prev-btn {
      left: 10px;
    }
    
    .next-btn {
      right: 10px;
    }
  }
}


/* footer */
.footer {
  padding-top: 20px;
  padding-bottom: 10px;
  text-align: center;
  .copyright p a {
    text-decoration: none;
    color: inherit;
  }
}


@media (max-width: 1240px) {

  #profile,
  .section-container {
      display: block;
  }

  section,
  .section-container {
      height: fit-content;
  }

  section {
      margin: 0 5%;
  }

  #about {
    grid-template-columns: 1fr;
    grid-area: 1rem;
    text-align: center;
    margin-top: 20px;
    padding-bottom: 50px;

    .about-img {
      img {
        text-align: center;
        width: 300px;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto;
      }
    }
    .about-text {
      .socials-container {
        display: flex;
        justify-content: center;
      }
    }
  }
}

@media(max-width: 800px){
  body{
    grid-template-columns: 1fr;
  }
  main{
    padding: 2em 1em 60px 1em;
  }
  .container{
    border: none;
    padding: 0;
  }
  #sidebar{
    height: 60px;
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--line-clr);
    padding: 0;
    position: fixed;
    top: unset;
    bottom: 0;

    > ul{
      padding: 0;
      display: grid;
      grid-auto-columns: 60px;
      grid-auto-flow: column;
      align-items: center;
      overflow-x: scroll;
    }
    ul li{
      height: 100%;
    }
    ul a, ul .dropdown-btn{
      width: 60px;
      height: 60px;
      padding: 0;
      border-radius: 0;
      justify-content: center;
    }

    ul li span, ul li:first-child, .dropdown-btn svg:last-child{
      display: none;
    }

    ul li .sub-menu.show{
      position: fixed;
      bottom: 60px;
      left: 0;
      box-sizing: border-box;
      height: 60px;
      width: 100%;
      background-color: var(--hover-clr);
      border-top: 1px solid var(--line-clr);
      display: flex;
      justify-content: center;

      > div{
        overflow-x: auto;
      }
      li{
        display: inline-flex;
      }
      a{
        box-sizing: border-box;
        padding: 1em;
        width: auto;
        justify-content: center;
      }
    }
  }
}

@media (max-width:768px){
  .container{
    padding:20px;
  }
}