.logo-shine { position: relative; display: inline-block; overflow: hidden; }
.logo-shine::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-25deg); animation: shine 3s infinite; }
.logo-shine::after { content: ""; position: absolute; right: -2px; top: -100%; width: 3px; height: 100%; background: linear-gradient(to bottom, transparent, #00eaff, transparent); animation: borderRun 2s linear infinite; }
.logo-shine img { display: block; }
@keyframes shine {
  0% { left: -120%; }
  100% { left: 120%; }
}
@keyframes borderRun {
  0% { top: -100%; }
  100% { top: 100%; }
}
.header-top { background: #ffb805; height: 45px; font-family: var(--font-main) }
.header-solid { position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: #fff; z-index: 9999; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); display: flex; justify-content: center; align-items: center; animation: fadeSlideDown 1s ease-in-out; }
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.menu.header-solid .logo { width: 100px; }
.topbar-header {display: flex;align-items: center;justify-content: space-between;height: 100%;font-weight: 700;}

.slogan-wrapper {width: 50%;overflow: hidden;position: relative;font: 500 16px / 1.5 var(--font-main);}
.slogan-box { white-space: nowrap; font-size: 16px; color: #333; animation: runText 12s linear infinite; }

.right-box { display: flex; align-items: center; background: #222; color: #fff; height: 45px; justify-content: flex-end; position: relative; top: 5px; width: 18%; }

.right-box:before { content: ""; position: absolute; left: -25px; top: 0; border-top: 45px solid transparent; border-right: 26px solid #222; }
.right-box:after { content: ""; position: absolute; background: #242424; width: calc((100vw - 1216px) / 2); height: 100%; left: 100%; top: 0; }
.contact-box {display: flex;align-items: center;gap: 8px;margin-right: 20px;font-size: 16px;width: 30%;justify-content: flex-end;/* font-weight: 400; */font: 500 16px / 1.5 var(--font-main);}
.contact-box i { font-size: 20px; color: #000; transform: rotate(-30deg); }
.social-top { margin-left: 35px; }
.social-top a { color: #fff; font-size: 20px; transition: 0.3s; margin-left: 10px; }

@keyframes runText {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.menu-logo { display: flex; align-items: center; gap: 12%; transition: all .3s ease; }
.search-wrap { display: flex; align-items: center; gap: 8px; padding: 5px 10px; display: flex; width: 243px; font-family: var(--font-main); height: 43px; background: #efeeee; }
.search-wrap input { font-size: 13px; font-style: italic; color: #000000; text-indent: 20px; background: none; border: none; outline: none; padding: 0; margin: 0; }
.search-wrap p { margin: 0; padding-left: 35px; }

/*arrow*/
.control-slideshow svg { width: 20px !important; height: 20px; fill: #fff; transition: all 0.3s; }

/*about*/
.abq-about { background: linear-gradient(90deg, #e3e3e3 6.3%, #fff 51.52%, #e1e1e1 93.27%); text-align: center; padding: 60px 0; padding: 80px 0; text-align: center; position: relative; }
.abq-container { max-width: 1200px; margin: 0 auto; }
.abq-container::after { content: ""; position: absolute; background: url(../images/bg-about.png) no-repeat; width: 854px; height: 431px; top: 0; left: calc(50% - 854px / 2); }

/* header */
.abq-slogan { font: 500 20px / 1.3 var(--font-Poppins); color: #242423; }
.abq-title { font: 700 64px / 1.5 var(--font-Poppins); color: #feb906; text-transform: uppercase; margin-bottom: 24px; }

/* box content */
.abq-about-box { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.6); box-shadow: 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07); padding: 50px 130px 60px; }
.abq-about-desc { font: 400 16px / 26px var(--font-Poppins); color: #2d2c2c; margin-bottom: 30px; }
.abq-about-heading { font-size: 20px; margin-bottom: 20px; }
.abq-about-heading span { color: #000; font-weight: 700; }
.abq-about-text { font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 15px; }

/* button */
.abq-btn-wrap { margin-top: 25px; }

/* feature list */
.abq-feature-list { display: flex; gap: 30px; justify-content: space-between; }
.abq-feature-item { display: flex; align-items: flex-start; gap: 15px; text-align: left; }
.abq-flex { display: flex; align-items: flex-start; gap: 15px; }
.abq-feature-list.slick-initialized .slick-slide { cursor: pointer; background: transparent; padding: 30px 10px 20px 26px; text-align: left; border-top: 3px solid var(--clr-main); transition: all .6s ease; transform-origin: right; }
.abq-feature-list.slick-initialized .slick-slide { margin:0 5px; }
.abq-feature-item h4 { font: 600 18px / 1.5 var(--font-main); color: #242423; margin-bottom: 15px; }
.abq-feature-item p { font: 400 14px / 20px var(--font-main); color: #3e3e3d; }

/*hover*/

/* hover */

.abq-feature-list .slick-slide img { transition: transform 0.6s ease; }

/* hover */
.abq-feature-list .slick-slide:hover { background: #feb906; }
.abq-feature-list .slick-slide:hover h4, .abq-feature-list .slick-slide:hover p { color: #000; }
.abq-feature-list .slick-slide:hover img { transform: rotateY(360deg); }

/*8*/
.abq-product { padding: 60px 0; }
.abq-container { max-width: 1200px; margin: auto; padding: 0 10px; }
.abq-product-layout { display: flex; gap: 30px; }
.abq-product-layout { display: flex; gap: 30px; align-items: stretch; }

.abq-product:nth-child(even) .abq-product-layout { flex-direction: row-reverse; }

/* banner */
.abq-product-banner { position: relative; overflow: hidden; flex-shrink: 0; width: 320px; height: 410px; }
.abq-product-banner img { width: 100%; height: 100%; object-fit: cover; }
.abq-banner-content { position: absolute; right: 0; bottom: 24px; left: 0; text-align: center; z-index: 1; padding: 0 24px; z-index: 2; }
.abq-banner-content span { position: relative; isolation: isolate; cursor: pointer; display: flex; justify-content: center; align-items: center; background: #feb906; width: 183px; height: 46px; font: 500 17px / 1.5 var(--font-main); color: #242423; transition: all 0.6s ease-out; }
.abq-banner-content span::before { content: ""; position: absolute; border-bottom: 13px solid transparent; border-left: 16px solid #242423; top: 0; left: 0; z-index: 1; }
.abq-banner-content span::after { content: ""; position: absolute; width: 0; height: 100%; background: #242423; transition: all 0.6s ease-out; transform-origin: right; left: 0; z-index: -1; }
.abq-banner-content span:hover::after { width: 100%; }
.abq-banner-content span:hover { color: #fff; }
.abq-btn-more { display: inline-block; animation: glowing 1.5s infinite; }
@keyframes glowing {
  0% { background-color: var(--maincolor); box-shadow: 0 0 5px var(--maincolor); }
  50% { background-color: #242423; box-shadow: 0 0 10px #242423; }
  100% { background-color: var(--maincolor); box-shadow: 0 0 5px var(--maincolor); }
}

/* right */
.abq-product-content { flex: 1; min-width: 0; }

/* title */
.abq-product-header { display: flex; justify-content: space-between; align-items: center; background: #fff; box-shadow: 0px 4.529px 3.623px 0px rgba(0, 0, 0, 0.02), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 30.147px 24.118px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07); padding: 8px 5px 10px 0; margin-bottom: 21px; position: relative; }
.abq-product-header::before { content: ""; position: absolute; width: 9px; height: 19px; background: #feb906; left: 0; top: calc(50% - 19px / 2); z-index: 1; }
.abq-product-title { display: flex; align-items: center; gap: 10px; }
.abq-product-title h2 { font: 500 20px / 1.5 var(--font-main); color: #feb906; text-transform: uppercase; padding: 0 20px; }

/* slick */
.product-list { width: 100%; }
.product-list .slick-track { display: flex !important; }
.product-list .slick-slide { padding-right: 20px; box-sizing: border-box; height: auto !important; }

/* product */
.item-product { width: 100%; }
.abq-product-item { position: relative; text-align: center; border: 1px solid #ede5e5; background: #fff; box-shadow: 0px 2px 0.2px 0px rgba(0, 0, 0, 0.03); padding: 11px 11px 0; transition: all 0.5s ease; }
.abq-product-item:hover { border-color: #feb906; }

/* image */
.abq-product-img { width: 100%; height: 200px; overflow: hidden; }
.abq-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* info */
.abq-product-info { padding: 16px; text-align: center; }
.abq-product-info h3 { font: 500 16px / 1.5 var(--font-main); color: #242423; text-transform: uppercase; transition: 0.3s ease; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.abq-product-info p { font-size: 14px; font-family: var(--font-main); }
.abq-product-info span { color: #d00; font-weight: 600; }

/**/
.duongcheosang { transform: scale(1, 1); overflow: hidden; transition: width 2s, height 2s, transform 2s; cursor: pointer; }
.duongcheosang:hover:before { transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg)
translate3d(0, 120%, 0); }
.duongcheosang:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); content: ""; z-index: 10; transition: transform 0.6s; transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg)
translate3d(0, -120%, 0); }
.duongcheosang2 { overflow: hidden; position: relative; }
.duongcheosang2:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: rgba(67, 69, 113, 0); transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; }
.duongcheosang2:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: rgba(67, 69, 113, 0); transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; }
.duongcheosang2:hover:before { right: 50%; left: 50%; width: 0; background: rgba(255, 255, 255, 0.5); }
.duongcheosang2:hover:after { height: 0; top: 50%; bottom: 50%; background: rgba(255, 255, 255, 0.5); }
.duongcheosang3 { position: relative; overflow: hidden;}
.duongcheosang3::before { pointer-events: none;content: ""; background: rgba(255, 255, 255, 0.5); bottom: 0; left: 0; position: absolute; transform: rotate(90deg); -khtml-opacity: 1; -o-opacity: 1; -ms-opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; width: 0; height: 0; z-index: 1; }
.duongcheosang3::after {pointer-events: none; content: ""; background: rgba(255, 255, 255, 0.5); top: 0; right: 0; position: absolute; transform: rotate(90deg); -khtml-opacity: 1; -o-opacity: 1; -ms-opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; width: 0; height: 0; z-index: 2; }
.duongcheosang3:hover::before, .duongcheosang3:hover::after { transform: rotateY(180deg); transition-duration: 1.3s; -khtml-opacity: 0; -o-opacity: 0; -ms-opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; height: 100%; width: 100%; }
.scale-img { overflow: hidden; display: block; }
.scale-img img { -webkit-transition: 0.3s ease-out !important; -moz-transition: 0.3s ease-out !important; -ms-transition: 0.3s ease-out !important; -o-transition: 0.3s ease-out !important; transition: 0.3s ease-out !important; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
.scale-img:hover > img { -webkit-transition: 0.3s ease-out !important; -moz-transition: 0.3s ease-out !important; -ms-transition: 0.3s ease-out !important; -o-transition: 0.3s ease-out !important; transition: 0.3s ease-out !important; -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
.abq-product-item:hover { border-color: var(--maincolor); }
.abq-product-item:hover .abq-product-info h3 { color: red; }
.abq-product-banner::before { content: ""; position: absolute; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%); width: 320px; height: 320px; top: auto; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; }

/*video*/
.video-section { position: relative; }
.video-wrapper { position: absolute; z-index: 2; max-width: 1200px; margin: auto; display: flex; align-items: center; gap: 80px; top: 40%; left: 25%; }

/* LEFT */
.video-left { flex: 1; padding: 0 0 150px 0; }
.video-play { height: 130px; background: url("../images/play-video.png") no-repeat center; background-size: contain; cursor: pointer; }
.video-title { font: 600 45px / 1.5 var(--font-Poppins); color: #FEB906; text-transform: uppercase; }

/* RIGHT */
.video-right { flex: 1.5; }
.video-slider { background: rgba(0, 0, 0, 0.5); padding: 15px; display: flex; gap: 15px; }
.video-item { width: 150px; overflow: hidden; padding: 5px; }
.video-item img { width: 100%; height: 100px; object-fit: cover; transition: 0.4s; }
.video-item:hover img { transform: scale(1.05); }
.service-section { padding: 60px 0; }
.service-slick { padding: 0 40px 60px 0; margin: 0 -40px -60px 0; }
.service-heading { text-align: center; background: url(../images/title-main.png) bottom no-repeat; padding-bottom: 20px; margin-bottom: 30px; }
.service-heading span { font: 600 16px / 1.3 var(--font-Poppins); color: #514F4F; text-transform: uppercase; }
.service-heading h2 { font: 600 45px / 1.5 var(--font-Poppins); color: #FEB906; text-transform: uppercase; }

/* card */
.service-box { display: flex !important; margin: 0 5px; }

/* image */
.service-image { flex: 1; }
.service-image img { width: 100%; height: 100%; object-fit: cover; }

/* content */
.service-text { flex: 1; background: #fff; box-shadow: 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07); padding: 25px 16px 40px 20px; position: relative; }
.service-text h3 { font: 500 16px/26px var(--font-Poppins); color: #242423; text-transform: uppercase; margin-bottom: 0.5rem; transition: 0.3s ease;overflow: hidden; display: -webkit-box; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.service-date { font: 400 13px / 20px var(--font-main); color: #3e3e3d; margin-bottom: 1rem; }
.service-text p { font: 400 14px / 20px var(--font-main); color: #3e3e3d; margin-bottom: 23px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.service-btn { background: #f5a200; padding: 10px 22px; display: inline-block; color: #000; font-weight: 600; text-decoration: none; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }
.service-box:hover .service-text h3 { color: red; }

/**/
.certificate-section { background: #f5f5f5; padding: 80px 0; }

/* title */
.certificate-title { text-align: center; margin-bottom: 50px; }
.certificate-title span { display: block; font-size: 14px; color: #555; letter-spacing: 2px; }
.certificate-title h2 { font-size: 40px; color: #f5a200; font-weight: 700; margin-top: 10px; }

/* slider */
.certificate-slider { margin: 0 -12px; }
.certificate-item { padding: 12px; }
.certificate-item a { display: block; background: #fff; padding: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); transition: 0.3s; }
.certificate-item img { width: 100%; height: auto; display: block; }
.certificate-item a:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); }

/*footer*/
.site-footer { position: relative; background: url("../images/bg-footer.png") center/cover no-repeat; color: #fff; padding: 80px 0 0 0; }
.footer-menu-item { padding: 0 25px; display: grid; grid-template-columns: 13.42% 40% minmax(0, 1fr); gap: 0 40px; }
.footer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.footer-inner { position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 3fr; gap: 40px; margin-bottom: 40px; font-family: var(--font-main); }
.footer-logo { width: 140px; margin-bottom: 20px; }
.footer-text { line-height: 1.6; margin-bottom: 10px; }

/* title */
.footer-col h3 {font: 500 15px / 1.5 var(--font-main);color: #ffffff;text-transform: uppercase;margin-bottom: 1rem;font: 500 15px / 1.5 var(--font-main);}
.footer-col ul { list-style: none; padding: 0; margin: 0; text-transform: capitalize; }
.footer-col li { margin-bottom: 10px; transition: 0.5s ease; }
.footer-col a {color: #fff;text-decoration: none;transition: 0.3s;font: 400 15px / 20px var(--font-main);}
.footer-col a:hover { color: #f6a800; }
.footer-col li:hover { color: #f6a800; transform: translateX(10px); }

/* social */
.footer-social { display: flex; justify-content: space-between; align-items: center; }
.footer-social h4 { font: 500 20px / 1.5 var(--font-Poppins); color: #faf7f7; margin-right: 22px; }
.social-icons { display: flex; gap: 15px; margin-left: 65px; font-size: 20px; }
.footer-company { text-align: center; }
.copyright { text-align: right; font: 400 15px / 1.5 var(--font-main); color: #ffffff; padding: 20px 0; }
.copyright span{font-weight: 700}
.social-icons a { width: 42px; height: 42px; border: 1px solid #f6a800; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: 0.5s; }

/* copyright */
.footer-bottom { text-align: center; margin-top: 20px; font-size: 14px; color: #ddd; }
.footer-info { display: flex; align-items: center; gap: 0 13px; }
.footer-info img { flex-shrink: 0; }
.footer-info .info span { font: 500 16px / 1.5 var(--font-main); color: #feb906; }
.footer-info .info p { font: 500 18px / 1.5 var(--font-main); color: #ffffff; }
.footer-line { width: 1px; height: 41px; background: #565656; }
.ft-ct-box { padding-bottom: 70px; }
.map-content iframe { width: 100%; }
.footer-social .line { flex: 1 1 auto; height: 1px; background: #555; }
.social-icons a:hover { transform: translateY(-10px); }
.banner-product img { width: 100%; height: 100%; object-fit: cover; }
.control-pro-detail svg{
  display: none;
}
/* responsive */
@media (max-width:992px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
   .abq-about-box { padding: 30px 30px; }
  .abq-about { padding: 30px 0; }
  .abq-container::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-social { flex-direction: column; align-items: flex-start; }
  .social-icons { margin-left: 0; }
  .copyright { text-align: left; }
  .abq-slogan { font-size: 20px; }
  .abq-title { font-size: 28px; }
  .abq-banner-content { position: static; }
  .abq-product-banner { display: none; }
  .video-section { padding: 0; }
  .video-section img { height: 430px; object-fit: cover; }
  .video-wrapper { top: 4%; display: flex; flex-direction: column; left: 50%; transform: translateX(-50%); }
  .video-title { font-size: 24px; }
  .video-right { width: 410px; height: 140px; position: absolute; bottom: -65px; left: 50%; transform: translateX(-50%); }
  .video-slider.slick-initialized .slick-slide { height: 115px; width: 150px; }
  .video-slider { padding: 5px; }
  .video-item img { width: 100%; height: 100%; }
  .service-slick.slick-initialized .slick-slide { display: flex; flex-direction: column; }
  .abq-banner-content span { width: 156px; height: 45px; }
  .service-text .abq-banner-content { margin-left: -25px; }
  .ft-ct-box { flex-direction: column; }
  .footer-line { display: none; }
  .footer-menu-item { padding: 0 5px; gap: 10px; }
  .service-heading h2 { font-size: 24px; }
  .service-section { padding: 30px 0; }
  .abq-product-header { flex-direction: column; align-items: flex-start; padding: 0 10px; }
  .cat-list-nav { width: 250px; }
}

.menu_top ul li{
    position: relative;
}

.menu_top ul li:has(ul) > a::after{
    position: absolute;
    content:"";
    width:7px;
    height:7px;
    border-right:2px solid #000;
    border-bottom:2px solid #000;
    transform:rotate(45deg);
    display:inline-block;
    margin-left:8px;
    transition:0.3s;
    top:15px;
    right: 8px;
}
.menu_top ul li ul li:hover > a::after{
    transform:rotate(-45deg);
}