/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.image-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 30px;
}

.image-row img {
      width: 186px;
      height: 405px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }

.image-row img:hover {
  transform: scale(1.05);
  border-color: #00bcd4;
  box-shadow: 0 0 20px 5px rgba(0, 188, 212, 0.6); /* ánh sáng xanh dương */
}
.circle-container {
      position: relative;
      width: 1000px;
      height: 600px;
      margin: auto;
    }

    .center-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 50%;
      width: 500px;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: bold;
      color: #673ab7;
      
    }

    .item {
      position: absolute;
      width: 220px;
      text-align: center;
      padding: 0;
    }

    .softbiz-button {
      background: linear-gradient(to bottom, #9b59b6, #6a1b9a);
      color: white;
      padding: 5px 5px;
      border: none;
      border-radius: 12px;
      font-size: 14px;
	  line-height:20px;
      font-weight: bold;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      cursor: pointer;
      text-align: center;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
      display: block;
      width: 100%;
    }

    .softbiz-button:hover {
      background: linear-gradient(to bottom, #ab69d6, #7a2bac);
      box-shadow: 0 6px 12px rgba(0,0,0,0.3);
      transform: scale(1.03);
    }

    /* Position each item around the circle */
    .item1 { top: 25%;left: 12%; transform: translate(-50%, -50%); }
    .item2 { top: 50%; left: 12%; transform: translate(-50%, -50%); }
    .item3 { bottom: 22%; left: 12%; transform: translate(-50%, 50%); }
    .item4 { top: 25%; right: 12%; transform: translate(50%, -50%); }
    .item5 { bottom: 50%; right: 12%; transform: translate(50%, 50%); }
    .item6 { bottom: 22%; right: 12%; transform: translate(50%, 50%); }
	
.arc-layout {
		position: relative;
		width: 1000px;
		height: 250px;
		margin: 0 auto;
	}

    .arc-step {
      position: absolute;
      text-align: center;
      transition: transform 0.3s, opacity 0.3s;
    }

    .arc-step:hover {
      transform: scale(1.05);
      opacity: 0.95;
    }

    .arc-step button {
      border: none;
      border-radius: 25px;
      padding: 10px 15px;
      font-size: 13px;
      font-weight: bold;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
      background-size: 300% auto;
      background-position: left center;
      transition: background-position 0.4s ease-in-out, transform 0.3s;
      white-space: nowrap;
    }

    .arc-step button:hover {
      background-position: right center;
    }

    .arc-step.step1 button { background-image: linear-gradient(to right, #6a4b9c, #8c69d1, #6a4b9c); }
    .arc-step.step2 button { background-image: linear-gradient(to right, #76b041, #b2db78, #76b041); }
    .arc-step.step3 button { background-image: linear-gradient(to right, #6a4b9c, #8c69d1, #6a4b9c); }
    .arc-step.step4 button { background-image: linear-gradient(to right, #76b041, #b2db78, #76b041); }
    .arc-step.step5 button { background-image: linear-gradient(to right, #f68c3f, #ffc07f, #f68c3f); }
    .arc-step.step6 button { background-image: linear-gradient(to right, #d54444, #ff7e7e, #d54444); }

    .arc-step.step1 {top: 78%;left: 5%;}
    .arc-step.step2 {top: 34%;left: 8%;}
    .arc-step.step3 {top: 6%;left: 17.5%;}
    .arc-step.step4 {top: 6%;right: 16.6%;}
    .arc-step.step5 {top: 34%;right: 8.5%;}
    .arc-step.step6 {top: 78%;right: 5.6%;}

    .arc-center {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 500px;
      height: auto;
      overflow: hidden;
      
    }

    .arc-center img {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
    }
	.home-button-ttld .button {
      width: 320px;
      padding: 15px 20px;
      margin: 20px auto;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      color: white;
      border-radius: 15px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.2);
      transition: transform 0.2s;
      line-height: 1.6;
	  border:none;
    }

    .home-button-ttld .button:hover {
      transform: scale(1.05);
      cursor: pointer;
    }

    .home-button-ttld .green {
      background: linear-gradient(to bottom, #99cc66, #669933);
    }

    .home-button-ttld .purple {
      background: linear-gradient(to bottom, #cc99ff, #9966cc);
    }
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}