:root{--fnt:'Josefin Sans';--main:#0093db;--hover:#fecb19;--text:#333;--prev:#777;--red:#e9050f;--bord:#e7e7e7;--grey:#f7f7f7;--white:#fff;--wite:#fff;}
.fnt{font-family: var(--fnt);}.fs-7{font-size:14px;}.fs-8{font-size:12px;}.fw-5{font-weight:500;}.ls-1{letter-spacing: 1px;}.tr-5{transition:all 0.5s ease 0s;}
.cl-m{color:var(--main);}.cl-h{color:var(--hover);}.cl-t{color:var(--text);}.cl-p{color:var(--prev);}.cl-r{color:var(--red);}.cl-w{color:var(--wite);}
.br-5{border-radius:5px;}.br-15{border-radius:15px;}.br-30{border-radius:30px;}.br-50{border-radius:50%;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;color:var(--text);}
input,select,textarea{width:100%;height:50px;padding:0;border:1px solid var(--bord);border-radius:5px;outline:none;text-indent:1rem;transition:all 0.5s ease 0s;}
input:disabled{cursor: not-allowed;}
input:focus,select:focus,textarea:focus{border:1px solid var(--main);box-shadow:0 0 15px rgb(0 0 0 / 5%);}
input[type=submit]{display:inline-block;width:auto;padding:0 50px;background-color:var(--main);border:0;font-weight:700;text-indent:0;color:var(--wite);}
input[type=submit]:hover{background-color:var(--hover);}
select{background:var(--wite) url(images/select.png) no-repeat center right 9px;appearance:none;}textarea{display:block;height:106px;padding:1rem;text-indent:0;}
h1,h2,h3,h4,h5,h6{margin-bottom:0;}ul,ol,p{margin:0;padding:0;}a{text-decoration:none;}img{display:block;max-width:100%;height:auto;}.wow{opacity:0;}
.i-hov{overflow:hidden;}.i-hov img{transition:all 0.5s ease 0s;}.i-hov:hover img{transform:scale(1.05);}
.n-hov-l a{width:100%;background:linear-gradient(transparent calc(100% - 2px), var(--hover) 2px) no-repeat top left / 0% 100%;color:var(--main);transition:all 0.5s ease 0s;}
.n-hov-l a:hover{background-size:100% 100%;color:var(--hover);}
.n-hov-t a{background:linear-gradient(to right, var(--hover), var(--hover) 50%, var(--main) 50%) 100% / 200% 100%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;transition:all 0.5s ease 0s;}
.n-hov-t a:hover{background-position:0;}
.f-item{position:relative;margin-bottom:1.5rem;}.f-item span{display:block;margin-bottom:0.25rem;}
.f-item input.error,.f-item select.error,.f-item textarea.error{border-color:var(--red);}
.f-item label.error,.f-item label#emailregistered{position:absolute;top:100%;right:0;font-size:12px;color:var(--red);}
.topbar{background:var(--main);color:var(--white);font-size:14px;}
.topbar a{color:var(--white);text-decoration:none;}
.topbar a:hover{opacity:0.9;}
.topbar .topbar-item{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.header{background-color: var(--wite);}
.logo{width: 110px;}
.logo a span{position: absolute; width: 0; height: 0; overflow: hidden;}
.icon{list-style: none;}
.icon li{flex: 0 0 auto;}
.icon li a{display: block; min-width: 40px; text-align: center; line-height: 40px; color: var(--text); cursor: pointer; transition: all 0.5s ease 0s;}
.icon li a:hover{color: var(--main);}
.icon li a i{text-align: center;}
.search{top: calc(100% + 3rem); right: 0; left: 0; width: 50%; background-color: var(--wite); opacity: 0; pointer-events: none;}
.search input[type='text']{float: left; width: calc(100% - 50px); border: 0;}
.search input[type='submit']{float: right; width: 50px; padding: 0; background: var(--wite) url(images/search.png) no-repeat center;}
.search-2{top: calc(100% + 1.5rem); box-shadow: 0 0 30px rgb(0 0 0 / 25%);  opacity: 1; pointer-events: auto;z-index: 999;}
.hotline-box{padding:14px 18px;}
.hotline-icon i{font-size:38px;color:#e11b22;line-height:1;}
.hotline-title{color:#e11b22;font-size:22px;font-weight:700;line-height:1.1;margin-bottom:4px;}
.hotline-number{color:#111;font-size:18px;font-weight:700;line-height:1.2;}
.hotline-icon img{width:42px;height:42px;object-fit:contain;flex-shrink:0;}
.main-author, .site-description{position: absolute; width: 1px; height: 1px; border: 0; clip: rect(0, 0, 0, 0); word-wrap: normal; overflow: hidden;}
.main-title{margin-bottom: 3rem; text-align: center;}
.main-title *:nth-child(1){text-transform: uppercase; color: var(--main);}
.main-title *:nth-child(1) i{margin-right: 0.5rem;}
.main-title *:nth-child(2){margin-top: 1rem; font-family: var(--fnt); font-weight: 700;}
.main-button{font-weight: 500; line-height: 46px;}
.main-button a{position: relative; display: inline-block; padding: 0 1.75rem; border: 2px solid var(--main); border-radius: 25px; color: var(--main); transition: all 0.5s ease 0s;}
.main-button a:hover{background-color: var(--main); color: var(--wite);}
.main-arr .slick-arrow{position: absolute; top: 0; bottom: 0; width: 40px; height: 40px; margin: auto; background-color: var(--main); border-radius: 50%; opacity: 0;}
.main-arr .slick-arrow:hover{background-color: var(--hover);}
.main-arr .slick-arrow i{font-size: 16px; line-height: 40px; color: var(--wite);}
.main-arr .slick-prev{left: 0;}
.main-arr .slick-next{right: 0;}
.main-arr:hover .slick-arrow{opacity: 1;}
.main-arr:hover .slick-prev{left: -70px;}
.main-arr:hover .slick-next{right: -70px;}
.main-page{list-style: none; display: flex; justify-content: center; margin-bottom: 3rem;}
.main-page li+li{margin-left: 1rem;}
.main-page li a{display: block; width: 40px; background-color: var(--grey); text-align: center; line-height: 40px; color: var(--main); transition: all 0.5s ease 0s;}
.main-page li a:hover, .main-page li a.active{background: var(--main); color: var(--wite);}
.main-other{margin-bottom: 3rem; border-bottom: 2px solid var(--bord); font-family: var(--fnt); font-weight: 700; color: var(--main);}
.main-other *{position: relative; display: inline-block;}
.main-other *:before{content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: var(--main);}
.main-detail p{margin-bottom: 15px;}
.main-detail h2{padding: 0.75rem 0; font-size: 1.5rem;}
.main-detail h3{padding: 0.75rem 0; font-size: 1.25rem;}
.main-detail h4{padding: 0.75rem 0; font-size: 1.25rem;}
.main-detail ul, .main-detail ol{padding: 0 0 0.75rem 2rem;}
.main-detail img{display: inline-block!important;}  
.main-detail table{width: 100%!important; border-collapse: collapse; border-color: var(--bord);}
.main-detail iframe{display: block; margin: 0 auto!important;} 
.main-detail figure{padding: 0 0 1rem;}
.main-detail figure figcaption{font-size: 14px; font-style: italic;}
.main-toc{top: 15px; border: 1px solid var(--bord);}
.main-toc-button{position: absolute; top: 15px; right: 15px; cursor: pointer;}
.main-toc-button i{width: 30px; text-align: center; line-height: 30px; color: var(--text);}
.main-toc-list{margin-top: 15px;}
.main-toc-list ul{list-style: none; margin-top: 10px;}
.main-toc-list ul li{position: relative; padding-left: 20px;}
.main-toc-list ul li:before{content: ''; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: var(--main);}
.main-toc-list ul li a:hover{color: var(--main)!important;}
.main-toc-list ul ul{padding-left: 20px;}
.main-toc-list ul ul li:before{background-color: transparent; border: 1px solid var(--main);}
.main-share > div:nth-child(1){margin-right: 17px; padding: 3px 10px; border: 1px solid var(--bord); color: #777;}
.main-share > div:nth-child(1):before
.main-share > div:nth-child(1):after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; width: 0; height: 0; border-style: solid;}
.main-share > div:nth-child(1):before{border-width: 7px 0 7px 9px; border-color: transparent transparent transparent var(--bord);}
.main-share > div:nth-child(1):after{border-width: 6px 0 6px 8px; border-color: transparent transparent transparent var(--wite);}
.main-share > div:nth-child(1) i{padding-right: 10px; border-right: 1px solid var(--bord);}
.main-share > div:nth-child(1) b{padding: 0 10px; font-size: 12px; vertical-align: text-bottom;}
.main-share #st-1 .st-btn[data-network='telegram']{display: inline-block!important;}


.footer{border-top: 1px solid var(--main);background: url(images/bg-thuyhoang.png) no-repeat center center;background-size:cover;}
.footer ul{list-style: none;}
.footer a{color: #333; transition: all 0.5s ease 0s;}
.footer a:hover{color: var(--hover);}
.footer-title{position: relative;margin-bottom: 1.5rem; font-family: var(--fnt); font-weight: 700; text-transform: uppercase; color: var(--main);}
.footer-title:before, .footer-title:after{content: ''; height: 2px; background-color: var(--main);}
.footer-title:before{position: absolute; bottom: 0; left: 55px; width: 10px;}
.footer-title:after{display: block; width: 50px;}
.footer-title h3{font-size: 18px;}
.footer-info li{position: relative; margin-bottom: 0.5rem;}
.footer-list ul li a:hover i{transform: rotate(-90deg);}
.footer-social a{flex: 0 0 auto; width: 40px;}
.footer-social a+a{margin-left: 1rem;}
.footer-social a i{width: 36px; border: 1px solid var(--text); border-radius: 50%; text-align: center; line-height: 34px;}
.footer-bottom{background-color: var(--main); color: var(--wite);}
.footer-bottom a{color: var(--wite);}
.footer-product a+a:before{content: '|'; padding: 0 0.25rem;}
.press{bottom:1rem;left:1rem;cursor:pointer;}
.press a{padding-right:50px;text-align:center;}
.press a p{width:0;padding-right:0;height:40px;background-color:var(--wite);border-radius:20px 0 0 20px;opacity:0;overflow:hidden;transition:.4s;}
.press a p span{top:0;left:0;width:150px;line-height:40px;}
.press a i{right:0;bottom:0;width:50px;background-color:var(--wite);box-shadow:0 0 15px rgb(0 0 0 / 25%);font-size:30px;line-height:50px;color:var(--main);animation:floatWater 2.5s infinite ease-in-out;transition:.4s;}
.press a:hover p{width:175px;padding-right:25px;box-shadow:0 0 15px rgb(0 0 0 / 25%);opacity:1;}
.press a:hover i{right:25px;background-color:var(--main);color:var(--wite);}
@keyframes floatWater{
    0%{transform: translateY(0);}
    50%{transform: translateY(-6px);}
    100%{transform: translateY(0);}
}
.click{right: 1rem; bottom: calc(40px + 1rem);z-index: 999;}
.click a{position: relative; display: block; margin-bottom: 0.5rem; line-height: 40px; color: #333;}
.click a *{box-shadow: 0 0 5px rgb(0 0 0 / 25%);}
.click a img{width: 40px; border-radius: 50%; }
.click a span{width: 110px;position: absolute; top: 1rem; right: calc(100% + 0.5rem); padding: 0 0.5rem; background-color: var(--wite); opacity: 0; pointer-events: none; transition: all 0.5s ease 0s;}
.click a span:after{content: ''; position: absolute; top: 15px; right: -10px; display: block; border: 5px solid transparent; border-left-color: var(--wite);}
.click a:hover span{top: 0; opacity: 1; pointer-events: none;}
.gotop{right: 1rem; bottom: -40px; width: 40px; background-color: var(--wite); box-shadow: 0 0 5px rgb(0 0 0 / 25%); color: var(--red); opacity: 0; cursor: pointer;}
.gotop:hover{background-color: var(--red); color: var(--wite);}
.gotop i{line-height: 40px;}
.gotop-2{bottom: 1rem; opacity: 1;}