.social__header li { width: 44px; height: 44px; background: var(--color-white); border-radius: 50%; } 
.wrap__productL { padding: 15px 0; background: #F3FBFF; } 
.image__list { position: relative; z-index: 1; } 
.image__list:hover::after { position: unset; content: none; } 
.image__list::after { position: absolute; content: ""; background: linear-gradient(180deg, rgba(214, 51, 37, 0.00) 61.4%, #D63325 100%); width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; } 
.name__list { padding: 0 5px 25px 5px; position: absolute; left: 0; right: 0; bottom: 0px; text-align: center; font-family: "UTM Iron Gothic"; font-size: 35px; color: #fff; text-transform: uppercase; z-index: 1; } 

/*  DETAIL */
.menu__detail a{color: var(--color-title) !important;}
.menu__detail a:hover{color: var(--color-hover) !important;}
.menu__detail .search-res .icon-search{color: var(--color-title);}
.menu__detail{position: unset;}

.news__info__detail{margin-top: 10px;}
.news__info__detail .col__time{width: 65px;height: 80px; position: relative; text-align: center; background: var(--color-main);display: flex;justify-content: center;align-items: center;flex-direction: column;}
.news__info__detail .col__inner{width: calc(100% - 80px);margin-top: 15px;}
.news__info__detail .col__time span{font-family: var(--font-bold);font-size: 20px; color: #fff;}
.news__info__detail .col__time p{font-family: var(--font-regular);font-size: 14px; color: #fff;}
.col__inner .news__name a{font-family: var(--font-medium);font-size: 16px;color: #000;}
.col__inner .news__desc{font-family: var(--font-regular);font-size: 13px;-webkit-line-clamp: 4;color: #363636;line-height: 25px;margin: 10px 0;min-height: 100px;}
.read__more__detail{width: 130px;height: 40px;line-height: 40px;text-align: center;border-radius: 30px;border: 1px solid var(--color-main);text-align: center;position: relative;}
.read__more__detail a{font-family: var(--font-regular);font-size: 13px;line-height: 25px;color: #000;}
.read__more__detail::after{position: absolute;content: "";width: 49px;background: var(--color-main);height: 1px;top: 50%;left: -49px;}
.news__info__detail .col__time::after{position: absolute;content: '';background: var(--color-main);width: 1px;height: 100px;bottom: -100px;left: 0;right: 0;margin: auto;}

.read__more__detail:hover{background: var(--color-main);}
.read__more__detail:hover a{color: #fff;}
.read__more__detail:hover svg path{fill: #fff !important;}



.wrap__vision{background: url(../images/set/bg-vision.png);background-size: cover;}
.wrap__vision .line-text img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(102%) contrast(102%);}
.image__vision{width: 280px;height: 280px;margin: auto;border-radius: 50%;background: #404348;padding: 8px;border: 2px solid #8a8b8d;}
.info__vision{margin-top: 25px;}
.info__vision .name__vision a{font-family: var(--font-medium);font-size: 15px;color: #fff;line-height: 30px;}
.desc__vision{font-family: var(--font-regular);font-size: 13px;color: #7D7D7D;font-size: 13px;line-height: 25px;}
.info__vision .read__more a{font-family: var(--font-regular);font-size: 13px;color: #fff;}

.fb-page{margin-top: 20px;}
.fb-page iframe{border-radius: 10px;}

/* ABOUT */
.wrap__aboutus { position: relative; z-index: 1; padding-bottom: 120px; } 
.wrap__aboutus::after { position: absolute; content: url(../images/set/after-aboutus.png); bottom: 20px; right: 50px; } 
.aboutus-image { z-index: 1; } 
.title__aboutus { font-size: 50px; color: var(--color-title); font-family: var(--font-custom-v2); margin-bottom: -20px; } 
.name__aboutus { font-size: 70px; color: var(--color-main); text-transform: uppercase; font-family: var(--font-custom); } 
.slogan__aboutus { font-family: "Roboto Condensed Regular"; font-size: 30px; color: var(--color-title); font-size: 30px; margin: 10px 0 25px 0; } 
.desc__aboutus { -webkit-line-clamp: 7; font-size: 14px; line-height: 30px; margin-top: 15px; font-family: var(--font-regular); margin-bottom: 40px; } 
.wrap__aboutus .btn-custom ,.aboutus__detail .btn-custom  { width: 285px; height: 50px; line-height: 50px; font-family: "Roboto Condensed Regular"; font-size: 16px; position: relative; } 
.wrap__aboutus .btn-custom::after, .aboutus__detail .btn-custom::after { border-bottom: 1px solid #000; position: absolute; content: ''; left: 0; right: 0; bottom: -10px; } 
.wrap__aboutus .col__left { position: relative; } 
.aboutus__image { position: relative; z-index: 1; width: 460px; height: 540px; } 
.aboutus__image img { border-radius: 0px 100px; } 
.aboutus__image::after { position: absolute; content: ""; width: 470px; height: 550px; border-radius: 0px 100px; border: 1px solid #1D1D1D; z-index: -1; top: -10px; left: -10px; } 
.aboutus__image__v2 { position: relative; margin-bottom: -80px; z-index: 1; width: 340px; height: 450px; margin-left: -200px; } 
.aboutus__image__v2 img { border-radius: 0px 100px; } 
.aboutus__image__v2__after { position: relative; } 
.aboutus__image__v2__after::after { position: absolute; content: ""; width: 330px; height: 450px; border-radius: 0px 100px; border: 1px solid #1D1D1D; z-index: -1; top: 10px; left: 10px; } 


/* */

.wrap__policy { background: #F3FBFF; } 
.section__policy { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 1; } 
.section__policy::after { position: absolute; content: url(../images/set/around-policy.png); left: 100px; right: 0; top: 40px; z-index: -1; } 
.items__policy { width: 250px; justify-content: space-between; } 
.logo__policy { width: 256px; height: 256px; border: 1px solid #000; display: flex; align-items: center; justify-content: center; background: #F3FBFF; } 
.items__policy .col__image { width: 100px; border-radius: 140px 140px 0px 0px; background: #fff; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); } 
.items__policy .col__info { width: calc(100% - 110px); } 
.items__policy .col__image .image { margin: 10px auto 0 auto; width: 90px; height: 90px; background: var(--color-main); border-radius: 50%; display: flex; align-items: center; justify-content: center; } 
.items__policy .col__image .numb { font-family: var(--font-medium); font-size: 15px; text-align: center; color: #000; margin: 10px 0; } 
.name__policy { font-family: var(--font-bold); font-size: 14px; color: #000; -webkit-line-clamp: 1; margin-bottom: 15px; text-transform: capitalize; } 
.name__policy a { font-family: var(--font-bold); font-size: 14px; color: #000;  text-transform: capitalize; } 
.desc__policy { font-family: var(--font-regular); font-size: 13px; color: #585858; line-height: 20px; } 


.main__policy { max-width: 1150px; margin: auto; } 
.grouped-policy { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; width: 100%; margin-top: 90px; } 
.grouped-policy .items__policy { margin-top: 25px; } 

/* */
.image__delicious { width: 285px; height: 285px; background: url(../images/set/bg-items.png); background-size: 100% 100%; margin: auto; display: flex; justify-content: center; align-items: center; } 
.name__delicious{margin: 15px 0 10px 0 ;}
.name__delicious a{font-family: "Roboto Condensed Regular"; font-size: 16px;text-transform: capitalize;color: var(--color-title);-webkit-line-clamp: 1;}
.desc__delicious{-webkit-line-clamp: 2;font-family: var(--font-regular);color: #8B8B8B;font-size: 13px;line-height: 25px;}

/* VIDEO */
.wrap__video { position: relative; z-index: 11; } 
.play { left: 0; right: 0; bottom: 0; margin: auto; display: flex; flex-direction: column; justify-content: center; height: 100%; width: 50%; align-items: center; /* padding: 15px; */ } 
.play img { padding: 10px; } 

/* ALBUM */
.wrap__album { position: relative; z-index: 1; } 
.main__album { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); } 
.items__album:nth-child(1) { } 


/* CRITICAL */
.criteria__name { font-family: var(--font-bold); font-size: 15px; color: var(--color-title); margin-bottom: 10px; } 
.criteria__name .text-split { -webkit-line-clamp: 1; } 
.criteria__desc { color: var(--color-title); font-family: var(--font-regular); font-size: 13px; -webkit-line-clamp: 2; } 
.criteria .criteria__image { transition: all linear 0.3s; width: 95px; height: 95px; background: var(--color-main); border-radius: 50%; display: flex; justify-content: center; align-items: center; } 
.criteria:hover .criteria__image { transform: rotateY(180deg); transition: all linear 0.3s; } 
.criteria__info { width: calc(100% - 110px); } 


/* NEWS */
.wrap__news{background: #F3FBFF;}
.main__news{padding-bottom: 10px;border-bottom: 1px solid  rgba(157, 157, 157, 0.20) !important;margin-bottom: 10px;}
.main__news .image{width: 180px;}
.news__info { width: calc(100% - 195px); } 
.news__time{font-family: var(--font-regular);font-size: 12px;color: #818181;line-height: 25px;}
.news__info .news__name a { font-size: 16px; color: var(--color-title); -webkit-line-clamp: 1; } 
.news__info .news__desc { font-size: 14px; color: #7C7C7C; line-height: 25px; -webkit-line-clamp: 2; } 
.read__more{display: flex;justify-content: end;align-items: center;color: #606060;font-family: var(--font-regular);font-size: 13px;margin-top: 5px;}
.read__more span{margin-left: 10px; color: #fff;display: flex; justify-content: center; align-items: center; width: 25px;height: 25px;border-radius: 50%;background: var(--color-main);}
.video-image img{height: 475px;}

/* FORM */
.wrap__form { } 
.title__form { text-align: center; font-family: var(--font-bold); text-transform: uppercase; color: var(--color-title); } 
.validation__newsletter ::placeholder { color: #000 !important; font-family: var(--font-regular); font-size: 14px; } 
.newsletter__input { position: relative; padding: 0 5px !important; } 
.newsletter__input input { padding: 0.35rem 15px; height: 45px; font-size: 14px; color: #333; background: none; border-radius: 0; border: 1px solid #000; } 
.col__input { margin-bottom: 10px; } 
.col__content { padding: 0 5px !important; } 
.col__content textarea { padding: 0.35rem 15px; height: 90px; background: none; border-radius: 0; border: 1px solid #000; } 
.newsletter__button { background: #fff; border: none !important; border-radius: 0 !important; margin: 20px auto 0 auto; width: 150px; height: 50px; line-height: 50px; } 
.newsletter__button input[type="submit"] { color: var(--color-main) !important; font-family: var(--font-regular); font-size: 15px; background: none; border: none; border-color: unset; } 
.newsletter__button:hover { background: var(--color-main); } 
.newsletter__button:hover input[type="submit"] { color: #fff !important; } 
.col__submit { padding: 0 5px !important; margin: auto; text-align: center; } 

/* FOOTER */
.footer__article { background: var(--color-main);  } 
.footer__article .wrap-content { padding: 60px 15px; } 
.footer__name { text-transform: uppercase; font-size: 18px; margin-bottom: 1rem; } 
.footer__info{margin-top: 10px;}
.footer__title { text-transform: uppercase; font-size: 15px; margin-bottom: 1rem;  color: #fff;}
.name__footer{font-family: "Roboto_Black"; font-size: 29px;text-transform: uppercase;color: #fff;} 
.footer__ul { list-style: disc; color: #fff; padding: 0 0 0 20px; margin: 0px; } 
.footer__ul li { margin-bottom: 10px; } 
.footer__ul li:last-child { margin-bottom: 0px; } 
.footer__ul li a { color: #fff; font-family: var(--font-regular);font-size: 13px;} 
.footer__ul li a:hover { text-decoration: underline; } 
.footer__powered { color: #ffffff; background-color: var(--color-main); } 
.footer__powered .wrap-content { padding-top: 19px; padding-bottom: 19px; font-family: var(--font-regular); font-size: 13px; border-top: 1px solid #ffffff2e; } 
.footer__statistic { text-align: right; } 
.footer__statistic span { padding-right: 10px; } 
.footer__statistic span:last-child { padding-right: 0px; } 
.line__bottom { position: relative; padding-bottom: 10px; } 
.line__bottom::after { position: absolute; border-bottom: 2px solid #fff; content: ""; left: 0; bottom: 0; width: 35px; } 
.social__footer li { width: 50px; height: 50px; border-radius: 50%; background: #fff; } 


/* CSS CUSTOM */
::-webkit-scrollbar { width: 3px; } 
::-webkit-scrollbar-track { background: #ccc; } 
::-webkit-scrollbar-thumb { background: var(--color-main); } 
::-webkit-scrollbar-thumb:hover { background: var(--color-hover); } 
.product .i_left { position: absolute; height: 0; border-radius: 0 50px; width: 2px; left: 0; top: 0; background: -webkit-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_right { position: absolute; height: 0; width: 2px; right: 0; bottom: 0; background: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_top { position: absolute; height: 2px; width: 0; right: 0; top: 0; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, right top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_bottom { position: absolute; height: 2px; width: 0; left: 0; bottom: 0; background: -webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, right top, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product:hover .i_left { height: 100%; bottom: 0; top: inherit } 
.product:hover .i_top { width: 100%; left: 0 } 
.product:hover .i_right { height: 100%; top: 0; bottom: inherit } 
.product:hover .i_bottom { width: 100%; right: 0; left: inherit } 
.color__hover:hover { color: var(--color-hover) !important; }