section{width:100%; position:relative; padding-top:80px;}
.title-st {font-family: "Noto Serif", serif; font-optical-sizing: auto;  font-weight: 600; font-style: normal; font-size:35px; color:#000}

@media (max-width:767px) {
    section{padding-top:50px;}
    .title-st{font-size:28px; line-height:35px;}
}

@media (min-width:768px) and (max-width:991px){
    .title-st{font-size:32px; line-height:35px;}
}


/* Slider */
.st-slider{width:100%; position:relative; display: flex; justify-content: center; align-items: center; overflow:hidden; padding-top:90px; }
.st-slider .mouse-wheel{border:1px solid rgba(255,255,255,.7); border-radius: 32px; height: 43px; width: 25px; margin-left:-12px; position:absolute; left:50%; bottom:35px; z-index:7; display:none; }
.st-slider .mouse-wheel:before{content:'';background-color: #fff; position: relative; height: 5px; width: 5px; margin: 0 auto;  animation: wheel_animation 1.5s linear infinite;  display:block; border-radius:50%;}
@keyframes wheel_animation {0%{opacity: 0;top: 2px;}50% {opacity: 1;top: 50%;}100% {opacity: 0;top: 33px;}}

.wrap-slider{width:100%; float:left; position:relative; margin-top:0px;z-index:2;}
.wrap-slider .caption{position:absolute; bottom:0; left:0; z-index:5; width:100%;text-align:center; border-radius:0 0 20px 20px; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)); color:#fff; display:flex; align-items:end; padding:50px 30px; }
.wrap-slider .caption h4{font-size:17px; background:var(--color1); display:inline-block; line-height:34px; padding: 0 30px; border-radius:20px;}
.wrap-slider .caption h1{font-family: "Noto Serif", serif; text-transform:uppercase; color:var(--color2); font-weight:600; font-size:55px; color:#fff; margin-top:10px;}
.wrap-slider .caption p{width:100%; max-width:650px; display:block; margin: 0 auto; font-size:18px; padding-top:10px;}
.wrap-slider .caption .wrap-nav{width:100%; float:left; position:relative; padding-top:30px;}
.wrap-slider .caption .wrap-nav a{line-height:48px; padding: 0; width:180px; text-align:center; color:#fff; display:inline-block; margin: 0 10px; border-radius:7px; font-weight:600; transition:.3s; text-decoration:none!important; text-transform:uppercase; font-size:15px;  box-shadow: inset 0 0 rgba(0,0,0,0),0 0 0 2px rgba(255,255,255,0); transition:.3s;}
.wrap-slider .caption .wrap-nav a:hover{box-shadow:inset 0 50px rgba(0,0,0,.1), 0 0 0 3px rgba(255,255,255,.2)}
.wrap-slider .caption .wrap-nav a:first-child{background:var(--color2); color:#fff;}
.wrap-slider .caption .wrap-nav a:last-child{background:#fff; color:var(--color2)}
.wrap-slider #main-slider{width:100%; height:780px; display:block; border-radius:20px; overflow:hidden; position:relative;}



@media (max-width:767px) {
    .st-slider{padding-top:0px; margin-top:0px; padding: 0 15px 0 15px}
    .wrap-slider .caption{padding:0 15px; bottom:48px; border-radius: 0 0 14px 14px}
    .wrap-slider .caption h4{font-size:15px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:100%; padding: 0 15px; line-height:30px;}
    .wrap-slider .caption h1{font-size:30px}
    .wrap-slider .caption p{font-size:15px; padding-top:0; display:none}
    .wrap-slider .caption .wrap-nav{display:flex; margin-bottom:-48px; padding-top:15px;}
    .wrap-slider .caption .wrap-nav a{ flex:1; margin:0; border-radius:0; font-size:14px; background:var(--color2)!important; box-shadow:none!important; color:#fff!important; position:relative;}
    .wrap-slider .caption .wrap-nav a:first-child{border-radius: 0 0 0 14px;}
    .wrap-slider .caption .wrap-nav a:first-child:after{content:''; width:1px; height:32px; margin-top:-16px; background:rgba(255,255,255,.2); top:50%; right:0; position:absolute; display:block;}
    .wrap-slider .caption .wrap-nav a:last-child{border-radius: 0 0 14px 0;}
    .wrap-slider #main-slider{height:400px; margin-bottom:48px; border-radius: 0 0 14px 14px}
}

@media (min-width:768px) and (max-width:991px){
    .st-slider{padding-top:130px; padding-left:15px; padding-right:15px;}
    .wrap-slider{}
    .wrap-slider .caption h1{font-size:45px}
    .wrap-slider #main-slider{height:600px;}

}

@media (min-width:1440px) and (max-width:1599px){
}

@media (min-width:1600px) {
   
}

/* nav */
nav{ position: relative; width: 100%; z-index: 2; transition: all .1s ease-in-out; height: 60px;  opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; background:#fff;}
nav.fixed {position: fixed; top: 0; opacity:1; visibility:initial; pointer-events:initial; box-shadow: 0 1px rgba(0,0,0,.03), 0 2px 15px rgba(0,0,0,.1); left:0; z-index:200}
.main-nav{float:left; position:relative; width:calc(100% - 140px); overflow-x:auto; white-space:nowrap }
.main-nav::-webkit-scrollbar { display: none;}
.main-nav ul{margin:0 20px 0 0; padding:0; display:inline-flex; list-style:none;}
.main-nav ul li{position:relative; margin-right:5px; transition: all 0.3s ease;}
.main-nav ul li a{color:rgba(0,0,0,.75); line-height:60px; font-weight:500; font-size:15px; 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; white-space:nowrap}
.main-nav ul li a:before{content:''; width:100%; height:calc(100% - 24px); position:absolute; z-index:1; background:var(--color2); opacity:0; top:12px; left:0; transition:.3s; border-radius:20px;}
.main-nav ul li a.active{color:#fff; }
.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;}

nav .nav-cart{position:absolute; right:15px; top:10px; text-decoration:none!important; color:#000; padding-left:40px;}
nav .nav-cart:before{content:'Giỏ hàng'; font-size:12px; white-space:nowrap; font-weight:400; opacity:.7}
nav .nav-cart i{font-size:25px; font-weight:300; position:absolute; top:6px; left:0; transition:.3s; color:var(--color2);}
nav .nav-cart b{font-size:14px; margin-top:-2px; display:block; font-weight:600}
nav .nav-cart b:after{content:'Sản phẩm'; white-space:nowrap; font-weight:500; padding-left:5px;}

@media (max-width:767px) {
    nav{height:45px;}
    nav.fixed{ box-shadow: 0 1px rgba(0,0,0,.02), 0 2px 7px rgba(0,0,0,.07);} 
    nav .nav-cart{display:none;}
    .main-nav{width:100%;}
    .main-nav ul{margin-right:0;}
    .main-nav ul li{margin-right:15px;}
    .main-nav ul li:last-child{margin-right:0;}
    .main-nav ul li a{line-height:45px; padding: 0px; font-size:14px; font-weight:400;}
    .main-nav ul li a:before{height:3px; border-radius:0; top:initial; bottom:0;}
    .main-nav ul li a.active{color:#000; font-weight:600;}
}

@media (min-width:768px) and (max-width:991px) {
    nav .container{min-width:100%}
}

@media (min-width: 992px) and (max-width:1199px) {
    .main-nav{width:calc(100% - 150px)}
    nav .container{max-width:100%}
}


/* About */
.st-about{margin-top:10px; margin-top:-50px;}
.st-about .col-img{width:calc(50% + 50px); float:left; position:relative; padding-left:50px;}
.st-about .col-img img{width:calc(100% + 50px);}
.st-about .col-info{width:calc(50% - 50px); float:left; position:relative; padding-left:50px;}
.st-about .col-info p{display:block; margin:0px; padding:20px 0 0 0;}
.st-about .col-info ul{margin:20px 0 0 0; padding:0; clear:both; list-style:none;}
.st-about .col-info ul li{display:block; clear:both; margin-top:5px;}
.st-about .col-info ul li.title{font-weight:600; padding-bottom:5px;}
.st-about .col-info ul li.title:before{display:none;}
.st-about .col-info ul li:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f00c"; color:var(--color1); padding-right:10px; font-size:13px;}
.st-about ul.feature{margin:0; padding:0; display:block; list-style:none; position:absolute; top:0; left:15px; width:120px; }
.st-about ul.feature li{position:relative; margin-top:20px;}
.st-about ul.feature li .inner{position:relative; width:100%; position:relative; padding:90px 15px 15px 15px; border:2px solid rgba(0,0,0,.07); border-radius:10px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.st-about ul.feature li svg{width:60px; position:absolute; top:20px; left:50%; margin-left:-30px; fill:var(--color2) }
.st-about ul.feature li label{font-size:15px; text-align:center; font-weight:500; margin:0;}

@media (max-width:767px) {
    .st-about .col-img{width:100%; padding-left:0;}
    .st-about .col-img img{margin-left:-25px; margin-top:0px;}
    .st-about .col-info{width:100%; padding-left:0;}
    .st-about ul.feature{width:calc(100% + 30px); display:flex; left:0; padding: 0 10px; position:relative; margin-left:-15px; margin-top:30px; float:left;}
    .st-about ul.feature li{flex:1; margin: 0 5px;}
    .st-about ul.feature li .inner{padding-left:10px; padding-right:10px;}
}

@media (min-width:768px) and (max-width:991px){
    .st-about .col-img{width:100%; }
    .st-about .col-img img{margin-left:-25px; margin-top:0px;}
    .st-about .col-info{width:100%; padding-left:0;}
    .st-about ul.feature{ top:-20px;}
    .st-about .col-info ul{width:50%; float:left; clear:initial}
}

@media (min-width: 992px) and (max-width:1199px) {
    .st-about .col-img{padding-left:0;}
    .st-about ul.feature{top:initial; bottom:0; display:flex; width:calc(50% + 50px); justify-content:center}
    .st-about ul.feature li{width:120px; margin-right:30px;}
    .st-about ul.feature li:last-child{margin-right:0;}
}


/* Thành phần */
.st-ingredient{}
.st-ingredient h4{max-width:767px; width:100%; font-size:17px; font-weight:400; color:#000; padding-top:10px; line-height:25px;}

ul.ingredient{width:calc(100% + 40px) ; margin:20px 0 0 -20px; padding:0; list-style:none; display:flex;}
ul.ingredient li{width:calc(20% - 40px); margin: 20px 20px 0 20px; position:relative; }
ul.ingredient li .wrap-img{width:100%; height:350px;  position:relative; }
ul.ingredient li .wrap-img img{object-fit: cover; width: inherit; height: inherit; border-radius:14px;}
ul.ingredient li .wrap-img b{position:absolute; bottom:0; left:20px; z-index:3; background:rgba(255,255,255,.8); border-radius:7px 7px 0 0; width:50px; height:40px; display:flex;  justify-content:center; align-items:flex-end; font-size:17px; font-weight:900; letter-spacing:2px;}
ul.ingredient li .wrap-img b:after{content:''; width:100%; height:7px; background:var(--color2); position:absolute; top:100%; left:0; border-radius: 0 0 8px 8px; display:none}
ul.ingredient li .wrap-info{width:100%; float:left; position:relative; padding-top:30px;}
ul.ingredient li .wrap-info h3{font-size:20px; font-weight:600; padding-bottom:10px; color:var(--color1)}


@media (max-width:767px) {
    ul.ingredient{display:block; width:100%; margin:0; padding: 0 15px;}
    ul.ingredient li{width:100%; margin:0 0; padding: 20px 0; float:left; border-top:1px solid rgba(0,0,0,.07)}
    ul.ingredient li:first-child{border:none;}
    ul.ingredient li .wrap-img{width:140px; height:140px; float:left; margin-right:15px;}
    ul.ingredient li .wrap-img b{font-size:13px; width:32px; height:32px; top:8px; left:8px; padding-top:2px; align-items:center; border-radius:7px; background:var(--color1); color:#fff}
    ul.ingredient li .wrap-info{width:initial; float:initial; padding-top:0;}
    ul.ingredient li .wrap-info h3{font-size:18px; padding-bottom:0px;}
    ul.ingredient li .wrap-info p{padding:0; margin:0;}
}

@media (min-width:768px) and (max-width:991px){
    ul.ingredient{max-width:720px; width:initial; margin: 0 auto; display:block; padding: 0 15px;}
    ul.ingredient li{width:100%; margin: 20px 0 0 0; clear:both; float:left}
    ul.ingredient li .wrap-img{width:200px; height:170px; float:left; margin: 0 20px 0 0}
    ul.ingredient li .wrap-img b{ bottom:initial; top:-20px; left:100%; margin-left:20px; background:none; width:initial; height:initial; font-size:60px; opacity:.1}
    ul.ingredient li .wrap-info{width:initial; float:initial; padding-top:65px;}
    ul.ingredient li .wrap-info h3{padding-bottom:0;}
}

@media (min-width: 992px) and (max-width:1439px) {
    ul.ingredient{width:calc(100% + 20px); margin-left:-10px;}
    ul.ingredient li{width:calc(20% - 20px); margin: 0 10px}
    ul.ingredient li .wrap-img{height:240px}
}

/* Hương vị */
.st-flavor{}
.st-flavor .inner{width:100%; float:left; position:relative; display:table;}
.st-flavor .inner .col-info{ position:relative; background:var(--color1); padding: 50px 70px; border-radius: 20px 0 0 20px; color:#fff; display:table-cell; vertical-align:middle; width:50%; }
.st-flavor .inner .col-info .title-st{color:#fff; line-height:45px;}
.st-flavor .inner .col-info p{display:block; padding-top:20px; margin:0; font-size:17px;}
.st-flavor .inner .col-info ul{width:100%; margin:0; padding:0 0 0 20px; list-style:none;}
.st-flavor .inner .col-info ul li{width:100%; padding: 7px 0 7px 25px; border-top:1px solid rgba(255,255,255,0); position:relative;}
.st-flavor .inner .col-info ul li:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f00c"; padding-right:10px; font-size:13px; position:absolute; top:9px; left:0;}
.st-flavor .inner .col-info ul li:first-child{border:none; margin-top:10px;}
.st-flavor .inner .col-video{position:relative; height:550px; overflow:hidden; border-radius: 0 20px 20px 0; display:table-cell;}
.st-flavor .inner .col-video #myVideo-flavor{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); height:100%;}
.st-flavor .inner .col-video .myVideo-controls{position:absolute; bottom:30px; right:0; z-index:5; background:rgba(0,0,0,.5); display:flex; padding: 0 5px; border-radius:7px 0 0 7px;}
.st-flavor .inner .col-video .myVideo-controls button{border:none; outline:none; height:35px; background:none; color:#fff; padding: 0 7px; }
.st-flavor .inner .col-video .myVideo-controls button:before{font-weight:300}
.st-flavor .inner .col-video .myVideo-controls button:last-of-type{font-size:18px;}
@media (max-width:767px) {
    .st-flavor .inner{display:block; width:calc(100% + 30px); margin-left:0; background:var(--color1); margin-left:-15px; padding: 40px 15px;}
    .st-flavor .inner .col-info{display:block; width:100%; border-radius:0; background:none; padding:0 0; }
    .st-flavor .inner .col-info .title-st{line-height:35px;}
    .st-flavor .inner .col-video{display:block; width:100%; height:320px; border-radius:14px; margin-top:20px;}
}
@media (min-width:768px) and (max-width:991px) {
    .st-flavor .inner{display:block; width:100%; margin-left:0; background:var(--color1); margin-left:0; padding: 40px 40px; border-radius:20px;}
    .st-flavor .inner .col-info{display:block; width:100%; border-radius:0; background:none; padding:0 0; }
    .st-flavor .inner .col-info .title-st{line-height:35px;}
    .st-flavor .inner .col-video{display:block; width:100%; height:420px; border-radius:16px; margin-top:25px;}
}
@media (min-width: 992px) and (max-width:1199px) {
    .st-flavor{width:calc(100% + 30px); margin-left:-15px; }
    .st-flavor .container{max-width:100%}
    .st-flavor .inner .col-info{padding:40px 30px 40px 40px;}
    .st-flavor .inner .col-video{height:initial}
}


/* Công dụng */
.st-uses{text-align:center;}
.st-uses h4{max-width:767px; width:100%; font-size:17px; font-weight:400; color:#000; padding-top:10px; display:block; margin: 0 auto}
ul.uses{width:calc(100% + 40px) ; margin:20px 0 0 -20px; padding:0; list-style:none; display:flex;}
ul.uses li{width:calc(20% - 40px); margin: 20px 20px 0 20px; position:relative; }
ul.uses li .row-head{width:100%; display:flex; position:relative; text-align:left;}
ul.uses li .row-head b{width: 110px; text-shadow: 1px 1px 0 var(--color2), -1px -1px 0 var(--color2), 1px -1px 0 var(--color2), -1px 1px 0 var(--color2), 1px 1px 0 var(--color2); color: #fff; font-size: 47px; font-weight: 900; letter-spacing: 2px; position: relative;}
ul.uses li .row-head h4{font-size: 20px; font-weight: 600;}
ul.uses li .row-body{width:100%; margin:0; padding:0; text-align:justify; padding-top:20px;}
ul.uses li .row-body .wrap-img{width:100%; margin:0; padding:0; height:350px; border-radius:10px; overflow:hidden;}
ul.uses li .row-body .wrap-img img{width:inherit; height:inherit; object-fit:cover}
ul.uses li .row-body p{margin:0; padding:20px 0 0 0;}

@media (max-width:767px) {
    ul.uses{width:100%; margin:0; display:block; padding: 0 15px;}
    ul.uses li{width:100%; margin:20px 0 0 0;}
    ul.uses li .row-head b{margin-top:-4px;}
    ul.uses li .row-head h4{font-size:18px; margin:0;}
    ul.uses li .row-body{padding-top:0px;}
    ul.uses li .row-body .wrap-img{width:140px; height:135px; float:left; margin: 0 15px 0 0}
    ul.uses li .row-body p{padding-top:0;}
}

@media (min-width:768px) and (max-width:991px) {
    ul.uses{width:initial; max-width:720px; margin:0 auto; display:block; padding: 10px 15px 0 15px;}
    ul.uses li{width:100%; margin:20px 0 0 0; float:left; clear:both;}
    ul.uses li .row-head{padding-left:220px; position:absolute; top:-15px; left:0; display:block}
    ul.uses li .row-head b{margin-top:0;}
    ul.uses li .row-head h4{font-size:18px; margin:0; padding-top:0; width:100%; margin:-5px 0 0 0; color:var(--color2)}
    ul.uses li .row-body{padding-top:0px;}
    ul.uses li .row-body .wrap-img{width:200px; height:170px; float:left; margin: 0 20px 0 0}
    ul.uses li .row-body p{padding-top:85px;}
}

@media (min-width: 992px) and (max-width:1439px) {
    ul.uses{width:calc(100% + 30px); margin-left:-10px; display:block;}
    ul.uses li{width:calc(33.333333333% - 30px);  margin: 20px 15px 0 15px; float:left; }
    ul.uses li .row-body .wrap-img{height:240px;}
    ul.uses li:nth-child(1),
    ul.uses li:nth-child(2){width:calc(50% - 30px)}
    ul.uses li:nth-child(1) .row-body .wrap-img,
    ul.uses li:nth-child(2) .row-body .wrap-img{height:280px;}
    ul.uses li .row-head{align-items:center}
    ul.uses li .row-head h4{padding-top:0; width:calc(100% - 80px)}
    ul.uses li .row-head b{width:80px;}
}

@media (min-width: 1200px) and (max-width:1439px) {
    ul.uses li .row-body .wrap-img{height:280px;}
    ul.uses li:nth-child(1) .row-body .wrap-img,
    ul.uses li:nth-child(2) .row-body .wrap-img{height:320px;}
}


/* Đối tượng sử dụng */
.st-object{background:url(../../Data/photo/tach-tra-binh-minh.jpg) no-repeat center 190px; background-size: 570px auto;}
.st-object .title-st{text-align:center;}
.st-object h4{max-width:767px; width:100%; font-size:17px; font-weight:400; color:#000; padding-top:10px; line-height:25px; text-align:center; display:block; margin: 0 auto}
ul.list-object{width:100%; margin: 0 0 0 0px; padding:0; list-style:none;  display:block; float:left; }
ul.list-object li{width:100%; float:left; position:relative; z-index:1;}
ul.list-object li .item{width:100%; position:relative; float:left; }
ul.list-object li .item .wrap-img{position:relative;}
ul.list-object li .item .wrap-img img{width:inherit; height:inherit; object-fit:cover; border-radius:10px; }
ul.list-object li .item .wrap-img:before{content:''; width:32px; height:32px; line-height:32px; border-radius:50%; background:var(--color2); position:absolute; top:3px; right:3px; z-index:2; display:block; font-family: "Font Awesome 5"; font-weight: 400; font-size:16px; content: "\f067"; color:#fff; text-align:center; box-shadow: 0 0 10px rgba(0,0,0,.2); transition:.3s; }
ul.list-object li .item .wrap-img:after{content:'Click để xem thêm'; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; position:absolute; top:0; left:0; background:rgba(0,0,0,.55); border-radius:50%; font-size:15px;opacity:0; text-align:center; padding: 0 20px;}
ul.list-object li .item .caption{position:relative; width:100%}
ul.list-object li .item .caption h3{font-size: 19px;font-weight: 600; margin:0;  color:#000; line-height:25px;}
ul.list-object li .item .caption p{margin:0; padding:8px 0 0 0;}


@media (max-width:767px) {
    .st-object{background:none;}
    ul.list-object li{margin-top:20px; padding-top:20px; border-top:1px solid rgba(0,0,0,.07)}
    ul.list-object li:first-child{padding-top:10px; border:none;}
    ul.list-object li .item .wrap-img:before{display:none;}
    ul.list-object li .item .wrap-img{position:relative; width:140px; height:140px; float:left; margin: 0 15px 0 0;}
    ul.list-object li .item .caption h3{font-size:18px; color:var(--color2); margin-top:-3px;}
}

@media (min-width:768px) and (max-width:1199px) {
    .st-object{background:none;}
    ul.list-object{width:calc(100% + 30px); margin-left:-15px;}
    ul.list-object li{width:calc(50% - 30px); margin: 30px 15px 0 15px}
    ul.list-object li .item .wrap-img{width:100%; height:220px; margin-bottom:15px;}
    ul.list-object li .item .wrap-img:before,
    ul.list-object li .item .wrap-img:after{display:none;}
    ul.list-object li .item .wrap-img img{max-width:inherit; max-height:inherit; object-fit:cover}
    ul.list-object li .item .caption h3{color:var(--color2)}
}

@media (min-width: 992px) and (max-width:1199px) {
    ul.list-object li .item .wrap-img{height:260px;}
}

@media (min-width:1200px) and (max-width:1439px) {
    .st-object{background:none;}
    ul.list-object{width:calc(100% + 30px); margin-left:-15px;}
    ul.list-object li{width:calc(33.33333333% - 30px); margin: 30px 15px 0 15px}
    ul.list-object li .item .wrap-img{width:100%; height:280px; margin-bottom:15px;}
    ul.list-object li .item .wrap-img:before,
    ul.list-object li .item .wrap-img:after{display:none;}
    ul.list-object li .item .wrap-img img{max-width:inherit; max-height:inherit; object-fit:cover}
    ul.list-object li .item .caption h3{color:var(--color2)}
}

@media (min-width: 1440px) {
    ul.list-object li{width:calc(50% - 240px); float:left; position:relative; z-index:1; margin-top:65px;}
    ul.list-object li:before{content:''; display:block; padding-top:125px;}
    ul.list-object li .item{width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; cursor:pointer}
    ul.list-object li .item .wrap-img{width:125px; height:125px;position:absolute; top:0; left:0; }
    ul.list-object li .item .wrap-img img{ border-radius:50%; }
    ul.list-object li .item .caption{position:absolute; right:0; top:0px; z-index:3; width:calc(100% - 145px);  }
    ul.list-object li .item .caption p{-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;}
    ul.list-object li:nth-child(1){margin-right:240px;}
    ul.list-object li:nth-child(1) .wrap-img{left:initial; right:0;} 
    ul.list-object li:nth-child(1) .caption{left:0; right:initial;} 
    ul.list-object li:nth-child(2){margin-left:240px;}
    ul.list-object li:nth-child(3){width:calc(50% - 290px); margin-right:290px; }
    ul.list-object li:nth-child(3) .wrap-img{left:initial; right:0;} 
    ul.list-object li:nth-child(3) .caption{left:0; right:initial;} 
    ul.list-object li:nth-child(4){width:calc(50% - 290px); margin-left:290px;}
    ul.list-object li:nth-child(5){margin-right:240px;}
    ul.list-object li:nth-child(5) .wrap-img{left:initial; right:0;} 
    ul.list-object li:nth-child(5) .caption{left:0; right:initial;} 
    ul.list-object li:nth-child(6){margin-left:240px;}
    ul.list-object li:hover:not(.extend) .wrap-img:before{transform:scale(0); opacity:0;}
    ul.list-object li:hover:not(.extend) .wrap-img:after{opacity:1;}
    ul.list-object li:nth-child(2n) .item .wrap-img:before{right:initial; left:3px}
    ul.list-object li.extend{z-index:10;} 
    ul.list-object li.extend .item{background:#fff; height:initial; padding:20px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1); border-radius:20px;}
    ul.list-object li.extend .item .wrap-img{width:100%; height:240px; position:relative;}
    ul.list-object li.extend .item .wrap-img img{border-radius:10px;}
    ul.list-object li.extend .item .wrap-img:before{content:"\f00d"; font-weight:400; background:var(--color3)}
    ul.list-object li.extend .item .caption{width:100%; position:relative; padding-top:20px;}
    ul.list-object li.extend .item .caption h3{color:var(--color2)}
    ul.list-object li.extend .item .caption p{display:block}
}

/* Cách pha trà */
.st-bartending{}
.st-bartending .title-st{color:var(--color1)}
.st-bartending h4{max-width:767px; width:100%; font-size:17px; font-weight:400; color:#000; padding-top:10px; line-height:25px; display:block; }
.st-bartending .inner{width:100%; float:left; position:relative; display:table; border-radius:20px; }
.st-bartending .inner:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0; border-radius:20px; background:var(--color1); opacity:.1}
.st-bartending .inner .col-left{width:400px; display:table-cell; position:relative; padding: 20px 50px; vertical-align:middle; z-index:2;}
.st-bartending .inner .col-right{display:table-cell; position:relative; vertical-align:top; z-index:2; padding: 30px 0}
.st-bartending .inner .col-right ul{width:100%; margin:0; padding:0; list-style:none; display:flex; height:100%;}
.st-bartending .inner .col-right ul li{flex:1; position:relative; border-left:1px solid rgba(0,0,0,.1); text-align:center; padding: 0 30px}
.st-bartending .inner .col-right ul li img{height:130px; display:block; margin: 0 auto 20px auto}
.st-bartending .inner .col-right ul li b{background:var(--color1); color:#fff; line-height:30px; display:inline-block; border-radius:15px; padding: 0 20px; }
.st-bartending .inner .col-right ul li p{margin:15px 0 0 0; padding:0;}

@media (max-width:767px) {
    .st-bartending .inner{display:block}
    .st-bartending .inner .col-left{width:100%; padding:0; display:block; text-align:center; padding: 40px 20px 0 20px}
    .st-bartending .inner .col-right{display:block; padding:0 0 40px 0; width:100%;}
    .st-bartending .inner .col-right ul{display:block; width:100%;}
    .st-bartending .inner .col-right ul li{width:100%; border:none; padding: 0 20px}
}

@media (min-width:768px) and (max-width:991px) {
    .st-bartending .inner{display:block;}
    .st-bartending .inner .col-left{width:100%; display:block; padding-top:30px;}
    .st-bartending .inner .col-right{padding-top:0;}
    .st-bartending .inner .col-right ul li:first-child{border:none;}
}
@media (min-width:1200px) and (max-width:1439px) {
    .st-bartending .inner .col-left{width:320px;}
}

/* Cảm nhận từ khách hàng */
.st-feel{}
.st-feel .parallax-window{ width: 100%; height: calc(100% - 80px); margin: 0; z-index: 1; position: absolute; bottom: 0; left:0px; }
.st-feel .parallax-window:before{content:''; width:100%; height:300px; background-image: linear-gradient(to bottom, #2b1900, rgba(0,0,0,0)); position:absolute; top:0; left:0; z-index:2; opacity:.5; display:block; border-radius:20px;}
.st-feel .title-st{text-align:center; text-align:center; color:#fff;}
.st-feel h4{max-width:767px; width:100%; font-size:17px; font-weight:400; color:#fff; padding-bottom:5px; line-height:25px; text-align:center; display:block; margin: 0 auto}
.st-feel .container{z-index:3; position:relative; padding-top:80px;}
.parallax-mirror{border-radius:20px; overflow:hidden}

ul.list-feel{width:calc(100% + 40px); margin: 0 0 0 -20px; padding:30px 0 70px 0 ; list-style:none; display:block; float:left;}
ul.list-feel li{width:calc(25% - 40px); color:#fff; margin: 15px 20px; padding:0; list-style:none; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 30px 30px 110px 30px; border-radius:20px; box-shadow: 0 0 0 0px rgba(255,255,255,.3); float:left; background:rgba(0,0,0,.5)}
ul.list-feel li .wrap-star{ float: left; position: relative; display: flex; position:absolute; top:60px; left:30px;}
ul.list-feel li .wrap-star i { font-size: 14px; padding: 0 4px 0 0; color: #eecd15;}
ul.list-feel li svg.quote{height:50px; fill:#fff; float:right; opacity:.5}
ul.list-feel li p{margin:0; padding:25px 0 0 0; width:100%; display:block; float:left; line-height:28px; }
ul.list-feel li .foot{width:calc(100% - 50px); float:left; position:absolute; height:50px; padding-left:65px; margin-top:25px; left:25px; bottom:30px;}
ul.list-feel li .foot .avatar{width:50px; height:50px; float:left; position:absolute; top:0; left:0;}
ul.list-feel li .foot .avatar img{height:100%; opacity:.5}
ul.list-feel li .foot .avatar svg{fill:#fff; opacity:.5;}
ul.list-feel li .foot .avatar svg path:first-child{opacity:0;}
ul.list-feel li .foot label{font-size:15px; margin:0; font-weight:700 ; padding-bottom:3px; color:var(--color2)}
ul.list-feel li .foot span{display:block; font-size:14px; opacity:.7}

@media (max-width:767px) {
    .st-feel .parallax-window{height:0;}
    .st-feel .parallax-window:before{display:none;}
    .st-feel .container{padding-top:0;}
    .st-feel .title-st,.st-feel h4{color:#000;}
    ul.list-feel{width:100%; margin:0; padding:0;}
    ul.list-feel li{width:100%; float:left; position:relative; margin:30px 0 0 0; padding:0px 0px 65px 0px; color:#000; background:none;}
    ul.list-feel li .wrap-star{left:20px; top:25px;}
    ul.list-feel li svg.quote{fill:var(--color1); opacity:1; position:absolute; top:10px; right:30px; height:40px;}
    ul.list-feel li p{padding: 55px 20px 20px 20px; line-height:24px; border:1px solid rgba(0,0,0,.1); border-radius:10px; position:relative;}
    ul.list-feel li p:after{content:''; position:absolute; top:100%; left:20px; border-bottom:25px solid transparent; border-right:20px solid rgba(0,0,0,.1); display:block; margin-top:1px;}
    ul.list-feel li .foot{bottom:0; width:calc(100% - 50px); left:50px;}
    ul.list-feel li .foot .avatar svg{fill:var(--color2); height:50px; opacity:.5}

}

@media (min-width:768px) and (max-width:991px) {
    .st-feel .parallax-window{width:calc(100% - 40px); left:20px; bottom:initial; top:80px; height:400px;}
    ul.list-feel{width:100%; margin:50px 0 0 0; padding:0;}
    ul.list-feel li{width:100%; float:left; position:relative; margin:30px 0 0 0; padding:0px 0px 65px 0px; color:#000; background:#fff;}
    ul.list-feel li .wrap-star{left:20px; top:25px;}
    ul.list-feel li svg.quote{fill:var(--color1); opacity:1; position:absolute; top:10px; right:30px; height:40px;}
    ul.list-feel li p{padding: 55px 20px 20px 20px; line-height:24px; border:1px solid rgba(0,0,0,.1); border-radius:10px; position:relative;}
    ul.list-feel li p:after{content:''; position:absolute; top:100%; left:20px; border-bottom:25px solid transparent; border-right:20px solid rgba(0,0,0,.1); display:block; margin-top:1px;}
    ul.list-feel li .foot{bottom:0; width:calc(100% - 50px); left:50px;}
    ul.list-feel li .foot .avatar svg{fill:var(--color2); height:50px; opacity:.5}
}

@media (min-width: 992px) and (max-width:1199px) {
    .st-feel .container{padding-top:300px;}
    .st-feel .parallax-window{width:calc(100% - 40px); left:20px; bottom:initial; top:80px; height:500px;}
    .st-feel .parallax-window:before{content:''; width:100%; height:300px; background-image: linear-gradient(to top, #2b1900, rgba(0,0,0,0)); position:absolute; top:initial; bottom:0; left:0; z-index:2; opacity:1; display:block; border-radius:20px;}
    ul.list-feel{width:calc(100% + 30px); margin:10px 0 0 -15px; padding:0;}
    ul.list-feel li{width:calc(50% - 30px); float:left; position:relative; margin:25px 15px 0 15px; padding:0px 0px 65px 0px; color:#000; background:#fff;}
    ul.list-feel li .wrap-star{left:20px; top:25px;}
    ul.list-feel li svg.quote{fill:var(--color1); opacity:1; position:absolute; top:10px; right:30px; height:40px;}
    ul.list-feel li p{padding: 55px 20px 20px 20px; line-height:24px; border:1px solid rgba(0,0,0,.1); border-radius:10px; position:relative;}
    ul.list-feel li p:after{content:''; position:absolute; top:100%; left:20px; border-bottom:25px solid transparent; border-right:20px solid rgba(0,0,0,.1); display:block; margin-top:1px;}
    ul.list-feel li .foot{bottom:0; width:calc(100% - 50px); left:50px;}
    ul.list-feel li .foot .avatar svg{fill:var(--color2); height:50px; opacity:.5}
}

@media (min-width:1200px) and (max-width:1439px) {
    ul.list-feel{width:calc(100% + 30px); margin: 0 0 0 -15px;}
    ul.list-feel li{width:calc(50% - 30px); margin:25px 15px 0 15px; }
}


/* Đóng gói */
.st-pack{}
.st-pack .row-head{width:100%; display:table;  }
.st-pack .row-head .col-title{position:relative;width:33.333333333%; display:table-cell;  }
.st-pack .row-head .col-title h4{max-width:767px; width:100%; font-size:17px; font-weight:400; color:#000; padding-top:10px; line-height:25px; display:block; }
.st-pack .row-head .col-info{position:relative; padding-left:50px; display:table-cell; vertical-align:middle }
.st-pack .row-head .col-info p{margin:0; padding:0; background:rgba(96,47,0,.05); background:var(--color1); padding:37px 35px; border-radius:15px; color:#fff; font-weight:600; }

.row-packItem{width:100%; display:table; margin-top:50px;}
.row-packItem .col-img{position:relative; display:table-cell; width:33.333333333%}
.row-packItem .col-img:before{content:''; padding-top:280px; display:block}
.row-packItem .col-img .box{position:absolute; width:100%; height:100%;  top:0; left:0; z-index:2;}
.row-packItem .col-img .box img{width:inherit; height:inherit; object-fit:cover; object-position:center center; border-radius:20px;}
.row-packItem .col-info{position:relative; padding-left:50px; display:table-cell; vertical-align:top}
.row-packItem .col-info .col-left{width:calc(100% - 280px); float:left; padding-right:30px;}
.row-packItem .col-info .col-left h3{display:flex; color:var(--color2); font-weight:700; font-size:20px; margin:0; padding:0;}
.row-packItem .col-info .col-left ul{width:100%; margin:0; padding:5px 0 0 0; list-style:none; float:left;}
.row-packItem .col-info .col-left ul li{width:100%; float:left; position:relative; margin-top:15px; padding-left:25px;}
.row-packItem .col-info .col-left ul li:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f00c"; color:var(--color1); font-size:14px; position:absolute; top:1px; left:0;}
.row-packItem .col-info .col-left ul li b{color:#000; padding-bottom:3px; font-size:17px;}
.row-packItem .col-info .col-left ul li p{padding:0; margin:0;}
.row-packItem .col-info .col-right{width:280px; height:100%; float:right; position:absolute; padding-left:30px; position:absolute; top:0; right:0; border-left:1px solid rgba(0,0,0,.07)}
.row-packItem .col-info .col-right .price{display:block; position:relative; display:flex; padding-top:22px; align-items:end}
.row-packItem .col-info .col-right .price:before{content:'Đơn giá:'; position:absolute; top:0; left:0;}
.row-packItem .col-info .col-right .price b{position:relative; font-size:25px; color:#ec1f26; font-weight:800; padding-right:15px;}
.row-packItem .col-info .col-right .price b:after{content: '₫'; position: absolute; top: -2px; right: 0;font-size: 20px; font-weight:700;}
.row-packItem .col-info .col-right .price span{padding-bottom:5px; font-size:17px; font-weight:600; color:#000}
.row-packItem .col-info .col-right .price span:before{content:'/'; padding: 0 3px; opacity:.5; font-weight:400;}
.row-packItem .col-info .col-right ul{width:100%; margin:0; padding:20px 0 0 0; list-style:none;}
.row-packItem .col-info .col-right ul li{width:100%; margin:0; padding:5px 0; display:table; font-size:15px;}
.row-packItem .col-info .col-right ul li span{display:table-cell; position:relative;}
.row-packItem .col-info .col-right ul li span:last-child{text-align:right; color:#000; font-weight:500;}
.row-packItem .col-info .col-right .nav-bottom{width:calc(100% - 30px); position:absolute; right:0; bottom:0;}
.row-packItem .col-info .col-right .nav-addtocart{width:100%; line-height:45px; text-align:center; background:var(--color2); color:#fff; text-decoration:none; display:block; border-radius:7px; font-weight:600; transition:.3s; box-shadow:inset 0 0 rgba(0,0,0,0); outline:none;}
.row-packItem .col-info .col-right .nav-addtocart:hover{box-shadow:inset 0 45px rgba(0,0,0,.1)  }

@media (max-width:767px) {
    .st-pack .row-head{display:block;}
    .st-pack .row-head .col-title{display:block; width:100%;}
    .st-pack .row-head .col-info{width:100%; padding-left:0; margin-top:15px; float:left;}
    .st-pack .row-head .col-info p{padding:25px;}

    .row-packItem{display:block; float:left; clear:both; margin-top:30px;}
    .row-packItem .col-img{display:block; width:100%;}
    .row-packItem .col-info{display:block; padding-left:0; width:100%;}
    .row-packItem .col-info .col-left{width:100%; padding-top:20px;}
    .row-packItem .col-info .col-right{position:relative; width:100%; border:none; padding:20px 20px 80px 20px; background:rgba(0,0,0,.05); border-radius:20px; margin-top:20px; }
    .row-packItem .col-info .col-right ul{padding-top:10px;}
    .row-packItem .col-info .col-right .nav-bottom{width:calc(100% - 40px); right:20px; bottom:20px;}
}

@media (min-width:768px) and (max-width:991px) {
    .st-pack .row-head .col-title{width:45%; padding-right:20px;}
    .st-pack .row-head .col-title h4{padding-top:20px;}
    .st-pack .row-head .col-info{width:55%; padding-left:20px;}
    .st-pack .row-head .col-info p{padding:25px 35px}

    .row-packItem .col-img{width:100%; display:block; margin-bottom:25px;}
    .row-packItem .col-img:before{padding-top:350px}
    .row-packItem .col-info{width:100%; padding-left:0px; display:block; position:relative; float:left;}
}


/* Đại lý trà bình minh */
.st-agency{ height:720px;}
.st-agency .bg-agency{width:100%; height:calc(100% - 80px); position:absolute; bottom:0; left:0; z-index:1; background-image: linear-gradient(to bottom, #ffffff 40%, #e1ccbb ); border-radius:20px; overflow:hidden; }
.st-agency .bg-agency img{position:absolute; height:680px; position:absolute; bottom:-2px; left:-180px;}
.st-agency .container{position:relative; z-index:3;}
.st-agency .col-left{width:420px; float:left; position:relative; padding-top:30px;}
.st-agency .col-left h4{font-size:19px; font-weight:600; padding-top:10px;}
.st-agency .col-left p{padding: 15px 0 0 0}
.st-agency .col-right{float:right; position:relative; padding-top:30px;}
.st-agency .wrap-form{width:430px; border-radius:14px; position:relative;}
.st-agency .wrap-form b{font-size:19px; font-weight:700; padding-bottom:5px; width:100%; float:left}
.st-agency .wrap-form p{font-weight:400; color:rgba(0,0,0,.7); margin:0; padding:0;}
.st-agency .wrap-form ul{margin:0; padding:10px 0 0 0; list-style:none;}
.st-agency .wrap-form ul li{width:100%; position:relative; margin-top:15px; float:left}
.st-agency .wrap-form ul li input[type=text],
.st-agency .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)}
.st-agency .wrap-form ul li textarea{height:80px; resize:none; overflow-y:auto; padding:10px;}
.st-agency .wrap-form ul li input[type=text]:focus,
.st-agency .wrap-form ul li textarea:focus{border-color:var(--color1); background:#fff;}
.st-agency .wrap-form ul li .field-validation-error{font-size:12px;}
.st-agency .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;}
.st-agency .wrap-form ul li button:hover{box-shadow:inset 0 52px rgba(0,0,0,.25)}
.st-agency .wrap-form ul li button:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f061"; float:right; font-size:16px;}

@media (max-width:767px) {
    .st-agency{height:initial}
    .st-agency .bg-agency{height:400px; bottom:initial; top:0; border-radius:0 0 20px 20px;}
    .st-agency .bg-agency img{height:initial; width:800px; left:50%; margin-left:-400px;}
    .st-agency .col-left{width:100%; padding-top:0;}
    .st-agency .col-left h4{max-width: 350px}
    .st-agency .col-left p{padding-top:270px;}
    .st-agency .col-right{width:100%; float:left; padding-top:10px;}
    .st-agency .wrap-form{width:100%;}
}
@media (min-width:768px) and (max-width:991px) {
    .st-agency{height:initial; padding-bottom:50px;}
    .st-agency .bg-agency{height:800px;}
    .st-agency .bg-agency img{left:-280px}
    .st-agency .col-left{padding-top:0;}
    .st-agency .col-right{clear:left; float:initial}
    .st-agency .wrap-form ul li input[type=text],
    .st-agency .wrap-form ul li textarea{background:rgba(255,255,255,.85)}
}

@media (min-width: 992px) and (max-width:1199px) {
    .st-agency{ height:initial; padding-bottom:220px;}
    .st-agency .col-left{padding-top:0;}
    .st-agency .col-right{padding-top:0;}
    .st-agency .bg-agency{width:100%; height:350px; position:absolute; bottom:0; left:0; z-index:1; background-image: linear-gradient(to bottom, #ffffff 40%, #e1ccbb ); border-radius:20px; overflow:hidden; }
    .st-agency .bg-agency img{height:370px;bottom:-2px; left:-100px;}
}

@media (min-width:1200px) and (max-width:1439px) {
    .st-agency{ height:initial; padding-bottom:70px;}
    .st-agency .bg-agency img {height:650px; left:-100px}
    .st-agency .col-left{padding-top:0; width:100%;}
    .st-agency .col-right{clear:both; float:initial}
}

@media (min-width:1440px) {
    .st-agency .bg-agency img{left:50%; transform:translateX(-50%); margin-left:-150px;}
}


/* Tin mới nhất */
.st-news{}
.st-news .title-st{text-align:center}
.st-news h4{font-size:18px; font-weight:500; padding-top:5px; text-align:center; width:100%;}
.st-news .nav-newsAll{width:100%; float:left; text-align:center; position:relative; margin-top:35px;}
.st-news .nav-newsAll:before{content:''; width:calc(100% - 30px); height:1px; background:#000; position:absolute; top:50%; left:15px; z-index:1; opacity:.1}
.st-news .nav-newsAll a{position:relative; background:var(--color2); width:150px; line-height:42px; padding: 0 20px; border-radius:25px; color:#fff; font-size:15px; font-weight:600; transition:.3s; display:block; margin: 0 auto; z-index:2; box-shadow: 0 0 0 5px #fff;}
.st-news .nav-newsAll a:hover{color:#fff; background:var(--color2)}
ul.listNews{width:calc(100% + 40px); float:left; margin: 30px 0 10px -20px; padding:0; list-style:none;}
ul.listNews li{width:calc(25% - 40px); margin: 0 20px; position:relative; float:left;}
ul.listNews li .wrap-img{width:100%; position:relative;}
ul.listNews li .wrap-img:before{content:''; padding-top:70%; display:block;}
ul.listNews li .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; display:block;}
ul.listNews li .wrap-img a img{width:inherit; height:inherit; object-fit:cover; border-radius:15px;}
ul.listNews li .wrap-info{width:100%; float:left; position:relative}
ul.listNews li .wrap-info .wrap-attr{display:block; position:relative; display:flex; margin-top:25px;}
ul.listNews li .wrap-info .wrap-attr .ele{font-size:14px; color:rgba(0,0,0,.7); position:relative;}
ul.listNews li .wrap-info .wrap-attr .ele b{font-weight:normal}
ul.listNews li .wrap-info .wrap-attr .ele:first-of-type{padding-right:15px; margin-right:15px;}
ul.listNews li .wrap-info .wrap-attr .ele:first-of-type span{display:none;}
ul.listNews li .wrap-info .wrap-attr .ele:first-of-type:after{content:''; width:1px; height:15px; background:#000; position:absolute; top:3px; right:0; opacity:.5 }
ul.listNews li .wrap-info .wrap-attr .ele:last-of-type b{font-weight:600; color:#000; padding-right:5px;}
ul.listNews li .wrap-info .name{text-decoration:none; color:#000; width:100%; float:left; margin-top:15px; transition:.3s;}
ul.listNews li .wrap-info .name:hover{color:var(--color2)}
ul.listNews li .wrap-info .name h3{font-size:18px; font-weight:600; line-height:25px;}
ul.listNews li .wrap-info p{margin: 0;  padding: 8px 0 0 0; -webkit-line-clamp: 4; -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; display: -webkit-box; width:100%; float:left; clear:both}
ul.listNews li .nav-link{padding:0; clear:both; margin-top:20px; display:inline-block; color:#000; font-size:16px; font-weight:600; display:none;}
ul.listNews li:nth-child(n+5){display:none;}

@media (max-width:767px) {
    ul.listNews{width:100%; margin:0;}
    ul.listNews li{width:100%; margin:30px 0 0 0; float:left}
    ul.listNews li .wrap-img{width:140px; float:left; margin: 0 15px 0 0}
    ul.listNews li .wrap-info,
    ul.listNews li .wrap-info .name{width:initial; float:initial}
    ul.listNews li .wrap-info .name h3{color:var(--color2)}
    ul.listNews li .wrap-info p{padding-top:0px;  overflow:initial; display:initial}
    ul.listNews li .wrap-info .wrap-attr{margin:0 0 10px 0}
}

@media (min-width:768px) and (max-width:1199px) {
    ul.listNews{width:calc(100% + 30px); margin-left:-15px; margin-top:0;}
    ul.listNews li{width:calc(50% - 30px); margin: 30px 15px 0 15px;} 
}

@media (min-width:1200px) and (max-width:1439px) {
    ul.listNews{width:calc(100% + 30px);  margin: 30px 0 10px -15px;}
    ul.listNews li{width:calc(33.333333333% - 30px); margin: 0 15px;}
    ul.listNews li:nth-child(n+4){display:none;}
}

/* Hỏi và đáp */
.st-faqs{}
.st-faqs .col-l{width:calc(50% - 40px); position:relative; float:left;}
.st-faqs .col-l h4{font-size:18px; font-weight:500; padding-top:5px;}
.st-faqs .col-l p{display:block; clear:both; font-weight:400; font-size:17px; padding-top:15px;}
.st-faqs .col-l .wrap-img{width:100%; height:250px; border-radius:14px; overflow:hidden; margin-top:40px;}
.st-faqs .col-l .wrap-img img{object-fit:cover; width:inherit; height:inherit}
.st-faqs .col-l .wrap-contact{width:100%; float:left; position:relative; margin-top:40px;}
.st-faqs .col-l .wrap-contact label{width:100%; margin: 0 0 25px 0; float:left;}
.st-faqs .col-l .wrap-contact .nav-mobile{position:relative; float:left; text-decoration:none; padding-left:75px; height:60px; color:#000; padding-top:5px; }
.st-faqs .col-l .wrap-contact .nav-mobile i{width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:#ec1f26; color:#fff; border-radius:50%; font-size:20px; position:absolute; top:0; left:0;}
.st-faqs .col-l .wrap-contact .nav-mobile span{opacity:.75}
.st-faqs .col-l .wrap-contact .nav-mobile b{display:block; font-size:18px; font-weight:700; padding-top:2px; color:#000}
.st-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; }
.st-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}
.st-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;}
.st-faqs .col-l .wrap-contact .nav-mail span{opacity:.75; position:relative; z-index:2; font-weight:400; font-size:15px;}
.st-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;}
.st-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:22px; border:none; position:relative;}
#accordion-faqs .card:before{content:''; width:100%; height:100%; position:absolute; z-index:1; background:#f2e9e1; top:0; left:0; 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) {
    .st-faqs .col-l{width:100%; padding-top:220px;}
    .st-faqs .col-l .wrap-img{position:absolute; top:0; margin-top:0px; height:200px;}
    .st-faqs .col-l .wrap-contact{margin-top:0px;}
    .st-faqs .col-l .wrap-contact .nav-mail{margin: 15px 0 0 0}
    .st-faqs .col-r{width:100%; padding-top:20px;}
    #accordion-faqs .card .card-header a.collapsed{white-space:normal}
}

@media (min-width:768px) and (max-width:991px) {
    .st-faqs .col-l{width:100%;}
    .st-faqs .col-r{width:100%; padding-top:20px;}
    #accordion-faqs .card .card-header a.collapsed{white-space:normal}
}

@media (min-width: 992px) and (max-width:1199px) {
    .st-faqs .col-l{width: calc(50% - 20px);}
    .st-faqs .col-r{width: calc(50% - 20px);}
    .st-faqs .col-l .wrap-contact .nav-mail{margin-left:0; clear:left; margin-top:20px;}
    .st-faqs .col-l .wrap-img{height:300px;}
    #accordion-faqs .card .card-header a.collapsed{white-space:normal}
}

@media (min-width:1200px) and (max-width:1439px) {
    .st-faqs .col-l{width: calc(48% - 20px);}
    .st-faqs .col-r{width: calc(52% - 20px);}
}

/* Thông báo thêm giỏ hàng thành công */
#myModal-aletAddToCart{}
#myModal-aletAddToCart .modal-dialog{max-width:380px;}
#myModal-aletAddToCart .modal-content{border:none; border-radius:20px;}
#myModal-aletAddToCart .modal-body{position:relative; padding: 30px;}
#myModal-aletAddToCart .modal-body label{margin:0; position:relative; width:230px; font-size:15px; margin-left:-115px; text-align:center; background:#fff; line-height:34px; border-radius:20px; background:#fff; position:absolute; top:-17px; left:50%; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 5px rgba(0,0,0,.07); color:#000 }
#myModal-aletAddToCart .modal-body label:before{font-family: "Font Awesome 5"; font-weight:400; content: "\f291"; font-size:18px; padding-right:10px; color:var(--color2)}
#myModal-aletAddToCart .modal-body .row-product{width:100%; position:relative; display:table; margin-top:10px; border-bottom:1px solid rgba(0,0,0,.07); padding-bottom:20px;}
#myModal-aletAddToCart .modal-body .row-product .col-img{max-width:90px; height:90px; display:table-cell;}
#myModal-aletAddToCart .modal-body .row-product .col-img img{max-width:inherit; max-height:initial; object-fit:cover; border-radius:10px;}
#myModal-aletAddToCart .modal-body .row-product .col-name{display:table-cell; text-align:left; vertical-align:middle; padding-left:20px; font-weight:500; font-size:18px; color:#000}
#myModal-aletAddToCart .modal-body .row-price{width:100%; float:left; position:relative; padding: 15px 0; display:block;}
#myModal-aletAddToCart .modal-body .row-price span{float:left; font-size:16px; padding-top:5px;}
#myModal-aletAddToCart .modal-body .row-price b{float:right; position:relative; font-weight:800; font-size:20px; color:var(--color3); padding-right:14px;}
#myModal-aletAddToCart .modal-body .row-price b:before{content:'1 X'; color:#000; font-weight:400; font-size:15px; padding-right:5px; display:none;}
#myModal-aletAddToCart .modal-body .row-price b:after{content: '₫'; position: absolute; top: -2px; right: 0;font-size: 18px;font-weight: 700;}
#myModal-aletAddToCart .modal-body .row-nav{width:100%; float:left; position:relative; margin-top:5px;}
#myModal-aletAddToCart .modal-body .row-nav a{line-height:45px; display:block; text-align:center; color:#fff; text-decoration:none; border-radius:7px; font-weight:600; transition:.3s;}
#myModal-aletAddToCart .modal-body .row-nav a:hover{box-shadow:inset 0 45px rgba(0,0,0,.15)}
#myModal-aletAddToCart .modal-body .row-nav a:first-child{width:calc(100% - 80px); background:var(--color2); float:left; font-size:17px;}
#myModal-aletAddToCart .modal-body .row-nav a:last-child{width:70px; float:right; background:rgba(0,0,0,.1); font-size:15px; color:#000; }