@charset "UTF-8"; :root { --primary-color: #0c2d66; --secondary-color: #ff0000; --tertiary-color: #ff8f40; --font-family: 'Noto Sans', sans-serif; --font-size: 16px; --line-height: 1.5; } 
p { padding: 0; margin: 0; display: block; } 
a { text-decoration: unset!important; } 
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } 
body { align-items: center; height: 100vh; background-color: #fff; font-family: "Noto Sans", sans-serif; } 

 @keyframes rubberBand { 
 0% { -webkit-transform:scaleX(1); transform:scaleX(1) } 30% { -webkit-transform:scale3d(1.25,.75,1); transform:scale3d(1.25,.75,1) } 40% { -webkit-transform:scale3d(.75,1.25,1); transform:scale3d(.75,1.25,1) } 50% { -webkit-transform:scale3d(1.15,.85,1); transform:scale3d(1.15,.85,1) } 65% { -webkit-transform:scale3d(.95,1.05,1); transform:scale3d(.95,1.05,1) } 75% { -webkit-transform:scale3d(1.05,.95,1); transform:scale3d(1.05,.95,1) } 
 to { -webkit-transform:scaleX(1); transform:scaleX(1) } 
 }.animate__rubberBand { -webkit-animation-name:rubberBand; animation-name:rubberBand } 
.hover_bond img, .hover_bond i,.hover_bond svg { transition: all 0.5s; } 
.hover_bond img:hover, .hover_bond i:hover,.hover_bond svg:hover { -webkit-animation: rubberBand 1s; animation: rubberBand 1s; } 


/* Trí dev */
header .banner img { width: 100%; max-height: 400px; object-fit: cover; } 
.center { max-width: 1440px; margin: 0 auto; padding: 0 15px; } 
#menu { padding: 15px 0px 15px 0px; background: linear-gradient(135deg, #2F93CC 65%, #ff0000 95%) !important; } 
.menu-left img { max-width: 300px; } 
.menu-center p { font-family: var(--font-family); font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; background: linear-gradient(105.55deg, #FFB71E 0%, #FFD97A 50%, #FFFFFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; margin: 0; text-shadow: 0 0 3px rgba(255, 255, 255, 0.25); } 
.menu-right svg { opacity: 0; pointer-events: none; } 
.menu-right { width: 200px; } 
#container { padding: 25px 0 50px 0; background-color: #f7f7f7 !important; } 
#chatbot { padding: 30px 30px 40px 30px; } 
.chatbot-left form fieldset:focus-within { --tw-ring-color: transparent !important; border: 0; } 
.chatbot-left .chat-ai { height: 100%; } 
zapier-interfaces-chatbot-embed { width: 100%; height: 100%; display: block; min-height: 500px; } 
.chatbot-left zapier-interfaces-chatbot-embed { width: 100%; display: block; min-height: 500px; } 
 
.chatbot-right { padding-left: 30px; } 
.chatbot-right-top img { width: 100%; object-fit: cover; } 

.chatbot-right-top .slick-dots li button:before { display: none; } 
.chatbot-right-top .slick-dots li button { transition: 1s all; width: 20px; height: 5px; border-radius: 24px; padding: 0; margin: 0; background: rgba(135 14 2 / 0.2); } 
.chatbot-right-top .slick-dots li.slick-active button { transition: 1s all; background: rgba(135 14 2 / 1); } 


.chatbot-right-bottom { background: #fff; padding: 15px; margin-top: 50px; } 
.chatbot-right-bottom h2 { border-bottom: 1px solid #ddd; padding-bottom: 10px; } 
.chatbot-right-bottom h2 svg { position: relative; top: 1px; } 
.chatbot-right-bottom h2 span { text-transform: uppercase; color:#222; font-family: var(--font-family); font-size: 20px; font-weight: 500; } 
.chatbot-right-bottom-content { min-height: 300px; } 

.footer-top { padding: 30px 0; position: relative; background-image: url(../../images/bgft.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } 
.footer-top::before { content: ""; position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(36, 147, 209, 0.97); pointer-events: none; z-index: 1; } 
.footer-top-1,.footer-top-2,.footer-top-3,.footer-top-4 { width: calc(100% / 4); position: relative; z-index: 2; } 
.footer-top-1 { padding-right: 30px; } 
.footer-top-1 .footer-top-1-items .footer-top-1-calc { margin-bottom: 15px; } 
.footer-top-1 .footer-top-1-items .footer-top-1-calc:last-child { margin-bottom: 0; } 
.footer-top-1 .footer-top-1-items svg { max-width: 15px; margin-right: 10px; fill: #fff; padding-top: 5px; } 
.footer-top-1 .footer-top-1-items p { color:#fff; font-family: var(--font-family); font-size: 16px; font-weight: 400; } 
.footer-top-1 .footer-top-1-items a { color:#fff; font-family: var(--font-family); font-size: 16px; font-weight: 400; } 
.footer-top-1 .footer-top-1-items a:hover { color: var(--tertiary-color); } 
.footer-top-2 { padding-right: 30px; } 
.footer-top-2-top { margin-bottom: 20px; } 
/* .footer-top-2-top-content { color:#fff; font-family: var(--font-family); font-size: 16px; font-weight: 400; } 
.footer-top-2-top-content:hover { color: #000; } */
.footer-top-3 { padding-right: 30px; } 
.footer-top-2-bottom-content ul { list-style: none; margin: 0; padding-left: 0; } 
.footer-top-2-bottom-content ul li { margin-bottom: 10px; } 
.footer-top-2-bottom-content ul li a { color:#fff; font-family: var(--font-family); font-size: 16px; font-weight: 400; } 
.footer-top-2-bottom-content ul li a:hover { color: var(--tertiary-color); } 

.footer-tit { font-weight: 500; font-size: 26px; margin-bottom: 20px; font-family: var(--font-family); text-transform: uppercase; color: #fff; } 
.chat-footer-info { width: 40%; } 
.chat-footer-info img { width: 250px; } 
.chat-footer-info p { margin-top: 10px; color: #fff; font-family: var(--font-family); font-size: 16px; font-weight: 400; } 
.chat-footer-des { width: 60%; padding-left: 15px; } 

.chat-footer-des-title { font-family: var(--font-family); font-size: 20px; font-weight: 600; color: white; } 
.chat-footer-des-info { margin-top: 20px; } 
.chat-footer-des-info p { font-family: var(--font-family); font-size: 16px; font-weight: 400; color: white; } 
.footer-bottom-right p { font-family: var(--font-family); font-size: 16px; font-weight: 400; color: white; } 
.chat-footer-des-icon-right { display: block; width: auto; margin-left: 15px; } 
.chat-footer-des-icon { display: flex; gap: 15px; justify-content: end; } 
.chat-footer-des-icon a { color: white; font-size: 20px; } 

.chat-container { display: block; } 

.footer-bottom { background: linear-gradient(184deg, #0c2d66 46%, #ffffff 168%) !important; color: #ffffff; padding: 25px 0; } 
.footer-bottom-left { width: 50%; } 
.footer-bottom-right { width: 50%; } 
.copyright { font-family: var(--font-family); color: #fff; font-size: 16px; font-weight: 500; } 
.copyright a { color: var(--tertiary-color); font-family: var(--font-family); font-weight: 500; } 
.copyright a:hover { color: var(--secondary-color) } 


/* contact */
#contact { padding: 50px 0 20px 0; background: #fff; border-radius: 20px; } 
.contact-title { margin-bottom: 30px; } 
.contact-title h2 { font-weight: 700; font-size: 26px; text-align: center; font-family: var(--font-family); text-transform: uppercase; color: var(--primary-color); } 
.contact-content { max-width: 800px; margin: 0 auto; position: relative; } 
.contact-content form .form-item p span input { width: 100%; height: 46px; outline: none; border: 2px solid #f7f7f7; padding: 0 10px; border-radius: 6px; font-family: var(--font-family); font-weight: 500; color: #000; background: #fff; } 
.contact-content form .form-item p span textarea { width: 100%; height: 120px; outline: none; border: 2px solid #f7f7f7; padding: 10px 10px; border-radius: 6px; font-family: var(--font-family); font-weight: 500; color: #000; background: #fff; } 
.contact-content form .form-item-row { margin: 15px 0; display: flex; align-items: start; justify-content: space-between; } 
.contact-content form .form-item-row .form-item { width: calc(100% / 2 - 10px); } 
.contact-content form .form-item.star p { display: flex; justify-content: center; align-items: center; flex-direction: column; } 
.contact-content form .form-item.star p .rating-error { margin-top: 5px; color: #dc3232; } 
.contact-content form .form-item.star p span br { display: none; } 
.contact-content form .form-item.review { margin-bottom: 10px; } 
.contact-content form .form-item.submit input { display: block; width: 160px; height: 46px; border-radius: 6px; border: none; font-family: var(--font-family); font-weight: 500; color: #fff; background: var(--primary-color); transition: 1s all; outline: none; margin: 0 auto; } 
.contact-content form .form-item.submit input:hover { color: #fff; background: var(--tertiary-color); transition: 1s all; } 

.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; } 
.star-rating label { font-size: 28px; color: #bbb; cursor: pointer; float: right; transition: color .2s; margin-left: 4px; line-height: normal; cursor: pointer; } 

/* Hover: tô vàng từ sao đang hover trở về trái */
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f39c12 !important; } 

/* Checked: tô vàng từ đầu đến sao được chọn */
.star-rating input:checked ~ label { color: #f39c12; } 

/* Thứ tự ngược (5 sao bên phải) */
.star-rating { display: inline-block; unicode-bidi: bidi-override; direction: rtl; } 
.star-rating::after { content: ""; display: table; clear: both; } 
.required { color: red; } 

.contact-content .wpcf7-spinner { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--tertiary-color); } 
.contact-content .wpcf7-response-output { text-align: center; padding: 10px; border-radius: 6px; font-size: 14px; font-family: var(--font-family); font-weight: 500;} 





@media (max-width: 1366px) { header iframe { width: 100% !important; height: auto !important; object-fit: scale-down; } 
 .chatbot-right { padding-left: 30px; } 
 }

 @media (max-width: 1199px) { header iframe { display: none; } 
 .chatbot-right { padding-left: 20px; } 
 #chatbot { padding: 20px; } 
 .footer-top-1,.footer-top-2,.footer-top-3 { padding-right: 15px; } 
 .footer-tit { font-size: 22px; margin-bottom: 15px; } 
 }

 @media (max-width: 991px){
 .menu-right { display: none; } 
 .menu-left { width: 100%; justify-content: center !important; } 
 .menu-center { width: 100%; text-align: center !important; margin-top: 10px; } 
 #menu .center { flex-wrap: wrap; } 
 #menu { padding: 10px 0; } 
 .footer-top-1,.footer-top-2,.footer-top-3,.footer-top-4 { width: 50%; } 
 .footer-top-3,.footer-top-4 { margin-top: 20px; } 
 .footer-top-2 { padding-right: 0; } 
 .footer-top-2-bottom-content ul li a { font-size: 14px; } 
 .footer-top-1 .footer-top-1-items a { font-size: 14px; } 
 #chatbot { padding: 10px; } 
 }
 @media (max-width: 767px){
 .chatbot-right-top { display: none; } 
 .chatbot-right-bottom { width: 100%; padding: 0; margin: 0; } 
 .chatbot-left { padding: 0; margin: 0; min-height: 400px; } 
 .box-chatbot.row { margin: 0; } 
 .chatbot-right { padding: 0; margin: 0; } 
 .chat-footer-info { width: 100%; margin-bottom: 20px; } 
 .chat-footer-des { width: 100%; padding: 0; } 
 .chat-footer-des-info { flex-direction: column; justify-content: start !important; align-items: start !important; } 
 .footer-bottom-left,.footer-bottom-right { width: 100%; } 
 .footer-bottom-left { margin-bottom: 15px; } 
 #chatbot { padding: 0px; } 
 }

 @media (max-width: 480px){
 .footer-top { padding: 20px 0; } 
 .chat-footer-des-title { font-size: 14px; } 
 .chat-footer-des-info { margin-top: 10px; font-size: 14px; } 
 .chat-footer-des-icon { margin-top: 10px; justify-content: start !important; } 
 .chat-footer-des-info p { font-size: 14px; } 
 .chat-footer-info { margin-bottom: 10px; } 
 .footer-top-1,.footer-top-2,.footer-top-3,.footer-top-4 { width: 100%; padding: 0; margin-top: 20px; } 
 .footer-top-1 { margin-top: 0; } 
 .contact-title h2 { font-size: 20px; } 
 .contact-content form .form-item-row { display: block; } 
 .contact-content form .form-item-row .form-item { width: 100%; } 
 .contact-content form .form-item-row .form-item:nth-child(1) { margin-bottom: 15px; } 
 }