: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: 400; font-size: 16px; padding:0; overflow-x:hidden }
@media (max-width:991px) {
    body{padding-bottom:70px;}
    section{overflow:hidden; width:100%; float:left;}
}

@media (min-width: 1440px) {
    .container { max-width: 1400px;}
}
section{ position: relative;z-index: 1; transition: all .4s ease-in-out; padding-top:100px; }

.myCart{position:fixed; z-index:10; padding-bottom:15px; right:30px; top:100px; background:#fff; width:60px; height:60px;  display:block; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 3px 20px rgba(0,0,0,.1); border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--color1); text-decoration:none!important;}
.myCart i{font-size:20px;}
.myCart i:before{font-weight:400}
.myCart span{display:block; font-size:11px; text-align:center; white-space:normal; position:absolute; bottom:7px; width:100%; font-weight:600; color:#000 }
.myCart b{position:absolute; top:-11px; right:-11px; background:var(--color2); font-size:12px; color:#fff; text-align:center; width:22px; line-height:23px; height:22px; border-radius:14px; box-shadow: 0 0 0 2px #fff; }

@media (max-width:991px) {
    .myCart{display:none;}
}

#my-cart-modal{display:block!important; opacity:1; max-width:400px; left:initial; width:100%; right:-50px; opacity:0; visibility:hidden; pointer-events:none; transition:.3s; }
#my-cart-modal.show{right:0; opacity:1; visibility:initial; pointer-events:inherit}
#my-cart-modal .modal-dialog{transform:initial!important; margin:0!important; position:initial!important}
#my-cart-modal .modal-dialog .modal-content{width:100%; height:100%; position:absolute; top:0; left:0; border:none; border-radius:0; padding-top:55px; padding-bottom:70px;}
#my-cart-modal .modal-dialog .modal-content .modal-header{padding:0; height:55px; position:absolute; top:0; left:0; width:100%; padding: 0 20px; border:none; box-shadow: 0 1px rgba(0,0,0,.02), 0 3px 10px rgba(0,0,0,.07) }
#my-cart-modal .modal-dialog .modal-content .modal-header .nav-close{position:absolute; right:15px; width:30px; height:30px; margin-top:-16px; display:flex; align-items:center; justify-content:center; top:50%; background:rgba(0,0,0,.03); border-radius:5px; text-decoration:none!important; color:var(--color4); font-size:16px; transition:.3s;}
#my-cart-modal .modal-dialog .modal-content .modal-header .nav-close:hover{background:var(--color4); color:#fff;}
#my-cart-modal .modal-dialog .modal-content .modal-header .modal-title{font-size:16px; line-height:55px; float:left; text-transform:uppercase; font-weight:700}
#my-cart-modal .modal-dialog .modal-content .modal-body{padding:0 25px; width:100%; height:calc(100% - 125px); top:55px; left:0; overflow-y:auto; position:absolute }
#my-cart-modal .modal-dialog .modal-content .modal-body .title-group{width:100%; position:relative; font-size:16px; font-weight:700; margin-top:20px; padding-bottom:10px; color:var(--color3); background:rgba(0,0,0,.05); height:5px; float:left;}
#my-cart-modal .modal-dialog .modal-content .modal-body .title-group span{position:absolute; top:50%; left:0; background:#fff; line-height:20px; height:20px; margin-top:-10px; padding-right:15px;}
#my-cart-modal .modal-dialog .modal-content .modal-footer{position:absolute; left:0; bottom:0; height:70px; width:100%; border:none; box-shadow: 0 -1px rgba(0,0,0,.0); padding: 13px 25px; display:block;}
#my-cart-modal .modal-dialog .modal-content .modal-footer button{height:44px; border:none; margin:0; background:none; font-weight:500; font-size:16px; border-radius:7px; transition:.3s;  }
#my-cart-modal .modal-dialog .modal-content .modal-footer button:first-child{float:left; width:calc(100% - 80px); background:var(--color1); color:#fff; }
#my-cart-modal .modal-dialog .modal-content .modal-footer button:last-child{float:right; width:70px; }
#my-cart-modal .modal-dialog .modal-content .modal-footer button:last-child:hover{color:var(--color4)}
#my-cart-modal .modal-dialog .modal-content .modal-footer .is-disabled{opacity:.5; pointer-events:none; cursor:default}
 
ul.products-list{width:100%; margin:15px 0 0 0; padding:0 0px; list-style:none; display:block; float:left}
ul.products-list li{width:100%; position:relative; float:left; clear:both; padding: 15px 0; border-top:1px dashed rgba(0,0,0,.1)}
ul.products-list li:first-child{border:none;}
ul.products-list li .ele-product{width:100%; display:block; position:relative;}
ul.products-list li .ele-product .col-l{display:block; position:relative; vertical-align:top; width:100px; float:left;}
ul.products-list li .ele-product .col-l img{width:100%;}
ul.products-list li .ele-product .col-r{display:block; position:relative; vertical-align:top; width:calc(100% - 115px); float:right}
ul.products-list li .ele-product .col-r h4{display:block; font-size:16px; font-weight:600; padding-bottom:10px; margin:0; color:var(--color1)}
ul.products-list li .ele-product .col-r .price{display:block; float:left; position:relative; line-height:36px; font-weight:600; padding-right:11px; margin-right:5px;}
ul.products-list li .ele-product .col-r .price:after{content: "₫";padding-left: 3px; font-size: 14px; position: absolute;top: 0;right: 0;}
ul.products-list li .ele-product .col-r .quantity{float:left; position:relative;}
ul.products-list li .ele-product .col-r .quantity:before{content:'x'; padding-right:5px; opacity:.7; font-weight:300}
ul.products-list li .ele-product .col-r .quantity input[type=number]{width:55px; border:1px solid rgba(0,0,0,.1); line-height:32px; border-radius:5px; outline:none; padding-left:10px;}
ul.products-list li .ele-product .col-r .total{float:right; line-height:36px; font-weight:700; position:relative; padding-right:11px;}
ul.products-list li .ele-product .col-r .total:after{content: "₫";padding-left: 3px; font-size: 14px; position: absolute;top: 0;right: 0; font-weight:600}
ul.products-list li .ele-product .col-r .nav-remove{clear:both; display:block; float:left; margin-top:10px; background:var(--color2); font-size:13px; color:#fff; font-weight:500; line-height:25px; height:24px; padding: 0 10px; text-decoration:none!important; border-radius:12px;}
ul.products-list li.totalOrder label{margin:0; float:left; font-weight:500;}
ul.products-list li.totalOrder b{float:right; position:relative; padding-right:15px; font-size:18px; color:var(--color2)}
ul.products-list li.totalOrder b:after{content: "₫";padding-left: 3px; font-size: 17px; position: absolute;top: 0;right: 0; font-weight:600}
ul.products-list li.totalOrder span{width:100%; float:left; position:relative; font-size:14px; font-style:italic; padding-top:5px;}

ul.buyer{width:100%; margin:20px 0 0; padding:0; list-style:none; float:left;}
ul.buyer li{width:100%; float:left; position:relative; margin-top:15px;}
ul.buyer li input[type=text],
ul.buyer li textarea{width:100%; height:45px; border:1px solid rgba(0,0,0,.07); padding: 0 10px; outline:none; border-radius:7px; font-size:15px; transition:.3s;}
ul.buyer li input[type=text]:focus,
ul.buyer li textarea:focus{border-color:rgba(0,0,0,.2)}
ul.buyer li textarea{height:80px; resize:none; padding-top:10px;}

#my-cart-empty-message{width:100%; float:left; position:relative; margin: 20px 0; padding-left:85px;}
#my-cart-empty-message i{font-size:55px; color:var(--color4); position:absolute; top:10px; left:10px;}
#my-cart-empty-message label{margin:0; width:100%; float:left; display:block; font-size:18px; font-weight:600;}
#my-cart-empty-message span{font-size:14px; opacity:.8}


/* 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.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:last-child{margin:0;}
.main-nav ul li:first-child a{padding-left:0;}

@media (max-width:991px) {
    header{background:#fff; position:fixed!important; bottom:0!important; opacity:1!important; visibility:initial!important; pointer-events:initial!important; margin:0!important; top:initial!important; overflow:initial; height:70px; box-shadow: 0 -1px rgba(0,0,0,.04),0 -5px 20px rgba(0,0,0,.15)}
    header .hotline{display:none;}
    .main-nav{position:fixed;  width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.7); z-index:50; transition:.3s; opacity:0; visibility:hidden; pointer-events:none}
    .main-nav ul{display:block; position:absolute; width:300px; height:100%; background:#fff; margin:0; padding: 25px 40px; overflow-y:auto; transition:.3s; left:-50px;}
    .main-nav ul:after{content:''; width:100%; height:100%; background:url(../images/bg-panelLeft.jpg) no-repeat center; background-size:cover; background-position: right bottom; position:absolute; top:0; left:0; opacity:.3; z-index:1; }
    .main-nav ul:before{content:'Danh mục'; font-weight:700; text-transform:uppercase; padding-bottom:15px; width:100%; display:block; color:var(--color1); font-size:17px; z-index:2; position:relative}
    .main-nav ul li{width:100%; position:relative; float:left; display:block; margin:0; border-top:1px dashed rgba(0,0,0,.07); z-index:3;}
    .main-nav ul li a{color:rgba(0,0,0,.85); width:100%; float:left; padding:0 0 0 20px!important; line-height:50px;}
    .main-nav ul li a:before{background:var(--color1); height:calc(100% + 2px); top:-1px; opacity:0; width:calc(100% + 20px); left:-10px;}
    .main-nav ul li a:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f105"; font-size:16px; position:absolute; top:0; left:0; transition:.3s; }
    .main-nav ul li a.active{padding-left:30px!important; color:#fff;}
    .main-nav ul li a.active:before{opacity:1}
    .main-nav ul li a.active:after{left:10px; color:#fff; z-index:3;}
    .main-nav .nav-paneClose{position:absolute; top:15px; left:245px; font-size:20px; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; color:var(--color4); text-decoration:none; transition:.3s; margin-left:-50px; transition:.3s; z-index:3}
    
    .main-nav.is-open{opacity:1; visibility:initial; pointer-events:initial}
    .main-nav.is-open ul{left:0;}
    .main-nav.is-open .nav-paneClose{margin:0;}
    .jumps-prevent{display:none}
}

.mobile-nav{width:100%; position:relative; margin:0; padding:0; display:flex;}
.mobile-nav .col-nav{width:20%; text-align:center;}
.mobile-nav .nav-mobile{width:100%; height:70px; display:block; color:#000;font-weight:600; text-decoration:none; position:relative; padding-top:40px;}
.mobile-nav .nav-mobile i{font-size:20px; width:20px; height:20px; margin-left:-10px; display:flex; align-items:center; justify-content:center; position:absolute; top:15px; left:50%; opacity:.7}
.mobile-nav .nav-mobile i.icon-shop{font-size:18px;}
.mobile-nav .nav-mobile span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;  font-size:13px;  }
.mobile-nav .wrap-drop{width:100%; position:relative; float:left; display:block;}
.mobile-nav .wrap-drop .dropdown-menu{display:block!important; top:initial!important; bottom:100%!important; left:0!important; transform:initial!important; border:none; border-radius:10px; padding: 15px 0; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 0 20px rgba(0,0,0,.05); transition:.3s; opacity:0; visibility:hidden;}
.mobile-nav .wrap-drop .dropdown-menu a{display:block; width:100%; float:left; line-height:35px; padding: 0 25px; color:#000; text-decoration:none; font-size:15px; white-space:nowrap; font-weight:500;}
.mobile-nav .wrap-drop.show .dropdown-menu{opacity:1; visibility:initial; margin-bottom:5px;}

#myCart-mobile{}
#myCart-mobile b{position: absolute; top: 5px; margin-left:5px; left:50%; background: var(--color2); font-size: 12px; color: #fff; text-align: center; width: 18px; line-height: 18px; height: 18px; border-radius: 13px; box-shadow: 0 0 0 1px #fff; font-weight:500; padding-right:1px;}
#myCart-mobile i{opacity:1; color:var(--color1)}
#myCart-mobile span{font-weight:900; color:var(--color1); font-size:14px;}


@media (min-width:992px) and (max-width:1199px) {
    header{padding: 0 10px}
    header>.container{max-width:100%} 
    header .hotline{display:none}
    .main-nav ul{margin:0 auto; }
}


@media (min-width:1200px) and (max-width:1439px) {
    header{padding: 0 20px 0 0}
    header>.container{max-width:100%} 
    header .hotline{position:absolute; top:0; right: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;}

@media (max-width:767px) {
    .parallax-mirror{border-radius:14px; display:none;}
    .title-main{font-size:25px;}
}

/* Slider */

.s-slider{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 .wrap-dropdown{width:220px; float:left; position:relative;}
.s-slider .caption .info .wrap-nav .wrap-dropdown .nav-drop{line-height:54px; width:100%; float:left; text-align:left; background:var(--color1); font-size:18px; font-weight:400; border-radius:7px; color:#fff; text-decoration:none; padding: 0 20px; position:relative;}
.s-slider .caption .info .wrap-nav .wrap-dropdown .nav-drop:before { font-family: "Font Awesome 5"; font-weight: 900; content: "\f0dd"; font-size:16px; position:absolute; top:0; right:20px; line-height:53px;}
.s-slider .caption .info .wrap-nav .wrap-dropdown .dropdown-menu{display:block; transform:initial!important; border:none; border-radius:7px; top:100%!important; width:100%; box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 5px 20px rgba(0,0,0,.07); padding: 15px 25px; transition:.3s; opacity:0; margin-top:-10px; visibility:hidden;}
.s-slider .caption .info .wrap-nav .wrap-dropdown .dropdown-menu a{padding: 7px 0px; display:block; font-size:16px; background:none; color:#000; transition:.3s; position:relative!important; background:none!important; text-decoration:none!important}
.s-slider .caption .info .wrap-nav .wrap-dropdown .dropdown-menu a:before { font-family: "Font Awesome 5"; font-weight: 900; content: "\f105"; font-size:16px; position:absolute; top:7px; left:-10px; transition:.3s; opacity:0;}
.s-slider .caption .info .wrap-nav .wrap-dropdown .dropdown-menu a:hover{color:var(--color1); padding-left:15px; font-weight:600}
.s-slider .caption .info .wrap-nav .wrap-dropdown .dropdown-menu a:hover:before{left:0; opacity:1;}
.s-slider .caption .info .wrap-nav .wrap-dropdown.show .nav-drop:before{content: "\f0de"; line-height:58px}
.s-slider .caption .info .wrap-nav .wrap-dropdown.show .dropdown-menu{opacity:1; visibility:initial; margin-top:5px;}
.s-slider .caption .info .wrap-nav a.nav-agency{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-left:20px; text-decoration:none; text-align:left; width:220px; position:relative}
.s-slider .caption .info .wrap-nav a.nav-agency:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f105"; font-size:16px; position:absolute; top:0; right:20px; line-height:53px;}
.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;}

@media (max-width:767px) {
    .s-slider{margin-bottom:40px;}
    .s-slider .wrap-logo{width:120px; padding:15px; margin-left:-60px}
    #owl-slider .owl-wrapper-outer{border-radius: 0 0 20px 20px; overflow:hidden;}
    #owl-slider .item{height:500px; }
    .s-slider .caption{height:initial; margin-top:350px; display:block; padding-top:0;} 
    .s-slider .caption .info{width:100%; position:relative }
    .s-slider .caption .info .type{justify-content:center}
    .s-slider .caption .info .type span{margin: 0 5px;}
    .s-slider .caption .info h1{font-size:45px; text-align:center; padding-top:5px;}
    .s-slider .caption .info h2{color:#000; width:100%; float:left; text-align:center; font-size:17px; line-height:27px; font-weight:400; margin-top:100px;}
    .s-slider .caption .info .wrap-nav{display:block; position:absolute; top:90px; left:0;}
    .s-slider .caption .info .wrap-nav .wrap-dropdown{width:calc(50% - 5px); float:left; }
    .s-slider .caption .info .wrap-nav .wrap-dropdown .nav-drop{padding: 0 15px; font-size:16px; font-weight:600; box-shadow: 0 2px 10px rgba(0,0,0,.07)}
    .s-slider .caption .info .wrap-nav .wrap-dropdown .dropdown-menu{width:210px;}
    .s-slider .caption .info .wrap-nav a.nav-agency{width:calc(50% - 5px); float:right; border-color:none; color:var(--color1); font-size:16px; font-weight:600; text-align:left; padding: 0 15px; margin:0; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.07)}
    .s-slider .caption ul{width:100%; position:relative; display:block;right:0; bottom:initial; float:left; padding:0 10px 10px 0; clear:both; border-radius:20px; background:rgba(0,0,0,.04); margin-top:20px; }
    .s-slider .caption ul li{width:calc(50% - 10px); float:left; height:150px; margin:10px 0 0 10px; border-radius:10px!important; padding-left:15px; padding-right:15px; }
    .s-slider .caption ul li:before{display:none;}
    .s-slider .caption ul li.title:after{right:initial; left:50%; padding-left:10px;}
    .s-slider .caption ul li.title{background:var(--color4)}
    .s-slider .caption ul li span{color:#000; font-size:16px; font-weight:600}
}

@media (min-width:768px) and (max-width:991px) {
    .s-slider .caption{}
    .s-slider .caption .info{width:100%; padding-bottom:100px}
    .s-slider .caption ul{width:600px; right:50%; margin-right:-300px; bottom:-100px}
    .s-slider .caption, #owl-slider .item{height:750px}
}

@media (min-width:992px) and (max-width:1199px) {
    .s-slider .caption{}
    .s-slider .caption .info{width:100%; padding-bottom:100px}
    .s-slider .caption ul{width:600px; right:50%; margin-right:-300px; bottom:-100px}
}



/* 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:500px; 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}

@media (max-width:767px) {
    .s-about{padding-top:10px; margin-bottom:40px;}
    .s-about .col-img{width:100%; padding-bottom:30px;}
    .s-about .col-img .img-bg{height:400px;}
    .s-about .col-img .img-bg img{object-position: bottom center;}
    .s-about .col-img .img-main{height:380px; right:-50px; bottom:-50px;}
    .s-about .col-img ul{display:none;}
    .s-about .col-info{width:100%}
    .s-about .col-info p{margin-top:10px; line-height:24px;}
}

@media (min-width:768px) and (max-width:991px) {
    .s-about{padding-top:150px;}
    .s-about .col-img{width:calc(100% - 100px)}
    .s-about .col-img .img-bg img{object-position: bottom center;}
    .s-about .col-info{width:100%}
}


@media (min-width:992px) and (max-width:1199px) {
    .s-about .col-img{width:calc(100% - 100px)}
    .s-about .col-img .img-bg img{object-position: bottom center;}
    .s-about .col-info{width:100%}
}


/* Đặt điểm nỗi bật  */
.s-features{}
.s-features .parallax-window{width:calc(100% - 100px); height:calc(100% - 100px); 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(--color4); border:1px solid var(--color4); 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(--color2); border-color:var(--color2)}
.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;}

@media (max-width:767px) {
    .s-features{padding-top:10px; margin-bottom:40px;}
    .s-features .parallax-window{width:calc(100% - 30px); left:15px; bottom:initial; top:10px; height:450px; background:url(../images/dac-diem-noi-bat-cua-muoi-de-gi.jpg) no-repeat center; background-size:cover; border-radius:14px; background-position: -80px bottom}
    .s-features .parallax-window:before{content:''; background-image: linear-gradient(to bottom, rgba(0,51,120,.7) 60%, rgba(0,51,120,.0)); border-radius:14px;}
    .s-features .inner{display:block; padding:0; }
    .s-features .inner .col-l{width:100%; padding:0; height:450px; padding: 50px 30px 0 30px}
    .s-features .inner .col-l p{font-size:17px; margin-top:15px;}
    .s-features .inner .col-r{width:100%; float:left;}
    .s-features .inner .col-r ul{width:100%; float:left; padding-left:20px; margin-top:15px;}
    .s-features .inner .col-r ul li{color:#000; padding:20px 0 0px 35px; margin-top:0; border-radius:0;}
    .s-features .inner .col-r ul li h4{font-size:18px; color:var(--color3); font-weight:700;}
    .s-features .inner .col-r ul li p{ border-bottom:1px dashed rgba(0,0,0,.15); padding-bottom:20px;}
    .s-features .inner .col-r ul li:last-child{padding-left:30px; padding-top:20px; margin-top:20px;}
    .s-features .inner .col-r ul li:last-child span{position:absolute; left:30px; top:0; line-height:initial}
    .s-features .inner .col-r ul li:last-child a{margin: 10px 0 0 0; width:100%;}
}

@media (min-width:768px) and (max-width:991px) {
    .s-features{margin-top:-30px;}
    .s-features .parallax-window{width:100%; left:0; }
    .s-features .inner .col-l{width:50%; padding-right:40px}
    .s-features .inner .col-l p{font-size:17px}
    .s-features .inner .col-r{width:50%}
    .s-features .inner .col-r ul li:last-child span{display:block; text-align:center; line-height:initial}
    .s-features .inner .col-r ul li:last-child a{ margin-left:0; margin-top:10px; width:100%}
}
 
@media (min-width:992px) and (max-width:1199px) {
    .s-features .parallax-window{width:100%; left:0; }
    .s-features .inner .col-l{width:50%; padding-right:40px}
    .s-features .inner .col-l p{font-size:17px}
    .s-features .inner .col-r{width:50%}
    .s-features .inner .col-r ul li:last-child span{display:block; text-align:center; line-height:initial}
    .s-features .inner .col-r ul li:last-child a{ margin-left:0; margin-top:10px;}
}


/* 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;}

@media (max-width:767px) {
    .s-use{padding-top:10px; margin-bottom:40px;}
    .s-use ul{margin-top:0;}
    .s-use ul li{width:100%}
    .s-use ul li .wrap-img .clip-img{height:300px;}
    .s-use .note{margin-top:30px;}
    .s-use .note b{}
    .s-use .note span{display:block; padding-top:10px; width:100%; float:left; padding-left:15px; padding-right:15px;}
}

@media (min-width:768px) and (max-width:991px) {
    .s-use{padding-top:70px}
    .s-use ul li{width:50%}
    .s-use .note b{}
    .s-use .note span{display:block; padding-top:10px; width:100%; float:left;}
}

@media (min-width:992px) and (max-width:1199px) {
    .s-use{padding-top:70px}
}


/* Đó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 .price{position:relative; display:block; clear:both; float:left; padding-right:15px; color:var(--color4); font-weight:700; font-size:20px; margin-top:15px;}
.s-pack .inner .col-info .caption .price:before{content:'Đơn giá:'; font-size:16px; color:rgba(0,0,0,.7); font-weight:600; padding-right:10px;}
.s-pack .inner .col-info .caption .price:after{content: "₫";padding-left: 3px; font-size: 18px; position: absolute;top: 0;right: 0; font-weight:700;}
.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.buytk-btn{width:100%; float:left; position:relative; color:#000; margin-top:25px; }
.s-pack .inner .col-info .caption a.buytk-btn span{width:calc(100% - 120px); float:left; font-size:15px; font-weight:500; opacity:.7; display:block; padding-top:5px; transition:.3s;}
.s-pack .inner .col-info .caption a.buytk-btn img{width:120px; float:right}
.s-pack .inner .col-info .caption a.buytk-btn:hover span{opacity:1}
.s-pack .inner .col-info .caption a.my-cart-btn{line-height:50px; margin-top:10px; display:inline-block; border-radius:26px; font-size:17px; background:var(--color4); border:1px solid var(--color4); text-align:left; width:100%;color:#fff; text-decoration:none; font-weight:600; padding: 0 25px; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0); position:relative; }
.s-pack .inner .col-info .caption a.my-cart-btn: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.my-cart-btn:hover{box-shadow: inset 0 50px rgba(0,0,0,.2)}
.s-pack .inner .col-info .caption a.my-cart-btn: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.my-cart-btn{background:var(--color2); border:1px solid var(--color2);}
.s-pack .inner .col-right .caption .price{color: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;}

@media (max-width:767px) {
    .s-pack{padding-top:10px; margin-bottom:40px;} 
    .s-pack .inner{width:100%; margin:0;}
    .s-pack .inner .col-center{display:none}
    .s-pack .inner .col-info{width:100%; margin:20px 0 0 0;}
    .s-pack .inner .col-right{margin:20px 0 0 0;}
    .s-pack .note{padding-bottom:0;}
}

@media (min-width:768px) and (max-width:991px) {
    .s-pack{padding-top:50px;} 
    .s-pack .inner .col-center{display:none}
    .s-pack .inner .col-info{width:calc(50% - 10px); margin:0 10px 0 0;}
    .s-pack .inner .col-right{margin:0 0 0 10px;}
}

@media (min-width:992px) and (max-width:1199px) {
    .s-pack{padding-top:50px;} 
    .s-pack .inner .col-center{display:none}
    .s-pack .inner .col-info{width:calc(50% - 100px); margin:0 15px 0 85px;}
    .s-pack .inner .col-right{margin:0 85px 0 15px;}
}


/* Đă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:10px 0 0 0; list-style:none;}
.s-agency .body-row .wrap-form ul li{width:100%; position:relative; margin-top:15px; float:left}
.s-agency .body-row .wrap-form ul li input[type=text],
.s-agency .body-row .wrap-form ul li textarea{width:100%; height:45px; float:left; 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 .field-validation-error{font-size:12px;}
.s-agency .body-row .wrap-form ul li button{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); outline:none; border:none; text-align:left;}
.s-agency .body-row .wrap-form ul li button:hover{box-shadow:inset 0 52px rgba(0,0,0,.25)}
.s-agency .body-row .wrap-form ul li button:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f061"; float:right; font-size:16px;}
.s-agency .body-row .wrap-form img.avatar{position:absolute; right:100%; bottom:0; width:325px; margin-right:-150px;}

@media (max-width:767px) {
    .s-agency{padding-top:10px; margin-bottom:40px;}
    .s-agency .body-row .container .inner{padding:0; height:initial; width:100%; float:left;}
    .s-agency .head-row .col-r p{padding-top:10px;}
    .s-agency .body-row{margin-top:0;}
    .s-agency .body-row .parallax-window{width:calc(100% - 30px); left:15px; bottom:initial; top:00px; height:350px; background:url(../images/muoi-de-gi-ly-phong-tren-ban-an-viet.jpg) no-repeat center; background-size:cover; border-radius:14px; background-position: center bottom; position:relative; float:left;}
    .s-agency .body-row .parallax-window:before{content:''; background-image: linear-gradient(to bottom, rgba(0,51,120,.5), rgba(0,51,120,.1)); border-radius:14px; }
    .s-agency .body-row .wrap-form{width:100%; position:initial; float:left; border:none; box-shadow:none; padding:0; background:none; margin-top:20px; }
    .s-agency .body-row .wrap-form img.avatar{bottom:100%; right:-30px; height:320px; width:initial; margin:0;}
    .s-agency .body-row ul.list{position:relative; width:calc(100% + 20px); float:left; margin-left:-10px; margin-top:30px;}
    .s-agency .body-row ul.list li{width:33.3333333%; margin:0; padding-left:10px; padding-right:10px; text-align:center}
    .s-agency .body-row ul.list li i{width:40px; left:50%; margin-left:-20px;}
}

@media (min-width:768px) and (max-width:991px) {
    .s-agency .body-row .parallax-window{width:100%; left:0; }
    .s-agency{padding-top:50px; margin-bottom:100px;} 
    .s-agency .body-row ul.list{top:100%; bottom:0; margin-top:40px; width:100%; float:left}
    .s-agency .body-row ul.list li{width:33.3333%; margin:0; text-align:center; padding-left:30px; padding-right:30px; float:left; display:block; height:100px; }
    .s-agency .body-row ul.list li i{width:60px; text-align:center; left:50%; margin-left:-30px}
    .s-agency .body-row ul.list li span{width:100%; float:left; display:block; position:relative}
}

@media (min-width:992px) and (max-width:1199px) {
    .s-agency .body-row .parallax-window{width:100%; left:0; }
    .s-agency{padding-top:50px; margin-bottom:100px;} 
    .s-agency .body-row ul.list{top:100%; bottom:0; margin-top:40px; width:100%; float:left}
    .s-agency .body-row ul.list li{width:33.3333%; margin:0; text-align:center; padding-left:30px; padding-right:30px; float:left; display:block; height:100px; }
    .s-agency .body-row ul.list li i{width:60px; text-align:center; left:50%; margin-left:-30px}
    .s-agency .body-row ul.list li span{width:100%; float:left; display:block; position:relative}
}

@media (min-width:1200px) and (max-width:1439px) {
    .s-agency .body-row .wrap-form{width:500px; padding-left:150px;}
    .s-agency .body-row ul.list{width:500px; margin-left:-20px;}
    .s-agency .body-row ul.list li{width:33.3333333333%; margin-right:0px; padding-right:20px; padding-left:20px; }
    .s-agency .body-row ul.list li i{left:20px;}
}



/* Đá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 .title-s .total{clear:both; text-align:center; padding-top:5px; font-size:14px; font-weight:400; color:rgba(0,0,0,.75);}
.s-evaluate .title-s .total b{font-weight:800; font-size:16px; color:#000}
.s-evaluate .title-s .total .star{display:inline-block; font-size:16px; padding: 0 5px;}
.s-evaluate .title-s .total .star i{font-size:18px; color:#fdc500; padding: 0 2px;}
.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 35px 100px 35px; 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; opacity:.75}
.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)}

@media (max-width:767px) {
    .s-evaluate{padding-top:10px; margin-bottom:40px;}
    .s-evaluate ul{margin-top:20px; width:100%; margin:0;}
    .s-evaluate ul li{width:100%;margin-top:30px; margin:0; padding:20px 20px 80px 20px; margin-top:15px; text-align:left;}
    .s-evaluate ul li:before{border-radius:14px;}
    .s-evaluate ul li .quote{bottom:initial; top:20px; right:20px; margin:0; left:initial}
    .s-evaluate ul li .avatar{position:absolute; bottom:20px; left:20px; width:50px;}
    .s-evaluate ul li h4{margin-top:0; padding-top:0; font-size:20px; }
    .s-evaluate ul li p{padding-bottom:0;}
    .s-evaluate ul li span{position:absolute; left:85px; bottom:21px;}
    .s-evaluate ul li b{margin:0; position:absolute; left:85px; bottom:43px;}
}

@media (min-width:768px) and (max-width:991px) {
    .s-evaluate ul{margin-top:20px}
    .s-evaluate ul li{width:calc(50% - 30px);margin-top:30px;}
}

@media (min-width:992px) and (max-width:1199px) {
    .s-evaluate ul{margin-top:20px}
    .s-evaluate ul li{width:calc(50% - 30px);margin-top:30px;}
}

/* Câu hỏi thường gặp */
.s-faqs{}
.s-faqs .col-l{width:calc(50% - 40px); position:relative; float:left;}
.s-faqs .col-l p{display:block; clear:both; font-weight:400; font-size:17px; padding-top:15px;}
.s-faqs .col-l .wrap-img{width:100%; height:250px; border-radius:14px; overflow:hidden; margin-top:40px;}
.s-faqs .col-l .wrap-img img{object-fit:cover; width:inherit; height:inherit}
.s-faqs .col-l .wrap-contact{width:100%; float:left; position:relative; margin-top:40px;}
.s-faqs .col-l .wrap-contact label{width:100%; margin: 0 0 25px 0; float:left;}
.s-faqs .col-l .wrap-contact .nav-mobile{position:relative; float:left; text-decoration:none; padding-left:75px; height:60px; color:#000; padding-top:5px; }
.s-faqs .col-l .wrap-contact .nav-mobile i{width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:var(--color1); color:#fff; border-radius:50%; font-size:20px; position:absolute; top:0; left:0;}
.s-faqs .col-l .wrap-contact .nav-mobile span{opacity:.75}
.s-faqs .col-l .wrap-contact .nav-mobile b{display:block; font-size:18px; font-weight:700; padding-top:2px; color:#000}
.s-faqs .col-l .wrap-contact .nav-mail{position:relative; float:left; text-decoration:none; padding-left:60px; height:60px; color:#000; padding-top:6px; margin-left:30px; padding-right:30px; }
.s-faqs .col-l .wrap-contact .nav-mail:before{content:''; width:100%; height:100%; border-radius:50px; background:var(--color1); position:absolute; top:0; left:0; opacity:.07}
.s-faqs .col-l .wrap-contact .nav-mail i{width:60px; height:60px; display:flex; align-items:center; justify-content:center; color:var(--color1); border-radius:50%; font-size:20px; position:absolute; top:0; left:5px; z-index:3;}
.s-faqs .col-l .wrap-contact .nav-mail span{opacity:.75; position:relative; z-index:2; font-weight:400; font-size:15px;}
.s-faqs .col-l .wrap-contact .nav-mail b{display:block; font-size:17px; font-weight:700; padding-top:0; color:#000; position:relative; z-index:2; margin-top:-2px;}
.s-faqs .col-r{width:calc(50% - 40px); position:relative; float:right;}

#accordion-faqs{width:100%; float:left; margin-top:0px;}
#accordion-faqs .card{margin-top:25px; border:none; position:relative;}
#accordion-faqs .card:before{content:''; width:100%; height:100%; position:absolute; z-index:1; background:var(--color1); top:0; left:0; opacity:.05; border-radius:7px;}
#accordion-faqs .card .card-header{border:none; position:relative; background:none; padding:0; z-index:2; }
#accordion-faqs .card .card-header a{position:relative; z-index:2; color:#000; font-size:17px; font-weight:600;  padding: 15px 50px 15px 20px; display:block; }
#accordion-faqs .card .card-header a:before{font-family: "Font Awesome 5"; font-weight: 400; content: "\f068"; position:absolute; top:15px; right:15px; font-size:20px;}
#accordion-faqs .card .card-header a.collapsed{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 
#accordion-faqs .card .card-header a.collapsed:before{content: "\f067";}
#accordion-faqs .card .collapse{padding:0px; position:relative; z-index:2}  
#accordion-faqs .card .collapse .card-body{border-top:1px solid rgba(0,0,0,.08); color:rgba(0,0,0,.8)}

@media (max-width:767px) {
    .s-faqs{padding-top:10px;margin-bottom:20px;}
    .s-faqs .col-l{width:100%}
    .s-faqs .col-l .wrap-img{width:100%; float:left; margin-top:0px; height:200px;}
    .s-faqs .col-l .wrap-img img{width:100%}
    .s-faqs .col-l .wrap-contact{width:100%; float:left; margin-top:20px; }
    .s-faqs .col-l .wrap-contact a{width:100%}
    .s-faqs .col-l .wrap-contact .nav-mail{margin: 25px 0 0 0; clear:both}
    .s-faqs .col-r{width:100%; margin-top:15px;}
}


@media (min-width:768px) and (max-width:991px) {
    .s-faqs{padding-top:70px;}
    .s-faqs .col-l{width:100%}
    .s-faqs .col-l .wrap-img{width:calc(100% - 280px); float:right;}
    .s-faqs .col-l .wrap-img img{width:100%}
    .s-faqs .col-l .wrap-contact{width:250px; float:left}
    .s-faqs .col-l .wrap-contact a{width:100%}
    .s-faqs .col-l .wrap-contact .nav-mail{margin: 25px 0 0 0; clear:both}
    .s-faqs .col-r{width:100%; margin-top:15px;}
}

@media (min-width:992px) and (max-width:1199px) {
    .s-faqs{padding-top:70px;}
    .s-faqs .col-l{width:100%}
    .s-faqs .col-l .wrap-img{width:calc(100% - 280px); float:right;}
    .s-faqs .col-l .wrap-img img{width:100%}
    .s-faqs .col-l .wrap-contact{width:250px; float:left}
    .s-faqs .col-l .wrap-contact a{width:100%}
    .s-faqs .col-l .wrap-contact .nav-mail{margin: 25px 0 0 0; clear:both}
    .s-faqs .col-r{width:100%; margin-top:15px;}
}



/* Footer */
.s-footer{background:url(../images/bg-footer.jpg) no-repeat center; background-size:cover; padding-top:0; background-position: center 0px; margin-top:160px; }
.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 .inner .quote{position:absolute; bottom:100%; left:0; font-size:18px; font-weight:600; margin-bottom:40px; padding-left:60px; color:#000}
.s-footer .inner .quote svg{position:absolute; top:-10px; left:0; transform:scaleX(-1); fill:var(--color3); height:40px;}
.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;}

@media (max-width:767px) {
    .s-footer{display:none;}
}

@media (min-width:768px) and (max-width:991px) {
    .s-footer .caption{width:200px}
    .s-footer .caption .logo:before{display:none;}
    .s-footer .caption .qr-code{display:none;}
    .s-footer .contact-info{width:calc(100% - 200px); padding-left:40px}
    .s-footer .contact-info ul:first-child{padding-right:30px;}
    .s-footer ul.social:before{display:none}
    .s-footer .img-main{display:none}
    .s-footer .row-bottom .copy{line-height:initial; width:calc(100% - 150px); padding-top:12px; }
}

@media (min-width:992px) and (max-width:1199px) {
    .s-footer .caption{width:200px}
    .s-footer .caption .logo:before{display:none;}
    .s-footer .caption .qr-code{display:none;}
    .s-footer .contact-info{width:calc(100% - 200px); padding-left:40px}
    .s-footer .contact-info ul:first-child{padding-right:30px;}
    .s-footer ul.social:before{display:none}
}

@media (min-width:1200px) and (max-width:1439px){
    .s-footer .caption{width:350px}
    .s-footer .caption .logo{width:175px}
    .s-footer .caption .qr-code {width:175px}
    .s-footer .contact-info{width: calc(100% - 350px);}
    .s-footer .contact-info ul:first-child{padding-right:30px;}
}

/* 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;}

#myModal-alerAddToCart{}
#myModal-alerAddToCart .modal-dialog{max-width:330px; margin-left:auto; margin-right:auto}
#myModal-alerAddToCart .modal-content{border:none; border-radius:10px;}
#myModal-alerAddToCart .modal-body{padding:25px;}
#myModal-alerAddToCart .modal-body img{width:100%; display:block; margin: 0 auto; border-radius:7px;}
#myModal-alerAddToCart .modal-body h4{width:100%; float:left; text-align:center; margin:20px 0 5px 0; font-weight:700; font-size:19px;}
#myModal-alerAddToCart .modal-body .price{position:relative; width:100%; text-align:center; padding-bottom:10px;}
#myModal-alerAddToCart .modal-body .price b{position:relative; padding-right:11px; font-weight:700; font-size:16px; }
#myModal-alerAddToCart .modal-body .price b:before{content:'Đơn giá:'; font-size:14px; color:rgba(0,0,0,.7); font-weight:400; padding-right:10px;}
#myModal-alerAddToCart .modal-body .price b:after{content: "₫";padding-left: 3px; position: absolute;top: -2px;right: 0; font-weight:600; font-size:15px;}
#myModal-alerAddToCart .modal-body span{display:block; font-weight:500; text-align:center; font-size:16px; color:var(--color3)}
#myModal-alerAddToCart .modal-body a{position:relative!important; width:calc(50% - 5px); text-align:center; display:block; float:left; text-decoration:none; background:var(--color1)!important; line-height:40px; margin-top:20px; font-size:14px; color:#fff; font-weight:500; border-radius:7px; box-shadow:inset 0 0 0 rgba(0,0,0,0); transition:.3s}
#myModal-alerAddToCart .modal-body a:hover{box-shadow:inset 0 40px rgba(0,0,0,.15)}
#myModal-alerAddToCart .modal-body a:last-child{float:right; background:rgba(0,0,0,.05)!important; color:#000}

@media (max-width:767px) {
    .pane .inner .nav-close{right:0px;}
}

.dntCaptcha{position:relative; float:left; z-index:1; margin-bottom:15px; padding-right:50px;}
.dntCaptcha img{height:40px; margin-top:3px; width:initial!important; position:relative!important; right:initial!important; margin:0!important; float:left; border-radius:7px; }
.dntCaptcha .wrap-textbox{width:120px; float:left; position:relative; padding-left:30px;}
.dntCaptcha .wrap-textbox:before{content:"="; line-height:40px; font-size:20px; float:left; position:absolute; top:0; left:0; text-align:center; width:30px;}
.dntCaptcha .wrap-textbox .text-value{height:40px!important; text-align:center}
.dntCaptcha .nav-refresh{width:40px; height:40px; display:flex; position:absolute; top:0; right:0; background:rgba(0,0,0,.07); border-radius:7px; text-decoration:none}
.dntCaptcha .nav-refresh:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f2f1"; font-size:16px; display:flex; align-items:center; justify-content:center; color:rgba(0,0,0,.75); width:100%; }
.dntCaptcha .field-validation-error{width:100%; display:block; clear:both}