@charset "utf-8";
/* CSS Document */
@import
    url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');
@font-face
{
    font-family: charmonman;
    src:url("../fonts/Charmonman-Bold.ttf")
}
@font-face
{
    font-family: charm;
    src:url("../fonts/Charm-Bold.ttf")
}
@font-face
{
    font-family: pangolin;
    src:url("../fonts/Pangolin-Regular.ttf")
}


body{font-family: 'Cabin', sans-serif; color:#3A3A3A; letter-spacing: 0.3px}
.form-control:focus{box-shadow: 0 0}
.btn:focus{box-shadow: 0 0}


.font-charmonman{font-family: charmonman}
.font-charm{font-family: charm}
.font-pangolin{font-family: pangolin}

.text-grey{color:#BBBBBB}
.bg-grey{background-color:#BBBBBB !important}
.border-grey{border: 1px solid #BBBBBB}

.text-grey-dark{color:#3A3A3A}
.bg-grey-dark{background-color:#3A3A3A !important}
.border-grey-dark{border: 1px solid #3A3A3A}




.line{width:100%; height:1px; background-color:#3A3A3A}
.bg-nen-gach{background: url("../images/bg-nen-gach.webp")}
.sheet-music{margin:30px auto; text-align: center; display: block}
.title{text-align: center; color:#942000; font-family: charm;}



.btn-main
{
    width:140px; height: 40px;
    line-height: 40px; display: block; 
    background-color: #FFD32C; color: #942000; text-align: center
}
.btn-main:hover{background: #FFDF66; color: #000}




.bg-banner{height: 500px; background-size: cover; background-position: center}
@media(max-width:990px){
    .bg-banner{height:400px}
}
@media(max-width:767px){
    .bg-banner{height:200px}
}




/*--------------------nav-----------------------*/
.bg-nav-1{background-color: rgba(26,28,31,1.00)}
@media(min-width:768px){
    .navbar-fixed-top{
        position:fixed; width: 100vw; z-index: 1000; top:0;
        background-color: rgba(26,28,31,0.9); transition: 1s}
}
@media(max-width:767px){
    .navbar-fixed-top-phone{
        position:fixed; width: 100vw; z-index: 1000; top:0;
        background-color: rgba(26,28,31,0.9); transition: 1s}
    .nav-1-container-2{max-width: 100%}
}



#nav-1 .nav-item
{
    position: relative;
    background: linear-gradient(to right,#666,#fff,#666)no-repeat;
    background-position:right bottom;
    background-size: 0% 1px; transition:background-size 0.5s
}
#nav-1 .nav-item .nav-link{padding-bottom:0}
#nav-1 .nav-item svg{left:40%; top:-12px; opacity: 0; transition: 0.5s}
#nav-1 .nav-item:hover{
    background-position:left bottom;
    background-size: 100% 1px; transition:background-size 0.5s
}
#nav-1 .nav-item:hover svg{top:-5px ; opacity: 1; transition: 0.5s}



#btn-search{border:1px solid #FFD32C; color:#FFD32C}
#search-box{position: absolute; bottom:-40px; right:0; z-index: 1; display:none}
@media(max-width:767px){
    #nav-1 .navbar-nav{padding:0; margin: 0}
    #nav-1 .nav-item svg{display:none}
    #nav-1 .nav-item{text-align: center; padding-bottom: 10px}
    #btn-search{margin-left:auto}
    #search-box{left:0}
}



/*-------------------------------------------*/

[class*="slider-"]
{
    background-size: cover; background-position: center; padding: 100px 0; text-align: center
}
.slider-1{background-image: url("../images/slider-1.jpg")}
.slider-2{background-image: url("../images/slider-2.jpg")}
.slider-3{background-image: url("../images/slider-3.jpg")}








.ua-chuong-item{transition: 0.5s; perspective: 600px}
.ua-chuong-btn-1, .ua-chuong-btn-2
{
    opacity:0; transition: 0.5s
}
.ua-chuong-btn-1{transform: rotateY(-90deg); transition: 0.5s}
.ua-chuong-btn-2{transform: rotateY(90deg); transition: 0.5s}
.ua-chuong-item:hover{
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transition: 0.5s
}
.ua-chuong-item:hover .ua-chuong-btn-1{
    opacity:1; transform: rotateY(0); transition: 0.5s
}
.ua-chuong-item:hover .ua-chuong-btn-2{
    opacity:1; transform: rotateY(0); transition: 0.5s
}





[class*="bg-ban-muon-tim"]
{
    background-size: cover; background-position: center;
    padding: 100px 0; position: relative
}
.bg-ban-muon-tim-1{background-image: url("../images/ban-muon-tim-img-1.jpg")}
.bg-ban-muon-tim-2{background-image: url("../images/ban-muon-tim-img-2.jpg")}
.bg-ban-muon-tim-3{background-image: url("../images/ban-muon-tim-img-3.jpg")}

.bg-opacity-20
{
    background: rgba(196,196,196,0); position: absolute;
    top:0; left:0; transition: 0.5s
}
.bg-opacity-90
{
    background: rgba(000,000,000,0.9);position: relative; color:#fff;
    height: 150px; width:150px; text-align: center; display: flex;
    opacity: 0; transition: 0.5s
}

[class*="bg-ban-muon-tim"]:hover .bg-opacity-20
{
    background: rgba(196,196,196,0.2); transition: 1s
}
[class*="bg-ban-muon-tim"]:hover .bg-opacity-90{opacity: 1; transition: 0.5s}
.bg-opacity-90:hover h4{color:#ccc}





#giam-gia{background: url("../images/bg-giamgia.jpg"); background-size: cover}
.bg-white-70{width:100%; height:100%; background: rgba(255,255,255,0.7)}

#giam-gia .container{perspective: 800px; transition: 0.25s}
.giam-gia-border-hover
{
    top:0; left:0; border: 2px solid #942000; opacity:0;
    transform: rotateY(10deg); transition:1s
}
.giam-gia-content{transform: rotateY(-10deg); transition:1s}
.giam-gia-shadow{box-shadow: 0 0 10px}

#giam-gia .container:hover{background:#fff; transition-duration: 0.5s; transition-delay: 0.5s}
#giam-gia .container:hover .giam-gia-content{transform: rotateY(0deg); transition:0.5s}
#giam-gia .container:hover .giam-gia-border-hover{
    transform: rotateY(180deg); opacity:1; transition:1s}





#danh-gia .carousel-indicators{bottom: -15%}
.quote-left{left:0}
@media(min-width:768px){
    .push-md-2{margin-right:16.66%}
}
@media(max-width:767px){
    #danh-gia .carousel-indicators{bottom: -7%}
}






#giam-gia button, #giam-gia input{outline:none}





/*-------------------------------------------*/
.banner-about{background-image: url("../images/banner-about.jpg")}
.muc-dich-chung-shadow{box-shadow: 0 4px 10px #eee}
#hinhanh-cuahang .img-thumbnail{transition:0.5s}
#hinhanh-cuahang .img-thumbnail:hover{
    transform: scale(1.2); transition:0.5s}







/*-------------------san-pham------------------------*/
.banner-sanpham{background-image: url("../images/banner-sanpham.jpg")}
@media(max-width:767px){
    #banner-sanpham{background-position:left; padding: 30px 0; height:auto}
}




#san-pham .btn-timkiem{outline: none}
.btn-timkiem svg{transition: 0.25s}
.btn-timkiem[aria-expanded="true"] svg{transform:rotate(180deg); transition: 0.25s}
.sanpham-item .btn-main
{
    margin: -40px auto 10px; transform-origin: top;
    opacity: 0; transform: scaleY(0); transition: 0.5s
}
.sanpham-item{transition: 0.5s}
.sanpham-item:hover{
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); transition: 0.5s}
.sanpham-item:hover .btn-main{
    opacity: 1; transform: scaleY(1); transition: 0.5s}

.page-link{color:#942000}

@media(max-width:990px){
    .tim-kiem{
        position: fixed; z-index: 1002;
        width:40vw; height:100vh;
        top:0; right:0; display:none;
        overflow: scroll
    }
    
    #btn-close-filter{right:5%; z-index: 2}
    
    .bg-opacity-50{
        position: fixed; width:100vw; height:100vh;
        top:0; right:0; z-index: 1001;
        background: rgba(0,0,0,0.5); display:none
    }
}
@media(max-width:767px){
    .tim-kiem{width:70vw}
}






/*---------------chi-tiet-san-pham----------------------------*/
.site-small-img .active{border:2px solid #942000}


.amount{width:50px; height:35px; border-radius: 5px; border:1px solid #bbb; text-align: center}
#btn-rutgon{display:none}

#mota-danhgia .nav-link.active{color:#942000}
#mota-danhgia .nav-link{color:#3A3A3A}

@media(max-width:767px){
    .mousetrap, .cloud-zoom-big{display:none}
    .height-200{height:200px; overflow:hidden}
    #co-the-ban-cung-thich .carousel-item .sanpham-item:nth-child(3){display:none}
}







/*-------------------------------------------*/
.line-2{height:2px}







/*-----------------gio-hang--------------------------*/
[id*="giohang-item"]{display:flex; flex-wrap: wrap}
[id*="giohang-item"] button{outline: none} 
[id*="btn-xoasanpham-"]
{
    right:0px; top:0px; z-index: 5; 
    border:0; background: transparent
}
.btn-thanhtoan{color:#fff}
.btn-thanhtoan:hover{color:#FFD32C}




/*-------------------------------------------*/
.blogs-right .d-flex{transition: 0.25s}
.blogs-right .d-flex:hover{opacity: 0.8; color:#3A3A3A;transition: 0.25s}




/*-------------------------------------------*/
#btn-guidi{outline:none}
@media(max-width:767px){
    .google-map iframe{height:200px}
}




/*-------------------------------------------*/
footer
{
    background:url("../images/bg-footer.jpg");
    background-size: cover;
    box-shadow: 0 -4px 10px #000
}
.border-icon
{
    width:35px; height:35px; line-height: 35px;
    border-radius: 50%; border:1px solid; text-align: center
}
.footer-border-right{border-right:1px solid #3A3A3A}
.lien-ket a:hover{color:#6F6F6F}
@media(max-width:767px){
    .footer-border-right{border-right:0}
}