/* =========================================================
   1. FONT CHỮ VÀ RESET (CHỈ ÁP DỤNG KHỐI TRANG CHỦ)
   ========================================================= */
@font-face { font-family: 'UTM_AVo'; src: url('/fonts/UTM Avo.ttf'); }
@font-face { font-family: 'UTM_Edward'; src: url('/fonts/UTM EdwardianKT.ttf'); }

#ndvx-home-wrapper { width: 100%; overflow: hidden; background: #fff; line-height: 1.6; font-size: 15px; font-family: 'UTM_AVo', Arial, sans-serif !important; }
#ndvx-home-wrapper * { box-sizing: border-box; font-family: 'UTM_AVo', Arial, sans-serif; }

.ndvx-row { width: 1180px; max-width: 100%; margin: 0 auto; position: relative; padding: 0 15px; }
.font-edward { font-family: 'UTM_Edward', cursive !important; color: #d65503 !important; font-weight: normal !important; text-transform: none !important; letter-spacing: 1px; }

/* =========================================================
   2. CÁC KHỐI NỘI DUNG TRANG CHỦ
   ========================================================= */
.ndvx-sec { padding: 80px 0; position: relative; }
.ndvx-title-main { text-align: center; margin-bottom: 50px; }
.ndvx-title-main h2 { font-size: 35px !important; font-weight: 800 !important; color: #111 !important; text-transform: uppercase; margin: 0 0 15px 0;}
.ndvx-title-main .line { width: 80px; height: 4px; background: #d65503; margin: 0 auto 20px; }
.ndvx-title-main h6 { font-size: 18px !important; color: #666 !important; font-weight: normal !important; margin: 0; }
.ndvx-btn { display: inline-block; background: #d65503; color: #fff !important; padding: 15px 35px; text-transform: uppercase; font-weight: bold !important; font-size: 15px !important; border-radius: 4px; transition: all 0.3s; text-decoration: none;}
.ndvx-btn:hover { background: #111; transform: translateY(-3px); }

/* HERO BANNER */
.ndvx-hero-1 img { width: 100%; height: auto; display: block; }
.ndvx-hero-2 { width: 100%; padding: 120px 0; background-attachment: fixed; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; text-align: center;}
.ndvx-hero-2::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index: 1;}
.ndvx-hero-2-content { position: relative; z-index: 2; max-width: 900px; padding: 0 15px; }
.ndvx-hero-2-content h2 { color: #fff !important; font-size: 42px !important; font-weight: bold !important; text-transform: uppercase; margin-bottom: 20px;}
.ndvx-hero-2-content p { color: #eee !important; font-size: 18px !important; margin-bottom: 30px; }

/* FLEXBOX & GRIDS */
.ndvx-flex { display: flex; align-items: center; gap: 40px; justify-content: space-between; }
.ndvx-w50 { width: 50%; }
.ndvx-w50 img { width: 100%; height: auto; border-radius: 6px; }
.ndvx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ndvx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* DỊCH VỤ HOVER */
.ndvx-srv-sec { background: #111; color: #fff; }
.ndvx-srv-left { width: 45%; }
.ndvx-srv-right { width: 55%; position: relative; height: 600px; border-radius: 6px; overflow: hidden; }
.ndvx-srv-item { padding: 20px 0; border-bottom: 1px solid #333; cursor: pointer; transition: all 0.3s; }
.ndvx-srv-item h3 { font-size: 22px !important; color: #888 !important; margin: 0 0 10px 0; transition: color 0.3s;}
.ndvx-srv-item p, .ndvx-srv-link { display: none; }
.ndvx-srv-item.active h3, .ndvx-srv-item:hover h3 { color: #d65503 !important; padding-left: 15px; }
.ndvx-srv-item.active p, .ndvx-srv-item.active .ndvx-srv-link { display: block; color: #ccc !important; padding-left: 15px; margin-top: 10px;}
.ndvx-srv-img { position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.ndvx-srv-img.active { opacity: 1; }

/* MASONRY (KHÔNG CẮT HÌNH) */
.ndvx-masonry-grid { column-count: 2; column-gap: 30px; }
.ndvx-masonry-card { display: block; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 30px; break-inside: avoid; text-decoration: none;}
.ndvx-masonry-img img { width: 100%; height: auto !important; display: block; transition: transform 0.5s; }
.ndvx-masonry-card:hover .ndvx-masonry-img img { transform: scale(1.05); }

/* KHÁC BIỆT THI CÔNG & BẢO HÀNH */
.ndvx-diff-card { background: #1a1a1a; padding: 30px; border-radius: 8px; text-align: center; border: 1px solid #222;}
.ndvx-diff-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; margin-bottom: 20px; }
.ndvx-warranty-item { background: #fff; padding: 30px; border-radius: 12px; border: 2px solid #eee; text-align: center; }

/* ĐỘI NGŨ & TIN TỨC */
.ndvx-card { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: block; text-decoration: none;}
.ndvx-card-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ndvx-card-txt { padding: 20px; }

/* FORM LIÊN HỆ GOOGLE SHEETS */
.ndvx-contact-flex { display: flex; align-items: stretch; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.08); }
.ndvx-contact-img { flex: 1; display: block;}
.ndvx-contact-img img { width: 100%; height: 100%; object-fit: cover; }
.ndvx-contact-form { flex: 1; padding: 40px; }
.ndvx-form-control { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 6px; font-family: 'UTM_AVo', sans-serif;}

/* =========================================================
   3. RESPONSIVE MOBILE / TABLET VÀ FIX LỖI ẨN KHỐI
   ========================================================= */
@media screen and (max-width: 991px) {
    /* Ép hiển thị các khối Admin trên Mobile bị theme cũ giấu đi */
    .slideshow, .building, .furniture, #w > div { display: block !important; }

    .ndvx-flex, .ndvx-contact-flex { flex-direction: column; gap: 30px; }
    .ndvx-w50, .ndvx-srv-left, .ndvx-srv-right { width: 100%; }
    .ndvx-srv-right { height: 350px; }
    .ndvx-grid-3, .ndvx-grid-4 { grid-template-columns: 1fr 1fr; gap: 20px; }
    .ndvx-masonry-grid { column-count: 1; }
    
    @media (max-width: 767px) {
        .ndvx-grid-3, .ndvx-grid-4 { grid-template-columns: 1fr; }
        .ndvx-hero-2-content h2 { font-size: 32px !important; }
        .ndvx-contact-form { padding: 25px; }
        .ndvx-sec { padding: 50px 0; }
    }
}