body {
    background-color: #e0e0e0;
}

div.TimKiem_Container {
    padding: 16px 16px 0 16px;
}

    div.TimKiem_Container > div.TimKiem_DSTruong {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr auto;
        padding: 4px;
        grid-row-gap: 4px;
        grid-column-gap: 4px;
        align-items: center;
        background-color: #ffffff;
    }

        div.TimKiem_Container > div.TimKiem_DSTruong > *:nth-last-child(1) {
            grid-row: auto;
            grid-column: 4;
        }

.home_banner {
    padding: 0;
}

    .home_banner > div {
        margin: 0;
    }

    .home_banner img {
        width: 100%;
        aspect-ratio: 32/7;
    }

div.Container_TieuDeHuongTotXau {
    padding: 0 16px;
}

div.Container_HuongTotXau {
    padding: 0 16px;
}

div.HuongTotXau {
    padding: 8px;
    flex: 0 0 25%;
    max-width: 25%;
}

    div.HuongTotXau > div {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
        grid-row-gap: 8px;
        align-content: start;
        min-height: 100%;
        padding: 8px;
        background: #ffffff;
        border: 1px solid #c0c0c0;
        transition: 0.5s;
        border-radius: 8px;
    }

        div.HuongTotXau > div:hover {
            transform: translate(0, -5px);
            box-shadow: 0 5px 20px #808080;
            transition: all ease-in-out 0.5s;
        }

        div.HuongTotXau > div > div.img {
            overflow: hidden;
            border-radius: 8px;
        }

            div.HuongTotXau > div > div.img > a img {
                width: 100%;
                aspect-ratio: 4/3;
                object-fit: cover;
                transition: 1s;
            }

                div.HuongTotXau > div > div.img > a img:hover {
                    transform: scale(1.2);
                    transition: all ease-in-out 1s;
                }

        div.HuongTotXau > div > div.Ten {
            font-weight: bold;
            height: 54px;
            overflow: hidden;
        }

            div.HuongTotXau > div > div.Ten a {
                color: #000000;
            }

        div.HuongTotXau > div > div.Ngay {
            font-style: italic;
            color: #c0c0c0;
            padding: 8px 0 0 0;
        }

        div.HuongTotXau > div > div.NoiDung {
            font-weight: normal;
            max-height: 90px;
            overflow: hidden;
        }

        div.HuongTotXau > div > div.TTP_QH > a {
            color: #077b8a;
            font-weight: bold;
            text-decoration: none;
        }

            div.HuongTotXau > div > div.TTP_QH > a:hover {
                text-decoration: underline;
            }

#divTieuDeHuongTotXau {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1px;
    grid-column-gap: 8px;
}

    #divTieuDeHuongTotXau div:nth-child(1) {
        grid-row: 1/span2;
        grid-column: 1;
    }

    #divTieuDeHuongTotXau div:nth-child(2) {
        grid-row: 2;
        grid-column: 2;
        background-color: #000000;
    }

#divHuongTotXauChiTiet {
    background-color: #ffffff;
    padding: 8px;
}

@media (max-width: 768px) {
    .AnTimKiemMoble {
        display: none;
    }

    div.TimKiem_Container {
        padding: 16px 16px 0 16px;
    }

        div.TimKiem_Container > div.TimKiem_DSTruong {
            grid-template-columns: 1fr auto;
        }

            div.TimKiem_Container > div.TimKiem_DSTruong > * {
                grid-column: 1;
            }

                div.TimKiem_Container > div.TimKiem_DSTruong > *:nth-last-child(1) {
                    grid-row: 1 / span 5;
                    grid-column: 2;
                }

    .home_banner {
        padding: 0;
    }

    div.Container_TieuDeHuongTotXau {
        padding: 0 8px;
    }

    div.Container_HuongTotXau {
        padding: 0 8px;
    }

    div.HuongTotXau {
        padding: 8px;
        flex: 0 0 100%;
        max-width: 100%;
    }
}