*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    
}

body{
    font-family:Arial,sans-serif;
    color:#515050;
    line-height: 150%;
    font-size: 12pt;
}

.container{
    max-width:1400px;
    margin:auto;
    padding:0 20px;
}

.section{
    padding:40px 0;

}

.header{
    padding:10px 0;
    background-color: #fdf5f9;
}

.header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.hotline{
    display:flex;
    gap:10px;
    align-items:center;
}

.navbar{
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

.navbar{
    display:block;
    text-align: center;
    padding:15px 20px;
}
.navbar a{
    text-decoration:none;
    color:#d1063a;
}
.navbar ul{}
.navbar ul li{display: inline-block; height: 30px; line-height: 30px; margin: 0 5px; background-size: 30px 30px !important; padding-left: 40px;}
.navbar ul li.zalo{background: url("https://www.vaiaodaire.com/v2/images/icons/bottom-bar/zalo-icon.png") no-repeat; }
.navbar ul li.messenger{background: url("https://www.vaiaodaire.com/v2/images/icons/bottom-bar/mess-icon.png") no-repeat;}
.navbar ul li.call{background: url("https://www.vaiaodaire.com/v2/images/icons/bottom-bar/call-icon.png") no-repeat;}

.btn-quote,
.btn-primary{
    margin-left:auto;
    background:#d91b47;
    color:white !important;
    padding:12px 20px;
    border-radius:8px;
}
.logo{margin: auto;}
.logo img{height: 80px; border:none;}
.hero{
    position:relative;

    width:100%;

    height:clamp(400px, 50vw, 800px);

    background-image:url("images/vai-ao-dai-dong-phuc.jpg");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    display:flex;
    align-items:center;
}


.hero h1{
    font-size:72px;
    color:#d91b47;
}

.hero h2{
    font-size:40px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.grid-5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.topContent{padding-left: 20px; padding-right: 20px; font-size: 120%; line-height: 150%; border-bottom: solid 1px #eee;}
.topContent p{padding: 10px 0;}
.topContent h2{margin-bottom: 15px !important;}

.feature,
.card,
.step{
    background:#fff;
    padding:25px;
    border-radius:10px;
    text-align:center;
}

.tabs{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    width:fit-content;
    margin:30px auto;
}

.tabs button{
    padding:12px 24px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:30px;
    cursor:pointer;
    transition:.3s;
    font-size: 100%;
}

.tabs button:hover{
    border-color:#d91b47;
    color:#d91b47;
}

.tabs button.active{
    background:#d91b47;
    border-color:#d91b47;
    color:#fff;
}

.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    justify-items:center;
}

.product{
    background:#eee;
    border-radius:20px;
    height: 350px;
    border:solid 10px #fff;
    overflow: hidden;
   box-shadow: 0 2px 10px #d5285d;

}

.product-grid .product img{
    width:100%;
    height:350px;      /* hoặc 200px, 300px tùy thiết kế */
    object-fit:cover;  /* ảnh phủ kín khung, không méo */
    display:block;
    border-radius: 8px;
}

.materials{border-bottom: solid 1px #eee;}

.material{
    display:grid;
    grid-template-columns: 40% 1fr 1fr;
    gap:0px;
    padding:20px;
    border:1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;

}
.material div{border-right: solid 1px #eee; padding: 0 20px;}
.material div:first-child{padding-left: 0;}
.material div:last-child{border-right: none;}
.material div.thumb{
    width:120px;
    height:120px;
    background:#ddd;
    border-radius:12px;
    padding: 0;
    float: left;
    margin-right: 20px;
    overflow: hidden;
}
.material div.thumb img{width: 120px; height: 120px;}
.material div.uudiem, .material div.uudiem h3{color: #0a7b04;}
.material div.nhuocdiem, .material div.nhuocdiem h3{color: #b10000;}
.material div h3{font-size: 100%; margin-bottom: 10px; text-transform: uppercase; color: #2a2a2a; text-decoration: underline;}
.material div li{margin-left: 15px; padding: 5px 0;}

.important{text-align: left; padding-bottom: 0}
.important h3{font-size: 100%; margin-bottom: 10px; text-transform: uppercase; color: #18751a;}
.important .container{padding:0px; margin: 10px 20px; border:solid 1px #c6e6c6; border-radius: 8px; background-color: #ecffec;}
.important .container div{border-bottom: solid 1px #c6e6c6; padding: 15px;}
.important .container div:last-child{border:none;}

.compare{padding-bottom: 0px;}
.compare tr th{background-color: #fdf6f5;}
.compare tr th:last-child, .compare tr td:last-child{color: #d10e0e}
.compare tr td.star{color: #f8af12;}
.compare tr:last-child td{color: #2d7623; font-size: 90%; font-style: italic;}

.process{padding-bottom: 0px;}
.process h2{margin-bottom: 0px !important;}
.process .grid-5{margin-top: 20px;}
.process .card{border:solid 1px #eee; border-radius: 8px;}
.process .card h3{font-size: 100%; text-transform: uppercase; color: #2d7623; margin-bottom: 10px;}
.process span.icon{display: block; margin: 10px auto; margin-top: 0; width: 60px; height: 60px; background-image: url(images/process-icon.png);}
.process .card:nth-of-type(1) .icon{
    background-position: 0 0;
}
.process .card:nth-of-type(2) .icon{
    background-position: -65px 0;
}
.process .card:nth-of-type(3) .icon{
     background-position: -130px 0;
}
.process .card:nth-of-type(4) .icon{
     background-position: -195px 0;
}
.process .card:nth-of-type(5) .icon{
     background-position: -260px 0;
}


.projects{border-bottom: solid 1px #eee; padding-bottom: 10px;}
.projects h2{margin-bottom: 0px !important;}
.projects div.container{margin-top: 30px;}
.projects div.item{margin-bottom: 30px;}
.projects div.item img{max-width: 100%; border-radius: 8px;}
.projects div.item p{text-align: center;}
table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    border:1px solid #ddd;
    padding:12px;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.project{
    aspect-ratio:1;
    background:#ddd;
    border-radius:12px;
}
.faq{display:grid; grid-template-columns: 70% 1fr; gap:20px;  align-items: start; padding: 40px 20px;}
.faq-item{margin-bottom: 10px;}
.faq h2{text-align: left;}
.faq-btn{
    width:100%; text-align:left; padding:15px; border:none; cursor:pointer; background-color: #ecffec; color: #155710; border-radius: 12px; font-size: 110%;
}
.faq-btn:hover, .faq-item button.active{background-color:#aae1a6;}
.faq-content{
    display:none;
    padding:20px;
}
.contact{padding-top: 0px; margin-top: 70px;}
.contact h2{margin-bottom: 20px !important; border-bottom: solid 1px; padding-bottom: 10px;}
.contact .container{background-color: #f7d9e8; border-radius: 8px; padding: 20px;}
.contact div{margin-bottom: 20px; padding-left: 70px; min-height: 55px;}
.contact div span{display: block; color: #333; font-weight: 600;}
.contact div span:first-child{color: #666; margin-bottom: 0px; font-weight: normal;}

.contact div.zalo{background: url(images/zalo-icon.png) left no-repeat;}
.contact div.email{background: url(images/email-icon.png) left no-repeat;}
.contact div.address{background: url(images/diachi-icon.png) left no-repeat;}
.contact div.time{background: url(images/time-icon.png) left no-repeat;}

.footer{
    background:#d91b47;
    color:white;
    padding:30px 0;
    text-align: left;
}
.footer .container{ display:grid; grid-template-columns: 320px repeat(1,1fr) 320px; gap:40px;}
.footer .container h2{margin-bottom: 15px;}
.footer .container div:first-child{border-right: solid 1px #fff;}
.footer .container div:last-child{text-align: right;}
.footer .container a{color: #fff; text-decoration: none;}

.section h2{text-align: center; margin-bottom: 35px; text-transform: uppercase; color: #d80966; font-size: 150%; line-height: 150%; }
.why-us{ border-bottom: solid 1px #eee;}
.why-us div.card{background-color: #fdf6f5;}
.why-us div.card .icon{display: block; margin: 10px auto; margin-top: 0; width: 50px; height: 50px;}
.why-us .card:nth-of-type(1) .icon{
    background-image: url(images/icon-aodai.png);
}
.why-us .card:nth-of-type(2) .icon{
    background-image: url(images/icon-chatluong.png);
}
.why-us .card:nth-of-type(3) .icon{
    background-image: url(images/icon-giaca.png);
}
.why-us .card:nth-of-type(4) .icon{
    background-image: url(images/icon-hotro.png);
}
.why-us h3{font-size: 90%; padding-bottom: 10px; text-transform: uppercase; color: #2a2a2a;}
.why-us p{text-align: center;}

.products{border-bottom: solid 1px #eee;}
.products div.bottomContent{margin-top: 30px; padding: 0 20px; text-align: justify;}

p.note{padding:20px; border-radius: 8px; background-color: #fafbec;}

@media(max-width:992px){

    .grid-4,
    .grid-5,
    .product-grid,
    .project-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .material{grid-template-columns:repeat(1,1fr);}
    .material div{border-right: none; border-bottom: solid 1px #eee; padding: 10px 0;}
    .material div:first-child{padding-top: 0;}
    .material div:last-child{padding-bottom: 0; border-bottom: none;}

    .faq{grid-template-columns:repeat(1,1fr);}
    .faq-list{padding: 0;}
    .faq-list h2{text-align: center;}
    .contact{margin-top: 30px; padding-bottom: 0;}

    .footer .container{grid-template-columns:repeat(1,1fr);}
    .footer .container div, .footer .container div:last-child{text-align: center;}
    .footer .container div:first-child{border-right: none; border-bottom: solid 1px #fff; padding-bottom: 20px;}
   
}