﻿:root {
    --color1: #0252bf;
    --color2: #e20009;
    --color3: #008438;
    --color4: #f93200;
    --border-color: #ececec;
    --btnColor1: #0064d6;
    --btnColor2: #ffc107;
}

body { font-size: 20px; color:#000; font-family: "Momo Trust Sans", sans-serif;  font-weight: 300; font-size: 16px; padding:0!important; overflow-x:hidden }
@media (min-width: 1440px) {
    .container { max-width: 1400px;}
}
section{ position: relative;z-index: 1; transition: all .4s ease-in-out; padding-top:80px; }

/* Header */
header{position: absolute;  width: 100%; background: var(--color1); z-index: 2; transition: all .1s ease-in-out; height:60px; opacity:0; visibility:hidden; pointer-events:none; overflow:hidden; }
header .hotline{float:right; position:relative;}
header .hotline a{text-decoration:none; color:#fff; line-height:60px;}
header .hotline a span{font-weight:700; font-size:18px;}
header .hotline a span:before{content:'Hotline: '; font-weight:400; font-size:15px; opacity:.75}
header .hotline a i{font-size:14px; width:32px; height:32px; margin: 14px 10px 0 0; border:1px solid rgba(255,255,255,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; float:left;}
header.header--fixed {position: fixed; top: 0; opacity:1; visibility:initial; pointer-events:initial; box-shadow: 0 1px rgba(0,0,0,.1), 0 5px 20px rgba(0,47,110,.4)}

.main-nav{float:left; position:relative; }
.main-nav ul{margin:0 20px 0 0; padding:0; display:flex; list-style:none;}
.main-nav ul li{position:relative; margin-right:8px;}
.main-nav ul li a{color:#fff; line-height:60px; font-weight:500; font-size:16px; text-decoration:none; transition:.3s; padding: 0 15px; position:relative; display:block; float:left; display:block; transition:.3s; }
.main-nav ul li a span{width:100%; float:left; position:relative; z-index:3;}
.main-nav ul li a:before{content:''; width:100%; height:calc(100% - 24px); position:absolute; z-index:1; background:#fff; opacity:0; top:12px; left:0; transition:.3s; border-radius:7px;}
.main-nav ul li a.active{color:var(--color1); }
.main-nav ul li a.active:before{opacity:1}
.main-nav ul li:nth-child(2){display:none;}
.main-nav ul li:last-child{margin:0;}



.parallax-mirror{border-radius:20px;}
.title-sub{font-size:14px; font-weight:500; border:1px solid rgba(0,0,0,.1); float:left; line-height:32px; height:32px; border-radius:16px; padding: 0 20px 0 30px; color:#000; position:relative;}
.title-sub:before{content:''; width:6px; height:6px; border-radius:3px; margin-top:-3px; left:15px; top:50%; position:absolute; background:var(--color2);}
.title-main{font-size:38px; font-weight:700; color:#000; display:block; clear:both; margin-top:10px; width:100%; float:left;}


/* Slider */

.s-slider{margin-bottom:35px; padding-top:0;}
.s-slider .wrap-logo{width:180px; margin-left:-90px; background:var(--color1); position:absolute; top:0; left:50%; z-index:5; padding:30px; }
.s-slider .wrap-logo svg{width:100%; fill:#fff;}
.s-slider .container{position:relative; z-index:2;}
.s-slider .caption{width:100%;  float:left; display:flex; padding-top:130px; align-items:end}
.s-slider .caption .info{display:block; width:720px; padding-bottom:50px;}
.s-slider .caption .info .type{width:100%; float:left; position:relative; display:flex;}
.s-slider .caption .info .type span{line-height:28px; height:28px; border-radius:14px; padding: 0 15px; display:block; background:var(--color4); margin-right:15px; font-size:14px; font-weight:500; color:#fff;}
.s-slider .caption .info .type span:last-child{background:var(--color2)}
.s-slider .caption .info h1{font-weight:700; color:#fff; font-size:70px; margin-top:10px; width:100%; float:left;}
.s-slider .caption .info h2{font-size:18px; color:#fff; font-weight:300; line-height:30px;}
.s-slider .caption .info .wrap-nav{width:100%; float:left; position:relative; display:flex; margin-top:30px;}
.s-slider .caption .info .wrap-nav a{line-height:52px; padding: 0 25px; color:#fff; font-size:18px; font-weight:400; border:1px solid rgba(255,255,255,1); display:block; border-radius:7px; margin-right:20px; text-decoration:none; text-align:center; width:220px;}
.s-slider .caption .info .wrap-nav a:first-child{background:var(--color1); border-color:var(--color1)}
.s-slider .caption ul{margin:0; padding:0; list-style:none; position:absolute; right:15px; bottom:-25px; display:flex;}
.s-slider .caption ul li{width:150px; background:#fff; padding: 25px; text-align:center; position:relative;}
.s-slider .caption ul li svg{width:50px; display:block; margin:0 auto }
.s-slider .caption ul li svg path:first-child{fill:var(--color3)}
.s-slider .caption ul li svg path:last-child{fill:var(--color3)}
.s-slider .caption ul li span{font-weight:700; margin-top:10px; width:100%; float:left; position:relative; line-height:20px; font-size:17px; color:var(--color1)}
.s-slider .caption ul li:before{content:''; width:1px; height:calc(100% - 60px); position:absolute; top:30px; left:0; background:#000;  display:block; opacity:.1}
.s-slider .caption ul li:last-child{border-radius: 0 14px 0 0}
.s-slider .caption ul li:nth-child(2){border-radius: 14px 0 0 0}
.s-slider .caption ul li.title{border-radius:14px; background:var(--color1); display:flex; align-content:center; justify-content:center;}
.s-slider .caption ul li.title:after{content:'Sản phẩm'; position:absolute; top:35px; right:13px; color:#fff; width:50px; text-align:left; font-style:italic; font-weight:600; font-size:15px; line-height:20px;}
.s-slider .caption ul li.title img{width:100%;}


#owl-slider{width:100%; float:left; position:absolute; float:left; z-index:1; }
#owl-slider .owl-wrapper-outer:before{content:''; background-image: linear-gradient(to top, rgba(0,51,120,.8) 40%, rgba(0,51,120,.0)); width:100%; height:50%; position:absolute; bottom:0; left:0;  z-index:5;}
#owl-slider .item{width:100%;  overflow:hidden; float:left}
#owl-slider .item img{object-fit:cover; width:inherit; height:inherit;}
#owl-slider .owl-buttons div{width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0; opacity:1; background:rgba(0,0,0,.3); position:absolute; top:50%; margin-top:-30px; left:15px; z-index:6; }
#owl-slider .owl-buttons div:before{position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; z-index:1; color:#fff; display:flex; align-items:center; justify-content:center; font-family: "Font Awesome 5";   font-weight: 900; font-size:20px;}
#owl-slider .owl-buttons .owl-next{left:initial; right:15px;}
#owl-slider .owl-buttons .owl-prev:before{content: "\f060";}
#owl-slider .owl-buttons .owl-next:before{content: "\f061";}
#owl-slider .owl-pagination{position:absolute; bottom:20px; z-index:3;}

.s-slider .caption, #owl-slider .item{height:900px;}

.s-temp{padding-top:5px;}

/* About */
.s-about{}
.s-about .col-img{width:calc(50% - 70px); float:left; position:relative; padding-bottom:150px;}
.s-about .col-img .img-bg{position:relative; height:450px; top:0; left:0; width:100%; border-radius:10px; clip-path: polygon(calc(100% - 0px) calc(100% - 12px), calc(100% - 0px) calc(100% - 12px), calc(100% - 0.15707099999997px) calc(100% - 10.053639px), calc(100% - 0.61180799999988px) calc(100% - 8.2072319999999px), calc(100% - 1.3394970000001px) calc(100% - 6.485493px), calc(100% - 2.3154239999999px) calc(100% - 4.913136px), calc(100% - 3.5148750000001px) calc(100% - 3.514875px), calc(100% - 4.913136px) calc(100% - 2.315424px), calc(100% - 6.485493px) calc(100% - 1.339497px), calc(100% - 8.207232px) calc(100% - 0.611808px), calc(100% - 10.053639px) calc(100% - 0.15707099999997px), calc(100% - 12px) calc(100% - 0px), 44px calc(100% - 0px), 44px calc(100% - 0px), 42.0535418px calc(100% - 0.15707099999997px), 40.2070784px calc(100% - 0.61180799999988px), 38.4853166px calc(100% - 1.3394969999999px), 36.9129632px calc(100% - 2.315424px), 35.514725px calc(100% - 3.514875px), 34.3153088px calc(100% - 4.913136px), 33.3394214px calc(100% - 6.485493px), 32.6117696px calc(100% - 8.207232px), 32.1570602px calc(100% - 10.053639px), 32px calc(100% - 12px), 32px calc(100% - 65.71px), 32px calc(100% - 65.71px), 31.9355336px calc(100% - 66.953572px), 31.7452688px calc(100% - 68.170696px), 31.4339072px calc(100% - 69.352984px), 31.0061504px calc(100% - 70.492048px), 30.4667px calc(100% - 71.5795px), 29.8202576px calc(100% - 72.606952px), 29.0715248px calc(100% - 73.566016px), 28.2252032px calc(100% - 74.448304px), 27.2859944px calc(100% - 75.245428px), 26.2586px calc(100% - 75.949px), 5.74143px calc(100% - 88.49px), 5.74143px calc(100% - 88.49px), 4.71403719px calc(100% - 89.193572px), 3.77482752px calc(100% - 89.990696px), 2.92850313px calc(100% - 90.872984px), 2.17976616px calc(100% - 91.832048px), 1.53331875px calc(100% - 92.8595px), 0.99386304px calc(100% - 93.946952px), 0.56610117px calc(100% - 95.086016px), 0.25473528px calc(100% - 96.268304px), 0.06446751px calc(100% - 97.485428px), 0px calc(100% - 98.729px), 0px 12px, 0px 12px, 0.15705966px 10.05353694px, 0.61176768px 8.20707072px, 1.33941762px 6.48530778px, 2.31530304px 4.91295456px, 3.5147175px 3.5147175px, 4.91295456px 2.31530304px, 6.48530778px 1.33941762px, 8.20707072px 0.61176768px, 10.05353694px 0.15705966px, 12px 0px, calc(100% - 12px) 0px, calc(100% - 12px) 0px, calc(100% - 10.053639px) 0.15705966px, calc(100% - 8.207232px) 0.61176768px, calc(100% - 6.485493px) 1.33941762px, calc(100% - 4.913136px) 2.31530304px, calc(100% - 3.5148750000001px) 3.5147175px, calc(100% - 2.315424px) 4.91295456px, calc(100% - 1.3394970000001px) 6.48530778px, calc(100% - 0.61180800000011px) 8.20707072px, calc(100% - 0.15707099999997px) 10.05353694px, calc(100% - 0px) 12px, calc(100% - 0px) calc(100% - 12px));}
.s-about .col-img .img-bg img{object-fit:cover; width:inherit; height:inherit}
.s-about .col-img .img-main{height:570px; float:right; position:absolute; z-index:2; right:-130px; bottom:0px;}
.s-about .col-img ul{float:left; margin:0; padding:0 0 30px 0; list-style:none; position:absolute; left:0; bottom:10px;}
.s-about .col-img ul li{float:left; position:relative; }
.s-about .col-img ul li:first-child{margin-right:15px;}
.s-about .col-img ul li:first-child label{margin:30px 0 0 0; display:block; font-size:28px; font-weight:800; text-transform:uppercase; letter-spacing:-1px;}
.s-about .col-img ul li:first-child span{text-align:justify; text-transform:uppercase; font-size:16px; font-weight:800; letter-spacing:1px; margin-top:-5px; display:block;}
.s-about .col-img ul li:nth-child(2) svg{fill:var(--color2); width:150px;}
.s-about .col-img ul li:nth-child(2) span{width:100%; background:var(--color2); line-height:30px; height:28px; display:block; text-align:center; color:#fff; text-transform:uppercase; font-size:12px; font-weight:600;  margin-top:-2px;}
.s-about .col-img ul li:last-child{position:absolute; left:0; bottom:3px; text-transform:uppercase; font-size:13px; font-weight:700; color:var(--color3); letter-spacing:0px; }
.s-about .col-info{width:calc(50% - 100px); float:right; position:relative}
.s-about .col-info p{width:100%; float:left; margin:0; font-size:17px; margin-top:25px; text-align:justify}


/* Đặt điểm nỗi bật  */
.s-features{}
.s-features .parallax-window{width:calc(100% - 100px); height:calc(100% - 80px); margin: 0; z-index:1; position:absolute; bottom:0; left:50px;}
.s-features .parallax-window:before{content:''; background-image: linear-gradient(to bottom, rgba(0,51,120,.5) 20%, rgba(0,51,120,.0)); width:100%; height:100%; position:absolute; top:0; left:0; border-radius:20px;}
.s-features .container{position:relative; z-index:2;}
.s-features .inner{width:100%; float:left; display:table; padding: 100px 0}
.s-features .inner .col-l{display:block; position:relative; color:#fff; width:calc(50% + 100px); float:left; padding-right:100px; }
.s-features .inner .col-l .title-sub{color:#fff; border-color:rgba(255,255,255,.2)}
.s-features .inner .col-l .title-main{color:#fff;}
.s-features .inner .col-l p{width:100%; margin:20px 0 0 0; padding:0; max-width:550px; float:left; clear:both;  }
.s-features .inner .col-r{display:block; position:relative; width:calc(50% - 100px); float:right}
.s-features .inner .col-r ul{margin:0; padding:0; list-style:none; width:100%;}
.s-features .inner .col-r ul li{width:100%; float:left; position:relative; color:#fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin-top: 30px; border-radius:14px; padding: 25px 30px 25px 40px;}
.s-features .inner .col-r ul li b{background:var(--color3); color:#fff; position:absolute; left:-20px; top:18px; width:40px; line-height:36px; text-align:center; border-radius:7px; }
.s-features .inner .col-r ul li h4{font-size:20px; margin:0; font-weight:600;}
.s-features .inner .col-r ul li p{width:100%; margin:12px 0 0 0;  float:left; text-align:justify}
.s-features .inner .col-r ul li:first-child{margin:0;}
.s-features .inner .col-r ul li:last-child{backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); padding:0; margin-top:40px;}
.s-features .inner .col-r ul li:last-child span{font-size:14px; font-weight:600; text-transform:uppercase; line-height:50px; }
.s-features .inner .col-r ul li:last-child a{line-height:50px; display:inline-block; border-radius:26px; background:var(--color2); border:1px solid var(--color2); margin-left:15px; text-align:left; width:230px;color:#fff; text-decoration:none; font-weight:500; padding: 0 20px; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0) }
.s-features .inner .col-r ul li:last-child a:after{font-family: "Font Awesome 5"; font-weight: 300; content: "\f291"; font-size:20px; float:right; opacity:.5; transition:.3s;}
.s-features .inner .col-r ul li:last-child a:last-child{background:var(--color4); border-color:var(--color4)}
.s-features .inner .col-r ul li:last-child a:hover{box-shadow: inset 0 50px rgba(0,0,0,.2)}
.s-features .inner .col-r ul li:last-child a:hover:after{opacity:1;}
 
/* Cách sử dụng */
.s-use{}
.s-use .title-s{width:100%; float:left; }
.s-use .title-s .title-sub{transform:translateX(-50%); left:50%;}
.s-use .title-s .title-main{text-align:center}
.s-use .title-s p{display:block; clear:both; margin:0 auto; width:100%; max-width:800px; text-align:center; font-weight:400; font-size:17px; padding-top:10px; }
.s-use ul{width:calc(100% + 30px); margin: 20px 0 0 -15px; padding:0; float:left; list-style:none;}
.s-use ul li{width:25%; float:left; padding: 0 15px; position:relative; text-align:left; margin-top:30px;}
.s-use ul li .wrap-img{width:100%; float:left; position:relative; }
.s-use ul li .wrap-img span{position:absolute; bottom:0; left:0px; font-weight:600; color:var(--color1); font-size:15px; }
.s-use ul li .wrap-img .clip-img{width:100%; height:400px; clip-path: polygon(calc(100% - 1px) calc(100% - 13px), calc(100% - 1px) calc(100% - 13px), calc(100% - 1.1570709999999px) calc(100% - 11.053639px), calc(100% - 1.6118079999999px) calc(100% - 9.2072319999999px), calc(100% - 2.339497px) calc(100% - 7.485493px), calc(100% - 3.315424px) calc(100% - 5.913136px), calc(100% - 4.514875px) calc(100% - 4.5148750000001px), calc(100% - 5.913136px) calc(100% - 3.315424px), calc(100% - 7.485493px) calc(100% - 2.3394969999999px), calc(100% - 9.207232px) calc(100% - 1.611808px), calc(100% - 11.053639px) calc(100% - 1.157071px), calc(100% - 13px) calc(100% - 1.0000000000001px), 203.962px calc(100% - 1px), 203.962px calc(100% - 1px), 203.013439px calc(100% - 1.037525px), 202.076632px calc(100% - 1.1489999999998px), 201.155593px calc(100% - 1.3327750000001px), 200.254336px calc(100% - 1.5871999999999px), 199.376875px calc(100% - 1.910625px), 198.527224px calc(100% - 2.3013999999999px), 197.709397px calc(100% - 2.757875px), 196.927408px calc(100% - 3.2783999999999px), 196.185271px calc(100% - 3.861325px), 195.487px calc(100% - 4.5050000000001px), 160.415px calc(100% - 39.495px), 160.415px calc(100% - 39.495px), 159.716999px calc(100% - 40.138675px), 158.975072px calc(100% - 40.7216px), 158.193233px calc(100% - 41.242125px), 157.375496px calc(100% - 41.6986px), 156.525875px calc(100% - 42.089375px), 155.648384px calc(100% - 42.4128px), 154.747037px calc(100% - 42.667225px), 153.825848px calc(100% - 42.851px), 152.888831px calc(100% - 42.962475px), 151.94px calc(100% - 43px), 13px calc(100% - 43px), 13px calc(100% - 43px), 11.0535418px calc(100% - 43.157071px), 9.2070784px calc(100% - 43.611808px), 7.4853166px calc(100% - 44.339497px), 5.9129632px calc(100% - 45.315424px), 4.514725px calc(100% - 46.514875px), 3.3153088px calc(100% - 47.913136px), 2.3394214px calc(100% - 49.485493px), 1.6117696px calc(100% - 51.207232px), 1.1570602px calc(100% - 53.053639px), 1px calc(100% - 55px), 1px 13px, 1px 13px, 1.1570602px 11.0535418px, 1.6117696px 9.2070784px, 2.3394214px 7.4853166px, 3.3153088px 5.9129632px, 4.514725px 4.514725px, 5.9129632px 3.3153088px, 7.4853166px 2.3394214px, 9.2070784px 1.6117696px, 11.0535418px 1.1570602px, 13px 1px, calc(100% - 13px) 1px, calc(100% - 13px) 1px, calc(100% - 11.053639px) 1.1570602px, calc(100% - 9.2072319999999px) 1.6117696px, calc(100% - 7.485493px) 2.3394214px, calc(100% - 5.913136px) 3.3153088px, calc(100% - 4.514875px) 4.514725px, calc(100% - 3.315424px) 5.9129632px, calc(100% - 2.3394970000001px) 7.4853166px, calc(100% - 1.611808px) 9.2070784px, calc(100% - 1.157071px) 11.0535418px, calc(100% - 1.0000000000001px) 13px, calc(100% - 1px) calc(100% - 13px));} 
.s-use ul li .wrap-img .clip-img img{width:inherit; height:inherit; object-fit:cover}
.s-use ul li h4{font-size:20px; font-weight:700; color:var(--color3); margin-top:20px; width:100%; float:left;}
.s-use ul li p{width:100%; margin:0; font-weight:400}
.s-use .note{display:block; width:100%; float:left; text-align:center; color:#000; margin-top:40px; padding:30px 0; font-weight:400; position:relative }
.s-use .note:before{content:''; width:100%; height:100%; background:var(--color3); position:absolute; top:0; left:0; opacity:.07; border-radius:10px;}
.s-use .note b{background:var(--color3); line-height:26px; font-weight:400; border-radius:13px; display:inline-block; padding: 0 15px; color:#fff; margin-right:15px; font-size:15px; position:relative;}
.s-use .note span{position:relative; z-index:2;}


/* Đóng gói */
.s-pack{}
.s-pack .title-s{width:100%; float:left; }
.s-pack .title-s .title-sub{transform:translateX(-50%); left:50%;}
.s-pack .title-s .title-main{text-align:center}
.s-pack .title-s p{display:block; clear:both; margin:0 auto; width:100%; max-width:800px; text-align:center; font-weight:400; font-size:17px; padding-top:10px; }
.s-pack .inner{width:calc(100% + 30px); float:left; position:relative; margin: 30px 0 0 -15px;}
.s-pack .inner .col-info{width:calc(30% - 30px); padding:30px; margin: 0 15px; position:relative; float:left; border-radius:20px; background:rgba(0,0,0,.04) }
.s-pack .inner .col-info .wrap-img{width:calc(100% + 40px); float:left; position:relative; z-index:2; border-radius:10px; overflow:hidden; margin: -20px 0 25px -20px; }
.s-pack .inner .col-info .wrap-img img{width:100%; float:left;}
.s-pack .inner .col-info .caption{width:100%; float:left; position:relative; z-index:2;}
.s-pack .inner .col-info .caption h3{font-size:20px; font-weight:700; color:var(--color4)}
.s-pack .inner .col-info .caption p{margin:5px 0 0 0; padding:0; font-size:17px; font-weight:500; width:100%; float:left}
.s-pack .inner .col-info .caption ul{width:100%; margin:20px 0 0 0; padding:0; list-style:none; float:left;}
.s-pack .inner .col-info .caption ul li{width:100%; float:left; display:table; font-size:16px; border-top:1px dashed rgba(0,0,0,.15); padding: 15px 0 }
.s-pack .inner .col-info .caption ul li b{display:table-cell; font-weight:500; width:130px; color:var(--color1) }
.s-pack .inner .col-info .caption ul li b:after{content:':'; float:right; color:#000; opacity:.5 }
.s-pack .inner .col-info .caption ul li span{display:table-cell; font-weight:400; padding-left:10px; }
.s-pack .inner .col-info .caption a{line-height:50px; margin-top:10px; display:inline-block; border-radius:26px; background:var(--color4); border:1px solid var(--color4); text-align:left; width:100%;color:#fff; text-decoration:none; font-weight:500; padding: 0 25px; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0) }
.s-pack .inner .col-info .caption a:after{font-family: "Font Awesome 5"; font-weight: 300; content: "\f291"; font-size:20px; float:right; opacity:.5; transition:.3s;}
.s-pack .inner .col-info .caption a:hover{box-shadow: inset 0 50px rgba(0,0,0,.2)}
.s-pack .inner .col-info .caption a:hover:after{opacity:1;} 
.s-pack .inner .col-right{float:right}
.s-pack .inner .col-right .caption h3{color:var(--color2)}
.s-pack .inner .col-right .caption a{background:var(--color2); border:1px solid var(--color2);}
.s-pack .inner .col-center{width:calc(40% - 30px); margin: 0 15px; height:100%; position:absolute; top:0; left:30%; background:url(../images/ruong-muoi-de-gi-ly-phong.jpg) no-repeat center; background-size:cover; border-radius:20px;} 
.s-pack .inner .col-center:before{display:none; content:''; background-image: linear-gradient(to bottom, rgba(0,51,120,.5) 10%, rgba(0,51,120,.0)); width:100%; height:100%; position:absolute; top:0; left:0; border-radius:20px;}
.s-pack .note{display:block; width:100%; float:left; text-align:center; color:#000; margin-top:0px; padding:30px 0; font-weight:400; position:relative }
.s-pack .note:before{width:100%; height:100%; background:var(--color1); position:absolute; top:0; left:0; opacity:.07; border-radius:10px;}
.s-pack .note b{background:var(--color1); line-height:26px; font-weight:400; border-radius:13px; display:inline-block; padding: 0 15px; color:#fff; margin-right:15px; font-size:15px; position:relative;}
.s-pack .note span{position:relative; z-index:2;}

/* Đăng ký đại lý */
.s-agency{}
.s-agency .container{position:relative; z-index:2;}
.s-agency .head-row{}
.s-agency .head-row .col-l{padding-right:50px;}
.s-agency .head-row .col-r p{font-weight:400; padding-top:50px; font-size:17px; line-height:27px;}
.s-agency .body-row{ position:relative; margin-top:40px; }
.s-agency .body-row .parallax-window{width:calc(100% - 100px); height:calc(100% - 150px); margin: 0; z-index:1; position:absolute; top:0; left:50px;}
.s-agency .body-row .parallax-window:before{content:''; background-image: linear-gradient(to bottom, rgba(0,51,120,.5) 20%, rgba(0,51,120,.2)); width:100%; height:100%; position:absolute; top:0; left:0; border-radius:20px;}
.s-agency .body-row .container{position:relative; z-index:2;}
.s-agency .body-row .container .inner{height:780px; padding-bottom:150px; position:relative;}
.s-agency .body-row ul.list{margin:0; padding:0; list-style:none; display:flex; position:absolute; left:0; bottom:0;}
.s-agency .body-row ul.list li{width:200px; position:relative; padding-right:40px; margin-right:40px; border-right:1px solid rgba(0,0,0,.15); padding-top:50px;}
.s-agency .body-row ul.list li i{position:absolute; top:0; left:0; font-size:36px; color:var(--color1)}
.s-agency .body-row ul.list li span{font-size:17px; font-weight:500;}
.s-agency .body-row ul.list li:last-child{border:none; margin-right:0;}
.s-agency .body-row .wrap-form{width:570px; border-radius:14px; position:absolute; right:0; bottom:0; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.07); border-radius:20px; padding:35px 40px 35px 170px; background:rgba(255,255,255,1);}
.s-agency .body-row .wrap-form b{font-size:19px; font-weight:700; padding-bottom:5px; width:100%; float:left}
.s-agency .body-row .wrap-form p{font-weight:400; color:rgba(0,0,0,.7); margin:0; padding:0;}
.s-agency .body-row .wrap-form ul{margin:0; padding:20px 0 0 0; list-style:none;}
.s-agency .body-row .wrap-form ul li{width:100%; position:relative; margin-top:15px;}
.s-agency .body-row .wrap-form ul li input[type=text],
.s-agency .body-row .wrap-form ul li textarea{width:100%; height:45px; border:1px solid rgba(0,0,0,.07); border-radius:7px; outline:none; font-size:15px; font-weight:400; padding: 0 10px; transition:.3s; background:rgba(0,0,0,.015)}
.s-agency .body-row .wrap-form ul li textarea{height:80px; resize:none; overflow-y:auto; padding:10px;}
.s-agency .body-row .wrap-form ul li input[type=text]:focus,
.s-agency .body-row .wrap-form ul li textarea:focus{border-color:var(--color1); background:#fff;}
.s-agency .body-row .wrap-form ul li a{width:100%; display:block; line-height:52px; color:#fff; display:block; text-decoration:none; border-radius:7px; background:var(--color1); padding: 0 20px; font-weight:500; font-size:17px; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0)}
.s-agency .body-row .wrap-form ul li a:hover{box-shadow:inset 0 50px rgba(0,0,0,.25)}
.s-agency .body-row .wrap-form ul li a:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f061"; float:right; font-size:16px;}
.s-agency .body-row .wrap-form img{position:absolute; right:100%; bottom:0; height:calc(100% - 60px); margin-right:-150px;}

/* Footer */
.s-footer{background:url(../images/bg-footer.jpg) no-repeat center; background-size:cover; padding-top:0; background-position: center 0px; margin-top:130px; }
.s-footer:before{content:''; background-image: linear-gradient(to top, rgba(0,51,120,.7) 40%, rgba(0,51,120,.7)); width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; }
.s-footer .inner{width:100%; position:relative; float:left; z-index:3; }
.s-footer .caption{width:400px; position:relative; background:var(--color1); float:left; z-index:13; border-radius: 0 0 15px 15px;}
.s-footer .caption a.nav-link{width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:3;}
.s-footer .caption h4{font-size:13px; margin:0; padding: 10px 20px; color:#fff; background:rgba(0,0,0,.1); text-align:center; box-shadow: inset 0 -1px rgba(0,0,0,.03); font-weight:400;}
.s-footer .caption .logo{width:200px; display:block; display:flex; align-items:center; padding:30px 40px; float:left; position:relative;}
.s-footer .caption .logo:before{content: ''; height: calc(100% - 60px); width: 1px;background: #000; box-shadow:1px 0 #fff; position: absolute; right: 10px; top: 30px; opacity: .3;}
.s-footer .caption .logo svg{fill:#fff;}
.s-footer .caption .qr-code{width:200px;  float:left; padding:20px 45px;}
.s-footer .caption .qr-code svg{width:100%; fill:#fff; }
.s-footer ul.social{margin:12px 0 0 0; padding:0; list-style:none; float:left; display:flex; position:relative; float:left }
.s-footer ul.social:before{content:'Lý Phong trên'; line-height:36px; padding-right:20px; font-size:14px; color:#fff; font-weight:500;}
.s-footer ul.social li{margin-right:10px;}
.s-footer ul.social li a{text-decoration:none; width:36px; height:36px; font-size:14px; text-align:center; color:#fff;  display:flex; align-items:center; justify-content:center; transition:.3s; border-radius:50%; border:1px solid rgba(255,255,255,.5) }
.s-footer ul.social li a:hover{color:#fff; background:var(--color3)}
.s-footer .contact-info{width:calc(100% - 400px); float:right; position:relative;  padding: 20px 250px 0 50px; display:flex}
.s-footer .contact-info ul{margin:0; padding:20px 0 0 0; list-style:none; clear:both;}
.s-footer .contact-info ul li{color:#fff; width:100%; float:left; position:relative; margin-top:7px; font-size:16px; font-weight:500;}
.s-footer .contact-info ul li.title{font-size:18px; font-weight:bold; padding-bottom:5px; } 
.s-footer .contact-info ul li b{opacity:.9; font-weight:300;}
.s-footer .contact-info ul li b:after{content:':'; font-weight:normal; padding: 0 10px 0 2px;}
.s-footer .row-bottom{width:100%; float:left; position:relative; color:#fff; padding: 0px 0; border-top:1px solid rgba(255,255,255,.3); margin-top:40px; height:60px; }
.s-footer .row-bottom .copy{float:right; text-align:right; font-size:14px; font-weight:300; line-height:60px;}
.s-footer .img-main{position:absolute; right:0; bottom:60px; width:250px;}


/* Đánh giá */
.s-evaluate{}
.s-evaluate .title-s{width:100%; float:left; }
.s-evaluate .title-s .title-sub{transform:translateX(-50%); left:50%;}
.s-evaluate .title-s .title-main{text-align:center}
.s-evaluate ul{width:calc(100% + 30px); margin: 50px 0 0 -15px; padding:0; list-style:none; float:left}
.s-evaluate ul li{width:calc(25% - 30px); margin: 0 15px; padding:0; text-align:center; padding: 70px 30px 100px 30px; position:relative; float:left; }
.s-evaluate ul li:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; border-radius:400px; background:var(--color3); opacity:.04}
.s-evaluate ul li .avatar{position:relative; z-index:2; display:block; margin:0 auto; width:70px; padding: 10px; background:var(--color3); border-radius:50%;}
.s-evaluate ul li .avatar svg{width:100%; fill:#fff}
.s-evaluate ul li h4{display:block; font-size:22px; font-weight:700; padding-top:25px; position:relative; z-index:2;}
.s-evaluate ul li .star{padding-top:0px; position:relative; z-index:2;}
.s-evaluate ul li .star i{font-size:16px; padding: 0 3px; color:#fdc500}
.s-evaluate ul li p{display:block; font-size:16px; font-weight:400; position:relative; z-index:2; padding-top:20px;}
.s-evaluate ul li b{display:block; font-weight:600; font-size:17px; padding-top:10px; color:var(--color1)}
.s-evaluate ul li span{font-size:14px; font-weight:400}
.s-evaluate ul li .quote{position:absolute; bottom:40px; z-index:2; width:32px; margin-left:-16px; left:50%; fill:var(--color3)}

/* Panel right */
.pane{position:fixed; z-index:200; width:100%; height:100%; top:0; right:0; background:rgba(0,0,0,.5); transition:.3s; opacity:0; visibility:hidden;}
.pane .inner{width:450px; max-width:100%; height:100%; background:#fff;  position:absolute; top:0px; right:-100px; border-radius:0; transition:.5s; opacity:0; }
.pane .inner .nav-close{ position:absolute; top:10px; right:100%; background:var(--color1); color:#fff; line-height:32px; padding: 0 10px 0 20px; font-size:14px; font-weight:600; height:32px; border-radius: 16px 0 0 16px; text-decoration:none;}
.pane .inner iframe{width:100%; height:100%;}
.pane.is-open{opacity:1; visibility:initial;}
.pane.is-open .inner{right:0; opacity:1;}

@media (max-width:767px) {
    .pane .inner .nav-close{right:0px;}
}

