/* =========================================================================
   TIS — home.css: các khối trang chủ (theo DESIGN_SPEC.md và CSS site cũ)
   ========================================================================= */

/* Slider banner: xem style.css (dùng chung với banner chuyên mục) */

.home-spacer { padding-top: 1.5rem; }
@media (min-width: 992px) { .home-spacer { padding-top: 3rem; } }

/* ---------- 2. Giới thiệu ---------- */
.home-block-about { margin-bottom: 1.5rem; }
.aboutus { clear: both; }
.aboutus-row { display: grid; grid-template-columns: 1fr; }
.aboutus-photo { display: none; }
/* Ảnh để inline như site cũ (có khe baseline ~7px bên dưới) */
.aboutus-photo-mobile { display: block; margin-bottom: .5rem; }
.aboutus-body { display: flex; flex-direction: column; height: 100%; }
.aboutus-title { margin-bottom: .5rem; }
.aboutus-title a { color: var(--text-primary); }
.aboutus-slogan { color: var(--pink-light); font-weight: 700; font-size: 20px; text-transform: uppercase; }
.aboutus-hotline { margin-top: auto; margin-bottom: .5rem; }
.aboutus-hotline-row { display: flex; align-items: center; }
.hotline-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    line-height: 48px;
    margin-right: 1rem;
    text-align: center;
    color: var(--white);
    background-color: var(--cyan);
    border-radius: 50%;
}
.aboutus-hotline-text { font-weight: 700; color: var(--c-primary); }
@media (min-width: 768px) {
    .aboutus-row { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
    .aboutus-photo { display: block; }
    .aboutus-photo-mobile { display: none; }
}
@media (min-width: 992px) {
    .aboutus-row { column-gap: 3rem; }
    .aboutus-title { margin-bottom: 1.5rem; }
}

/* ---------- 3. Chỉ số ---------- */
.numbers { clear: both; margin-bottom: 1.5rem; }
.numbers-row { display: flex; flex-wrap: wrap; margin-left: -.75rem; margin-right: -.75rem; }
.numbers-col { flex: 1 1 auto; width: 50%; padding: 0 .75rem; margin-bottom: 1rem; }
.number-item { clear: both; height: 100%; padding: 1rem; text-align: center; color: var(--white); background-color: var(--red); }
.number-item-value { display: block; clear: both; font-size: 3rem; font-weight: 700; }
.number-item-title { display: block; clear: both; font-size: 1.5rem; font-weight: 700; }
@media (min-width: 768px) { .numbers { padding: 1.5rem 0; } }
@media (min-width: 992px) {
    .numbers { padding: 3rem 0; margin-bottom: 3rem; background-color: var(--red); }
    .numbers-col { width: 20%; margin-bottom: 0; border-right: 2px solid var(--white); }
    .numbers-col:last-child { border-right: 0; }
    .number-item { padding: 0; }
}

/* ---------- 4. Dịch vụ ---------- */
.home-block-services { margin-bottom: 1rem; }
.services-row { display: grid; grid-template-columns: 1fr; align-items: center; }
.services-text { margin-bottom: 1.5rem; }
.services-intro { margin-bottom: 1rem; }
.services-intro .titlebar { margin-bottom: 1.5rem; }
.services-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.service-item {
    clear: both;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 20px;
    border: 5px solid var(--border-color);
    border-radius: 20px;
}
.service-item-icon { text-align: center; margin-bottom: 1rem; }
.service-item-icon img { display: block; width: 64px; height: 64px; }
.service-item-title { text-align: center; font-weight: 700; }
@media (min-width: 992px) {
    .home-block-services { margin-bottom: 3rem; }
    .services-row { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
    .services-text { margin-bottom: 0; }
    .services-intro { margin-bottom: 1.5rem; }
    .services-photo { padding-top: 1rem; }
}

/* ---------- 5. Giải pháp hàng đầu ---------- */
.solutions-row { display: grid; grid-template-columns: 1fr; }
.solutions-col { margin-bottom: 1.5rem; }
.solution-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.solution-card-photo { border-radius: 10px 10px 0 0; overflow: hidden; }
.solution-card-photo img { border-radius: 10px 10px 0 0; }
.solution-card-body { flex: 1 1 auto; padding: 1rem; }
.solution-card-title { font-size: 1.25rem; margin-bottom: .5rem; }
.solution-card-title a { color: #212529; }
.solution-card-teaser { font-size: .875em; }
.solution-card-footer { padding: 0 1rem; background-color: #fff; border-radius: 0 0 10px 10px; }
.solution-card-footer .btn-more { margin-bottom: 1.5rem; border-radius: var(--radius); }
@media (min-width: 992px) {
    .solutions-row { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
    .solutions-col { margin-bottom: 3rem; }
}

/* ---------- 6. Sản phẩm nổi bật ---------- */
.home-products { overflow: hidden; padding: 1.5rem 0; margin-bottom: 1.5rem; background-color: var(--c-dark); }
.top-products { clear: both; position: relative; z-index: 0; }
.top-products-bg {
    display: none;
    position: absolute;
    z-index: 0;
    width: 152px;
    height: 92px;
    background: url(../img/dot-bg.png) center center no-repeat;
}
.top-products-bg-tr { top: 0; right: 0; margin-top: -46px; margin-right: -76px; }
.top-products-bg-bl { left: 0; bottom: 0; margin-bottom: -46px; margin-left: -76px; }
.top-product-box { height: 100%; background-color: #fff; border-radius: var(--radius); }
.product-item-photo { margin-bottom: 1rem; }
.home-products-spacer { display: none; }
@media (min-width: 992px) {
    .home-products { padding: 3rem 0; margin-bottom: 3rem; }
    .top-products-bg { display: block; }
    .home-products-spacer { display: block; padding: 1.5rem 0; }
}

/* ---------- 7. Công trình tiêu biểu ---------- */
.home-block-projects { margin-bottom: 1.5rem; }
.project-item { clear: both; position: relative; z-index: 0; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.project-item-title {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    line-height: 1.5;
}
.project-item-title a { color: #fff; font-weight: 700; }
.project-item-bg {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 40%;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.project-item:hover .project-item-bg { display: none; }
.home-block-projects .swiper-nav { display: none !important; }
@media (min-width: 992px) { .home-block-projects { margin-bottom: 3rem; } }
@media (min-width: 1400px) { .home-block-projects .swiper-nav { display: block !important; } }

/* ---------- 8. Khách hàng nói về chúng tôi ---------- */
.home-block-testimonials { margin-bottom: 1.5rem; }
.testimonial { display: flex; flex-direction: column; align-items: center; }
.testimonial-avatar {
    width: 150px;
    margin-bottom: 1rem;
    border: 5px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.testimonial-avatar img { display: block; border-radius: 50%; }
.testimonial-desc {
    font-size: .875em;
    line-height: 1.5;
    min-height: 6rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--text-secondary);
}
.testimonial-user { clear: both; margin-bottom: 1rem; text-align: center; color: var(--text-secondary); }
.testimonial-fullname { font-weight: 700; }
.testimonial-title { font-size: .875em; font-weight: 400; font-style: italic; }
@media (min-width: 992px) { .home-block-testimonials { margin-bottom: 3rem; } }

/* ---------- 9. Tư vấn & Báo giá ---------- */
.home-consult { background-color: var(--c-dark); }
.consult-row { display: grid; grid-template-columns: 1fr; padding: 1.5rem 0; }
.consult-text { margin-bottom: 1.5rem; }
.consult-text .title { margin-bottom: 1rem; }
.home-consult .form-control { padding: 1rem; border: 0; }
.home-consult textarea.form-control { resize: vertical; }
@media (min-width: 992px) {
    .consult-row { grid-template-columns: 1fr 1fr; column-gap: 3rem; padding: 3rem 0; }
}

/* ---------- 10. Khách hàng ---------- */
.home-customers { background-color: var(--c-light); }
.home-customers > .container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 992px) { .home-customers > .container { padding-top: 3rem; padding-bottom: 3rem; } }

/* ---------- 11. Tin tức + Video ---------- */
.home-news { background-color: #fff; padding: 1.5rem 0; }
.news-row { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; }
.news-item { margin-bottom: 1rem; }
.news-item-photo { float: left; margin-right: 1rem; }
.news-item-title { margin-bottom: .5rem; }
.news-item .post-date { display: none; }
.home-video { margin-bottom: .5rem; }
.news-col:last-child { margin-bottom: 1rem; }
@media (min-width: 576px) { .news-item .post-date { display: block; } }
@media (min-width: 992px) {
    .home-news { padding: 3rem 0; }
    .news-row { grid-template-columns: 1fr 1fr; }
    .news-item-title { margin-bottom: 1rem; }
}

/* ---------- 12. Đối tác ---------- */
.home-partners { background-color: var(--c-light); }
.home-partners > .container { padding-top: 3rem; padding-bottom: 3rem; }
.parner-logo { clear: both; }
.parner-logo a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; overflow: hidden; }
.parner-logo img { display: block; max-width: 100%; max-height: 100%; }