@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.font-arial {
    font-family: 'Arimo', Arial, Helvetica, sans-serif !important;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.UIFooterControl {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1200px;
    /* Thêm màu nền để dễ nhìn chữ trắng */
    /*background-color: #182940; */
}

/* --- QUAN TRỌNG: Ghi đè style inline width="1300px" của HTML --- */
.UIFooterControl table {
    width: 100% !important; 
    height: auto !important;
    max-width: 100%;
}

.UIFooterControl .CopyRight {
    color: #fff;
    margin: 0 auto;
    padding: 20px 0;
    width: 100%;
    font-size: 15px;
}

/* Chỉnh lại selector khớp với HTML */
.UIFooterControl table tr td span.name,
.UIFooterControl strong span { 
    font-family: Roboto;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: #FFFFFF;
    display: block; /* Để xuống dòng đúng */
}

.UIFooterControl div.CopyRightText {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #fff; /* Thêm màu chữ cho rõ */
}

.UIFooterControl div.CopyRightText span.name2 {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
}

.UIFooterControl a {
    color: #fff; /* Đổi màu link sang trắng cho nổi trên nền tối */
    font: 13px/1.5 Tahoma;
    text-decoration: none;
}

/* Xử lý ảnh banner không bị tràn */
.UIFooterControl img {
    max-width: 100%;
    height: auto;
}

.UIFooterControl .Design {
    text-align: right;
}

.UIFooterControl .CopyRightText {
    margin-bottom: 5px;
    margin-top: 5px;
}

div.design_menu_footer {
    padding: 10px 0;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2); /* Thêm đường kẻ mờ */
}

div.design_menu_footer .design_menu_footer .design p {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 400;
    line-height: 15.23px;
    text-align: center;
    color: #FFFFFFB2;
}

/* --- PHẦN RESPONSIVE MOBILE --- */
@media only screen and (max-width: 768px) {
    .UIFooterControl {
        padding: 10px !important;
        padding-bottom: 40px !important;
    }

    /* Biến Table thành dạng Flex để xếp chồng */
    .UIFooterControl table tbody, 
    .UIFooterControl table tr {
        display: block;
        width: 100%;
    }

    .UIFooterControl table tbody tr {
        display: flex;
        flex-direction: column; /* Xếp dọc các cột */
        align-items: center;
    }

    .UIFooterControl table tbody tr td {
        text-align: center !important;
        width: 100% !important; /* Ép full chiều rộng */
        display: block;
        padding: 10px 0;
    }

    /* Cột banner */
    .UIFooterControl table tbody tr td:nth-child(2) {
        margin-top: 15px;
    }

    /* Canh giữa các text bên trái */
    .UIFooterControl strong span,
    .UIFooterControl div.CopyRightText,
    .UIFooterControl .CopyRightText {
        text-align: center !important;
    }

    /* Phần bản quyền bên dưới */
    div.design_menu_footer .design > div {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    div.design_menu_footer .design > div > div {
        text-align: center !important;
        width: 100%;
    }

    div.design_menu_footer .design p {
        text-align: center !important;
    }
}

/* --- PHẦN TABLET (769px - 1179px) --- */
@media only screen and (min-width: 769px) and (max-width: 1179px) {
    .UIFooterControl {
        padding-bottom: 40px !important;
    }

    /* Vẫn giữ layout table nhưng co giãn width */
    .UIFooterControl table {
        width: 100% !important;
    }
    
    .UIFooterControl strong span {
        font-size: 16px !important; /* Giảm size chữ chút cho gọn */
    }
}