/*
 Theme Name:   Chiic Digital Theme
 Theme URI:    https://chiicworld.com
 Description:  Child theme for Hello Elementor, customized by Chiic Digital
 Author:       Hoang Dam
 Author URI:   huuhoangdesigner@gmail.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  chiic-digital
*/

/* Add your custom styles below */

/*
 * font style 
 * */

@font-face {
  font-family: 'Gilroy';
  src: url('/wp-content/themes/chiic-digital/assets/fonts/SVN-Gilroy Regular.otf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Gilroy', sans-serif !important;
	line-height: 1.3em !important;
}


@font-face {
  font-family: 'STIXTwoText';
  src: url('/wp-content/themes/chiic-digital/assets/fonts/STIXTwoText-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STIXTwoText';
  src: url('/wp-content/themes/chiic-digital/assets/fonts/STIXTwoText-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}


body, html{
  font-family: 
    'STIXTwoText' !important;
	font-style: normal;
}

a {
  font-family: 
    'Gilroy' !important;
	font-style: normal;
}

.elementor-button {
	font-family: 'Gilroy';
}

/*
 * end font style 
 * */


/* Base color tokens (tuỳ chỉnh theo theme) */
:root{
  --color-surface-white: #fff;
  --color-just-black: #000;
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Map .button vào anchor của Elementor trong widget có class gsap-flair */
.gsap-flair .elementor-button {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 6.25rem;
  color: var(--color-just-black);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: 600;
  gap: 0.363636em;
  justify-content: center;
  letter-spacing: -0.01em;
  line-height: 1.04545;
  overflow: hidden;
  padding: 0.9375rem 1.5rem;
  position: relative;
  text-decoration: none;
  word-break: break-word;
}

/* Viền stroke như mẫu (after của anchor) */
.gsap-flair .elementor-button.button--stroke:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.125rem solid var(--color-just-black);
  border-radius: 6.25rem;
  pointer-events: none;
}

/* Label map sang .elementor-button-text */
.gsap-flair .elementor-button .elementor-button-text {
  position: relative;
  text-align: center;
  transition: color 50ms var(--ease-in-out-quart);
  z-index: 1;
}

@media (hover: hover) {
  .gsap-flair .elementor-button.button--stroke:hover .elementor-button-text {
    color: var(--color-just-black);
    transition: color 0.15s var(--ease-in-out-quart);
  }
}

/* Flair layer – là một <span class="button__flair"> sẽ được JS chèn vào */
.gsap-flair .elementor-button .button__flair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: scale(0);
  transform-origin: 0 0;
  will-change: transform;
  z-index: 0; /* dưới text, trên nền */
}

/* Chấm tròn bên trong flair */
.gsap-flair .elementor-button .button__flair:before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  aspect-ratio: 1 / 1;
  width: 170%;            /* giống mẫu */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--color-just-black);
}


/* Áp dụng cho tất cả loại nội dung chính ngay dưới #smooth-content */
body > [data-elementor-type="wp-page"],
body> [data-elementor-type="single"],
body > [data-elementor-type="archive"],
body > [data-elementor-type="search"],
body > main,
body > [data-elementor-type="single-post"]{
  /* Kéo khối nội dung lên đúng bằng chiều cao main header
     → phần đầu (hero/section đầu) sẽ nằm dưới main header */
  margin-top: calc(var(--main-header-h, 0px) * -1);
  /* Bù khoảng trống để phần còn lại bắt đầu ngay dưới main header */
/*   padding-top: var(--main-header-h, 0px); */
}

.pin-shell { will-change: transform; }