/* Transition All */

.control-owl button,
.carousel-comment-media .carousel-control a span,
.scale-img img,
.scale-img:hover>img,
.btn-frame .kenit-alo-circle-fill,
.support-online .kenit-alo-circle-fill {
    -webkit-transition: 0.3s all; 
    transition: 0.3s all; 
}


/* Scale IMG */

.scale-img {
    overflow: hidden;
    display: block;
}

.scale-img img {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.scale-img:hover>img {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}


/* Blink */

.blink {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* WRAP HEADER */
.flex_headertop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}
.wrap_headertop {
    position: relative;
    background: #f0f0f0;
}
.left_headertop {
    width: 190px;
    height: 25px;
    background: white;
    clip-path: polygon(7% 0%, 93% 0%, 100% 100%, 0% 100%);
    margin-bottom: -15px;
}
.center_headertop {
    font-size: 14px;
    color: var(--c2);
    flex: 1;
    font-weight: bold;
    text-transform: uppercase;
}
.right_headertop {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
    color: black;
    font-size: 14px;
    font-weight: 500;
}
.header_logo {
}
.wrap_header {width: 100%;position: relative;}

.flex_header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 115px;
}
.txt_hotline {
    color: var(--c1);
    font-family: 'font1';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}
.gr_numberp {display: flex;flex-direction: column;gap: 3px;}


/* WRAP MENU */
.menu.fix_head .flex_header {
    display: none;
}

.inid .menu {
    margin: 0;
    background: var(--c2);
}
.inid .menu {
    margin: 0;
    position: relative;
}
.inid .menu ul.menu-main {
    margin: 0;
}
.menu ul li ul li a {
  line-height: unset;
}
.menu ul li ul li {
  padding: 0 5px;
}
.fix_head .menu {
  background: var(--c1);
}
.fix_head .menu .flex_menu {
  padding-left: 0px;
}
.menu ul.menu-main {
    height: 45px;
    flex: 1;
    margin: 0 50px 0px 0px;
    position: relative;
}
.menu > .wrap-content > .flex_menu> ul.menu-main > li > a i {
    padding: 0 15px;
    font-size: 20px;
}
.menu ul li a {
    line-height: 45px;
}
.menu ul li a {
    line-height: 45px;
    padding: 0 10px;
}

