.side-pic.p-side-item.list-img-homee .p-side-titleas {
    width: 43%;
    padding-left: 0;
    background: var(--default-color-2);
    border-left: 5px solid var(--default-color-1);
}

.p-side-titleas {
}

.side-pic.p-side-item .p-side-titleas {
}

.p-side-titleas {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 16px;
}

    .p-side-titleas h3 {
        font-family: 'OpSan-Bold';
        color: #FFFF;
        margin: 10px 0px 10px 15px;
        text-transform: uppercase;
    }

.link-view-school-activity-newss {
    position: relative;
    right: 8px;
    font-size: 15px;
    color: #fff;
    font-family: 'OpSan-Semi';
    padding: 8px;
    padding-right: 5px;
    display: flex;
    align-items: center;
    background-color: var(--default-color-4);
    width: fit-content;
    padding-left: 10px;
    transition: all .3s;
    height: 32px;
}

a.link-view-school-activity-newss .icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    transform: skewX(10deg);
    position: relative;
    right: -8px;
    background: #df2e29;
}

.top-az {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 13px;
}

.bottom-az {
    width: 100%;
}

.item-bottom-az {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.new-az-item {
}

    .new-az-item .az-item-top {
        height: 100px;
        max-height: 100%;
    }

        .new-az-item .az-item-top img {
        }

    .new-az-item .az-item-bottom {
    }

        .new-az-item .az-item-bottom .az-title {
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            color: var(--default-color-4);
            font-family: 'InterSM';
            font-size: 13px;
            padding: 9px 0px;
            padding-bottom: 3px;
        }

        .new-az-item .az-item-bottom .az-descript {
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            font-size: 12px;
            font-family: 'InterM';
            color: #4D4D4D;
        }
    /* Phóng to nhẹ hình ảnh khi hover */
    .new-az-item .az-item-top {
        overflow: hidden; /* Để ảnh không tràn ra ngoài khi phóng to */
    }

        .new-az-item .az-item-top img {
            transition: transform 0.5s ease; /* Tạo độ mượt */
            object-position: top;
        }

    .new-az-item:hover .az-item-top img {
        transform: scale(1.1); /* Phóng to 10% */
    }

    /* Đổi màu tiêu đề và hiệu ứng chữ */
    .new-az-item:hover .az-title {
        color: var(--default-color-1) !important; /* Đổi sang màu nhấn của bạn */
        /* text-decoration: underline; */ /* Gạch chân tiêu đề nếu muốn */
    }

/* Tạo hiệu ứng bóng đổ nhẹ cho toàn bộ item khi hover */
.new-az-item {
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px; /* Tạo khoảng thở để đổ bóng không bị cắt */
}

    .new-az-item:hover {
        /* background: #fff; */
        /* box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
        transform: translateY(-3px); /* Nhấc nhẹ item lên */
    }
.item-bottom-az .new-az-item:nth-child(1) .az-item-top img{
    height;
    height: 325px;
}
.item-bottom-az .new-az-item:nth-child(1) .az-item-top {
    height: 100%;
}

.item-bottom-az .new-az-item:nth-child(1) {
    grid-row: span 2 / span 2;
    grid-column: span 2 / span 2;
}

.item-bottom-az .new-az-item:nth-child(2) {
    grid-column-start: 3;
}

.item-bottom-az .new-az-item:nth-child(3) {
    grid-column-start: 3;
    grid-row-start: 2;
}

.item-bottom-az .new-az-item:nth-child(4) {
    grid-row-start: 3;
}

.item-bottom-az .new-az-item:nth-child(5) {
    grid-row-start: 3;
}

.item-bottom-az .new-az-item:nth-child(6) {
    grid-row-start: 3;
}

.asdz {
    margin-top: 0px !important;
}

.mid-av img {
    width: 100%;
}

.mid-av {
    padding: 10px 0
}

.item-bottom-av-t {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    justify-content: space-between;
}

.imghd-t {
    width: 100%;
}

    .imghd-t img {
    }

.btaz {
    width: 126%;
}

    .btaz .WDateViewNewHome {
        font-size: 10px;
        display: block;
    }
    .btaz .WDateViewNewHome a{
        display:flex;
    }
        .btaz .WDateViewNewHome svg {
            height: 11px
        }

    .btaz h2 {
        font-size: 16px;
        font-family: 'InterM';
        color: #4C4C4C;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .btaz .vbtazza {
        color: #4D4D4D;
        font-family: 'InterM';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 13.775px */
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        margin-top: 10px;
    }

.item-bottom-av-b {
    display: grid;
    grid-auto-rows: minmax(min-content,max-content);
    grid-template-columns: repeat(4,minmax(0,1fr));
    column-gap: 10px;
    row-gap: 10px;
    padding-top: 15px;
}

.items-hdbt {
}

.items-hdbt-top {
    width: 100%;
}

    .items-hdbt-top img {
    }

    .items-hdbt-top .items-hdbt-bottom {
    }

        .items-hdbt-top .items-hdbt-bottom h2 {
        }

.items-hdbt-bottom {
}

    .items-hdbt-bottom h2 {
        FONT-SIZE: 14px;
        font-family: 'InterSM';
        color: #4C4C4C;
        padding-top: 9px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }
/* Hiệu ứng cho khối lớn phía trên */
.item-bottom-av-t {
    transition: all 0.3s ease;
    cursor: pointer;
}

.imghd-t {
    overflow: hidden; /* Cần thiết để ảnh không tràn khi zoom */
    border-radius: 4px;
    height: 100%;
}

    .imghd-t img {
        transition: transform 0.6s ease;
        display: block;
        height: 152px;
    }

/* Khi di chuột vào cả vùng item-bottom-av-t */
.item-bottom-av-t:hover .imghd-t img {
    transform: scale(1.08); /* Phóng to ảnh 8% */
}

.item-bottom-av-t:hover h2 {
    color: var(--default-color-1) !important; /* Đổi màu tiêu đề sang màu chủ đạo */
    transition: color 0.3s ease;
}
/* 1. Thiết lập chung để hiệu ứng mượt mà */
.items-hdbt {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 2. Hiệu ứng cho phần ảnh (items-hdbt-top) */
.items-hdbt-top {
    overflow: hidden; /* Quan trọng: để ảnh không tràn ra ngoài khi phóng to */
    border-radius: 4px; /* Bo góc nhẹ cho hiện đại */
    height: 107px;
}

.bomttt-az-saa {
}

.item-bottm-tkba {
}

    .item-bottm-tkba .img-tkba img {
    }

item-bottm-tkba .descript-tkba {
}

    item-bottm-tkba .descript-tkba span {
    }

.item-top-az {
    width: 100%;
}

.item-bottom-az {
}

    .item-bottom-az > *:first-child .az-title {
        font-size: 16px;
    }

    .item-bottom-az > *:first-child .az-descript {
        font-size: 14px
    }

.bomttt-az-saa {
}
/* 1. Thiết lập khung chứa ảnh */
.img-tkba {
    position: relative;
    overflow: hidden; /* Cắt phần ảnh thừa khi phóng to */
    border-radius: 8px; /* Bo góc ảnh cho mềm mại */
}

    .img-tkba img {
        width: 100%;
        display: block;
        transition: transform 0.5s ease; /* Tạo hiệu ứng chuyển động mượt */
    }

/* 2. Hiệu ứng phóng to ảnh khi hover vào thẻ <a> */
.imz-az:hover .img-tkba img {
    transform: scale(1.1); /* Phóng to 10% */
}

/* 3. Hiệu ứng cho phần chữ mô tả */
.descript-tkba {
    padding: 12px 5px;
    text-align: center;
    transition: all 0.3s ease;
}

    .descript-tkba span {
        font-family: 'InterM', sans-serif;
        font-size: 14px;
        color: #333;
        font-weight: 600;
        transition: color 0.3s ease;
    }

/* 4. Đổi màu chữ và thêm bóng đổ nhẹ khi hover */
.imz-az:hover .descript-tkba span {
    color: var(--default-color-4); /* Đổi sang màu đỏ hoặc màu chủ đạo của bạn */
}

.item-bottm-tkba {
    transition: transform 0.3s ease;
}

.imz-az:hover .item-bottm-tkba {
    transform: translateY(-5px); /* Nhấc nhẹ cả khối lên trên */
}

.item-bottom-as {
    width: 100%;
}

.descript-tkba {
    color: #4C4C4C;
    font-family: 'InterSM';
    font-size: 16.037px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24.055px */
    padding-top: 10px;
}

.bomttt-az-sa {
    /* display: flex; */
    /* flex-direction: column; */
    gap: 11px;
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    padding-top: 15px;
}
/* 1. Thiết lập khung chứa để không bị tràn ảnh khi phóng to */
.img-tkb {
    overflow: hidden;
    border-radius: 5px; /* Tùy chọn: Bo góc nhẹ cho đẹp */
}

    .img-tkb img {
        transition: transform 0.4s ease; /* Hiệu ứng mượt cho ảnh */
        display: block;
        width: 100%;
    }

/* 2. Hiệu ứng khi hover vào thẻ <a> hoặc item */
.imz-az:hover .img-tkb img {
    transform: scale(1.1); /* Phóng to ảnh 10% */
}

/* 3. Hiệu ứng cho phần mô tả (chữ) */
.descript-tkb {
    transition: all 0.3s ease;
    /* text-align: center; */
    padding: 10px 0;
}

    .descript-tkb span {
        transition: color 0.3s ease;
        font-family: 'InterM', sans-serif; /* Sử dụng font bạn đang dùng */
        font-weight: bold;
    }

/* Thay đổi màu chữ khi hover */
.imz-az:hover .descript-tkb span {
    color: var(--default-color-5); /* Đổi sang màu đỏ/xanh chủ đạo của bạn */
}

/* 4. Hiệu ứng đổ bóng nhẹ cho toàn khối (Tùy chọn) */
.item-bottm-tkb {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.imz-az:hover .item-bottm-tkb {
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
    transform: translateY(-2px); /* Nhích nhẹ lên trên */
}

.bottom-az.zsa {
    display: flex;
    gap: 16px;
}

.img-tkb {
    width: 100%;
}

.imz-az {
}

.item-bottm-tkb {
    /* display: flex; */
    gap: 9px;
    position: relative;
}

.img-tkb img {
    width: 100%;
}

.descript-tkb {
    color: #4C4C4C;
    font-family: 'INTERSM';
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 16.812px */
    position: absolute;
    bottom: 13px;
    left: 14px;
    text-transform: uppercase;
    color: #FFFF;
}

.items-hdbt-top img {
    transition: transform 0.5s ease; /* Thời gian phóng to ảnh */
    display: block;
    width: 100%;
}

/* 3. Hiệu ứng Hover tổng thể */
.items-hdbt:hover .items-hdbt-top img {
    transform: scale(1.1); /* Phóng to ảnh 10% */
}

.items-hdbt:hover h2 {
    color: var(--default-color-1) !important; /* Đổi màu tiêu đề khi hover */
    transition: color 0.3s ease;
}

/* 4. Thêm hiệu ứng nhấc khung (Tùy chọn) */
.items-hdbt:hover {
    transform: translateY(-3px); /* Nhấc nhẹ item lên trên */
}

@media only screen and (max-width: 739px) {
    /* 1. Tổng thể container */
    .mid-side-home {
        width: 100% !important; /* Chiếm toàn bộ chiều rộng màn hình */
        padding: 0 10px;
    }

    .mid-side-container {
        display: block; /* Chuyển về dòng đơn */
    }

    /* 2. Phần Tin nhà trường (Grid 3 cột -> 1 cột) */
    .item-bottom-az {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 15px;
    }

        /* Hủy bỏ các thiết lập grid-column đặc biệt trên mobile để hiện theo hàng dọc */
        .item-bottom-az .new-az-item:nth-child(1),
        .item-bottom-az .new-az-item:nth-child(2),
        .item-bottom-az .new-az-item:nth-child(3),
        .item-bottom-az .new-az-item:nth-child(4),
        .item-bottom-az .new-az-item:nth-child(5),
        .item-bottom-az .new-az-item:nth-child(6) {
            grid-column: span 1 / span 1 !important;
            grid-row: auto !important;
        }

    .new-az-item .az-item-top {
        height: 115px !important; /* Để ảnh tự co giãn */
    }

    /* 3. Phần Trang Tin Học Sinh (Flex ngang -> dọc) */
    .bottom-az.zsa {
        flex-direction: column;
        gap: 0px;
    }

    .p-side-titleas h3 {
        font-size: 12px;
    }

    .item-top-az,
    .item-bottom-as {
        width: 100% !important; /* Khối trái và phải chiếm hết chiều rộng */
    }

    /* 4. Phần Thông tin hoạt động (Khối to phía trên) */
    .item-bottom-av-t {
        flex-direction: column; /* Ảnh trên chữ dưới */
        gap: 10px;
    }

    .btaz {
        width: 100% !important;
    }

    /* 5. Danh sách hoạt động phía dưới (4 cột -> 2 cột) */
    .item-bottom-av-b {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    /* 6. Điều chỉnh Header và tiêu đề */
    .side-pic.p-side-item.list-img-homee .p-side-titleas {
        width: 52% !important; /* Mở rộng tiêu đề trên mobile */
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }

    .top-az {
        gap: 10px;
        align-items: center;
    }

    .link-view-school-activity-newss {
        border-radius: 7px;
        position: static; /* Không để lệch sang phải trên mobile */
        font-size: 10px;
        height: 26px;
    }

    .img-tkb {
        width: 100%;
    }

    .item-bottm-tkb {
        flex-direction: column
    }

    .descript-tkb {
        padding: 2px;
    }

    .bomttt-az-sa {
        display: grid;
        grid-auto-rows: minmax(min-content,max-content);
        grid-template-columns: repeat(2,minmax(0,1fr));
        column-gap: 5px;
        gap: 6px;
    }
}

@media (max-width:739px) {
    .home {
        display: block !important;
    }

    .wp-notification-banner, .right-side-home {
        width: 100% !important;
    }

    .left-notification {
    }

    .item-bottom-az {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .side-note.p-side-item.list-side-new-event.side-list-link-hh {
        display: none;
    }

    .p-side-title h3 {
        font-size: 16px !important;
    }

    .full-note-new-home {
        margin-top: 10px;
    }

    .sadvz {
        margin-top: 0;
    }

    .p-side-wrap.side-list-new-event-homead {
        height: unset;
    }

    .ttxvisit {
        font-size: 13px;
    }

    .vpo p {
        font-size: 13px;
    }

    .vcas strong {
        font-size: 12px;
    }
    .item-bottom-az .new-az-item:nth-child(1) .az-item-top img{
    height:100%;
    }
    .item-bottom-az > *:first-child .az-title {
    font-size: 13px;
}
    .item-bottom-az > *:first-child .az-descript{
         font-size: 12px;
}
    a.link-view-school-activity-newss .icon{
        w;
        height: 26px;
        width: 22px;
    }
    .bomttt-az-sa{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}