/* Nhúng font Banco Regular */
 @font-face {
    font-family: 'BancoRegular';
    src: url('/static/fonts/Banco Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Franklin';
    src: url('/static/fonts/Franklin Gothic No. 2 Roman.otf') format('truetype');
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');



.logo-container {
    display: flex;
    align-items: center; /* Căn giữa logo */
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    position: relative;
    transform: scale(0.6); /* Thu nhỏ toàn bộ logo còn 80% */
    margin-top: -5px; /* Đẩy logo lên cao hơn */

}

/* Ba khối nền */
.blocks {
    display: flex;
    flex-direction: row;
    gap: 5px; /* Tăng khoảng cách giữa các block */
    margin-right: 15px;
}

.block {
    width: 25px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-15deg);
    position: relative;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.block:nth-child(1) { background: red; }
.block:nth-child(2) { background: rgb(45, 127, 250); }
.block:nth-child(3) { background: yellow; }

/* Chữ C cách điệu */
.block span {
    font-size: 34px;
    font-weight: bold;
   
    color: black;
    transform: skewX(15deg);
    font-family: 'BancoRegular', sans-serif;
}

/* Chữ CUULONG */
.logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-top: 15px; /* Hạ chữ xuống một chút */
}

.logo-cuulong {
    font-size: 31px;
    font-weight: bold;
    text-transform: uppercase;
    color: black;
    font-family: 'BancoRegular', sans-serif;
    letter-spacing: 2px;
    line-height: 45px;
    margin-left: -16px;
    margin-top: -6px;
}

/* Chữ COMPUTER */
.logo-computer {
    font-size: 16px; /* Nhỏ lại một chút */
    font-weight: bold;
    text-transform: uppercase;
    color: #3a2f7d;
    font-family: 'Franklin', sans-serif;
    margin-top: -17px;
    margin-left: -20px;
    transform: scaleY(0.6); /* Làm dẹp chữ NGANG*/
    letter-spacing: 2.5px; /* Tăng khoảng cách giữa các chữ */
    margin-left: -14px;
}

/* Slogan */
.slogan {
    font-size: 14px; /* Giữ nguyên kích thước font */
    font-style: italic;
    font-weight: bold;
    color: red;
    font-family: 'Times New Roman', serif;
    position: absolute;
    bottom: -14px; /* Hạ xuống chút nữa */
    left: -5px;
    width: 360px; /* Điều chỉnh chiều dài để bằng chữ COMPUTER */
    text-align: left;
    white-space: nowrap; /* Giữ chữ trên một dòng */
    letter-spacing: 2px; /* Tăng khoảng cách giữa các chữ */
    transform: scaleX(1.1); /* Kéo dãn chữ ngang để bằng với COMPUTER */
}