.flex_menu {
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 10px;
}
.menu.fix_head {
  border-bottom: 1px solid white;
  background: var(--c2);
}
.menu ul li a::before{content: '';background: var(--c1);width: 0;left: 0;bottom: 100%;height: 2px;position: absolute;transition: all .4s linear;}
.menu ul li a:hover::before,
 .menu ul li a.active::before{
    width: 100%;
    transition: all .4s linear;
 }
 .gr_card_menu svg {
    width: 40px;
    height: 40px;
    color: white;
}
.gr_card_menu {
    position: relative;
}
.gr_card_menu span {
    width: 20px;
    height: 20px;
    background: white;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    top: 0;
    right: 0;
    color: black;
}
.right_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #F6EFE5;
    text-align: center;
    font-family: 'font1';
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.left_gthieu {
    width: 49%;
}
.txt_gthieu {
    color: #0D0D0D;
    font-family: 'font1';
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.gr_imggthieu.imggt_2 {
    display: flex;
    align-items: flex-end;
}
.gr_imggthieu.imggt_1 {
    text-align: end;
}
.gr_imggthieu.imggt_3 {
    text-align: end;
}
/* From Uiverse.io by adamgiebl */ 
.cssbuttons-io-button {
    background: transparent;
    color: black;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 17px;
    font-weight: 500;
    border-radius: 40px;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    cursor: pointer;
    border: 1px solid black;
  }
  
  .cssbuttons-io-button .icon {
    background: black;
    margin-left: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 100%;
    right: 0.3em;
    transition: all 0.3s;
  }
  
  .cssbuttons-io-button:hover .icon {
    width: calc(100% - 0.6em);
    border-radius: 40px;
    background: var(--c2);
  }
  
  .cssbuttons-io-button .icon svg {
    width: 1.1em;
    transition: transform 0.3s;
    color: white;
  }
  
  .cssbuttons-io-button:hover .icon svg {
    transform: translateX(0.1em);
  }
  
  .cssbuttons-io-button:active .icon {
    transform: scale(0.95);
  }


/* WRAP GIOI THIEU */
.flex_gthieu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right_gthieu {
    width: 49%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}
.name_gthieu {
    color: #543A14;
    font-family: 'font1';
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
}
.desc_gthieu {
    color: #0D0D0D;
    font-family: 'font1';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 10px 0;
}


/* WRAP HINH ANH */
.wraphinhanh {
    background: url(../imgs/bg_hinhanh.jpg) no-repeat;
    background-size: 100% 100%;
}
.gr_titledan {
    text-align: center;
}
.slogan_duan {
    color: #F6EFE5;
    text-align: center;
    font-family: 'font1';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.title_dan {
    color: #F6EFE5;
    text-align: center;
    font-family: 'font1';
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
}
.grid_hanhhdong {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 20px;
    margin-top: 30px;
}
a.item_hinhanh.al1 {
    grid-column: 1/5;
    grid-row: 1/2;
}
a.item_hinhanh.al2 {
    grid-column: 5/9;
    grid-row: 1/2;
}
a.item_hinhanh.al3 {
    grid-column: 9/13;
    grid-row: 1/2;
}
a.item_hinhanh.al4 {
    grid-column: 1/7;
    grid-row: 2/3;
}
a.item_hinhanh.al5 {
    grid-column: 7/13;
    grid-row: 2/3;
}
a.item_hinhanh .c4-izmir {
    width: 100%;
}

/* WRAP TIKTOK */

.gr_tiktok1 {
    height: 580px;
    overflow: hidden;
    border-radius: 40px;
}
.gr_tiktok1 .tiktok-embed {
    padding: 0;
    margin: 0;
}
.slide_tiktok {
    margin-top: 20px;
}
.gr_titlespnb span {
    width: max-content;
    position: relative;
}
.gr_titlespnb span::before{
    content: '';
    background: url(../imgs/icontiktok.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 30px;
    height: 31px;
    right: -33px;
    top: -32%;
    pointer-events: none;
}

/* WRAP KHACH HANG */
.grid_khang {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 40px;
    max-width: 950px;
    margin: 40px auto 0;
}
.wrap_khachhang .title_dan {
    color: var(--c2);
}
.wrap_khachhang .slogan_duan {
    color: black;
}
.gr_khang {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid transparent;
    padding: 5px;
    min-height: 120px;
    max-height: 120px;
}
.img_khang {
    width: 60px;
}
.grname_khang {
    width: calc(100% - 60px - 30px);
}
.gr__khang {
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.gr__khang:hover{
    background: var(--c2);
    transition: all .2s linear;
}
.gr__khang:hover .gr_khang{
    border: 1px solid white;
    transition: all .2s linear;

}
.gr__khang:hover .name_khang{
 color: white;
    transition: all .2s linear;

}
.gr__khang:hover .desc_khang{
 color: white;
    transition: all .2s linear;

}
.gr__khang:hover .img_khang img{
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    transition: all .2s linear;

}
/* WRAP Y KIEN KHACH HANG */
.flex_ykienkhang {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left_ykienkh {
    width: 58%;
}
.right_ykienkh {
    width: 40%;
}
.title_ykienkhang {
    color: var(--c2);
    text-align: center;
    font-family: 'font1';
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.grimg_ykkhang {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img_ykkhang {
    width: 70px;
    border-radius: 100%;
    overflow: hidden;
}
.grname_ykkhang {
    width: calc(100% - 70px - 20px);
}
.name_ykkhang {
    color: #543A14;
    font-family: 'font1';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.desc_ykkhang {
    color: #666;
    font-family: 'font1';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}
.grcontent_ykkhang {
    color: #0D0D0D;
    text-align: justify;
    font-family: 'font1';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    margin-top: 10px;
}
.gr_ykienkhang {
    background: white;
    padding: 10px;
    border: 10px solid black;
    border-radius: 10px;
    overflow: hidden;
}
.gr_ykienkhang:hover{
    border: 10px solid var(--c1);
    transition: all .2s linear;
  
}
/* WRAP TIN TUC */
.wrap_tintuc .title_dan {
    color: var(--c2);
}
.wrap_tintuc .slogan_duan {
    color: black;
}
.gr_nametintuc {
    margin-top: 5px;
}

.name_tintuc {color: #543A14;font-family: 'font1';font-size: 14px;font-style: normal;font-weight: 600; height: 42px;}
.date_tintuc {
    display: flex;
    align-items: center;
    gap: 10px;
    color: black;
    margin: 10px 0;
}
.desc_tintuc {
    font-size: 13px;
    font-family: 'font1';
    color: black;
}
.slide_tintuc{
    margin-top: 40px;
}
/* WRAP DANG KY NHAN TIN */
.wrap_dangkynhantin .title_dan {
    color: var(--c2);
}
.wrap_dangkynhantin .slogan_duan {
    color: black;
}
.flex_dangkynhantin {
    display: flex;
    justify-content: space-between;
}
.left_dangkynhantin {
    width: 49%;
    background: url(../imgs/bg_gtdknt.jpg) no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 50px;
    gap: 30px;
}
.right_dangkynhantin {
    width: 49%;
}
.gr_nlter {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.gr__nlter {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
.newsletter-input input {
    width: 100%;
    height: 30px;
    background: white;
    border: none;
    color: black;
    font-size: 14px;
    font-family: 'font1';
    padding: 0 10px;
}
.newsletter-input textarea {
    width: 100%;
    height: 60px;
    border: none;
    resize: none;
    padding: 0 20px;
}
.newsletter-button input {
    width: 90px;
    height: 30px;
    border-radius: 10px;
    background: #543A14;
    box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.25) inset, 0px -4px 4px 0px rgba(0, 0, 0, 0.25) inset;
    border: none;
    color: #F6EFE5;
    text-align: center;
    font-family: 'font1';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.newsletter-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.gr_imggtdknt {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gr_descgthieudangky {
    color: #FFF;
    text-align: justify;
    font-family: 'font1';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}







/* TRANG TRONG */
.name-product {
  font-size: 14px;
  color: var(--color-black);
  margin-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}


/* WRAP DANH MUC */
.pd_50{
    padding: 50px 0;
}
.gr_titlespnb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 30px;
    color: var(--c2);
    font-family: 'font2';
}

.mt_20{
    margin-top: 20px;
}

/* WRAP FOOTER */
.footer-news {
    padding-bottom: 30px;
}
.footer-copyright {
    color: white;
    padding: 30px 0;
    border-top: 1px solid white;
    text-align: center;
}
.footer-copyright a{
    color: white;
}
p.name-company1 {
    color: white;
    font-weight: bold;
}
.footer-info {
    color: white;
    font-family: 'font1';
}
ul.policy {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.policy li {
    margin-bottom: 10px;
}
ul.policy li a {
    font-size: 16px;
    color: white;
    font-family: 'font1';
}
ul.policy li a:hover{
    color: var(--c1);
    transition: all .2s linear;
}
.map_frame iframe {
    width: 100%;
    height: 210px;
}
.map_frame p {
    margin: 0;
}
.footer_map_tab {
    position: relative;
}
.wrap_map {
    position: absolute;
    width: 100%;
    top: 40px;
}
.map_items {
    padding: 7px 15px;
    background: var(--c1);
    border-radius: 40px;
    color: var(--c3);
    font-size: 16px;
    font-weight: bold;
    font-family: 'font1';
    cursor: pointer;
}
.map_items.active,
.map_items:hover{
    background: var(--c3);
    color: var(--c1);
    transition: all .2s linear;
}
/*  */








#Services {
    height: 250px;
  }
  
  ul.services {
      display: flex;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      list-style-type: none;
      width: 100%;
      min-width: 100%;
      flex-direction: column;
      gap: 10px;
  }
  
  @media only screen and (min-width: 1280px) {
      ul.services {
          flex-direction: row;
      }
  }
  
  ul.services li {
      flex: 1;
      display: flex;
      align-items: stretch;
      cursor: pointer;
      transition: all 0.35s ease;
      cursor: pointer;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      overflow: hidden;
      border-radius: 10px;
  }
  
  ul.services li.active {
      flex: 2;
      cursor: default;
  }
  
  ul.services li:before {
      content: "";
      position: absolute;
      z-index: 20;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgb(15 15 15 / 38%);
  }
  
  ul.services li.active:before {
      background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #111111 100%);
  }
  
  ul.services li h3 {
      font-weight: bold;
      white-space: nowrap;
      position: absolute;
      z-index: 30;
      opacity: 1;
      top: 50%;
      left: 50%;
      color: white !important;
      transition: top 0.35s, opacity 0.15s;
      transform-origin: 0 0;
      font-size: 24px;
      text-transform: uppercase;
      transform: translate(-50%, -50%) rotate(0deg);
  }
  ul.services li.active h3 {
      opacity: 0;
      top: 200%;
  }
  
  @media only screen and (min-width: 1280px) {
      ul.services li h3 {
          top: 100%;
          left: 50%;
          font-size: 15px;
          transform: translate(-20px, -50%) rotate(-90deg);
      }
  }
  
  ul.services li .section-content {
      position: relative;
      z-index: 30;
      opacity: 0;
      align-self: flex-end;
      width: 100%;
      transition: all 0.35s 0.1s ease-out;
  }
  
  ul.services li.active .section-content {
      opacity: 1;
  }
  
  @media only screen and (min-width: 768px) {
      ul.services li .section-content .inner {
          grid-auto-flow: column;
          grid-template-columns: calc(100% - 340px) 300px;
          grid-column-gap: 40px;
          padding: 40px;
      }
  }
  ul.services li .section-content .inner {
      position: absolute;
      display: grid;
      grid-auto-flow: row;
      grid-template-columns: 1fr;
      grid-column-gap: 20px;
      align-items: flex-end;
      left: 0;
      bottom: 0;
      padding: 20px;
      opacity: 0;
      transition: opacity 0.25s ease-out;
  }
  
  ul.services li.active .section-content .inner {
      opacity: 1;
  }
  
  ul.services li .section-content .inner .bio {
      display: grid;
      grid-auto-flow: row;
      grid-template-rows: min-content;
      grid-gap: 10px;
  }
  
  @media only screen and (min-width: 768px) {
      ul.services li .section-content .inner h2 {
          font-size: 48px;
          line-height: 48px;
      }
  }
  
  ul.services li .section-content .inner h2 {
      font-size: 36px;
      line-height: 36px;
      font-weight: 700;
      text-transform: uppercase;
  }
  
  ul.services li .section-content .inner .artist-profile-link {
      pointer-events: none;
  }
  
  ul.services li .section-content .inner .active .artist-profile-link {
      pointer-events: all;
  }
  .wrap_duan .title_dan {
    color: var(--c2);
}
  .wrap_duan .slogan_duan {
    color: black;
}
.gr_descduan {
    font-size: 14px;
    color: white;
    font-family: 'font1';
}
.grid_duan {
    margin-top: 30px;
}
ul.services li.active h4 {
    color: white;
    font-size: 18px;
}
.name_product {
    font-size: 16px;
    font-family: 'font1';
    color: var(--c2);
    font-weight: bold;
}

.grname_product {
    text-align: center;
    margin: 10px 0 0;
}
p.price-productr {
    font-size: 16px;
    color: red;
}
.name_khang {
    font-size: 18px;
    font-family: 'font1';
    font-weight: bold;
    text-transform: uppercase;
}
.menu ul li ul li a::before{
    display: none;
}
.containerr_layout.inid {
    background: white !important;
}
.gr_pocontactus textarea#content-contact {
    border-bottom: 1px solid #0000002b;
}
.gr_btniconsubmit input {
    width: 100%;
    height: 100%;
  position: absolute;
    z-index: 100;
  }
  
  .row-news.grid_news {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
.newsletter-input {
    border: 1px solid black;
    border-radius: 5px;
    overflow: hidden;
}
.newsletter-input textarea {
    padding: 10px;
}