/*!
Theme Name: Kcm
Author: Me
Author URI: https://vienman1990.github.io/
*/

@font-face {
    font-family: 'ClashDisplay';
    src: url('./fonts/ClashDisplay-Extralight.woff2') format('woff2'),
        url('./fonts/ClashDisplay-Extralight.woff') format('woff'),
        url('./fonts/ClashDisplay-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'ClashDisplay';
    src: url('./fonts/ClashDisplay-Light.woff2') format('woff2'),
        url('./fonts/ClashDisplay-Light.woff') format('woff'),
        url('./fonts/ClashDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'ClashDisplay';
    src: url('./fonts/ClashDisplay-Regular.woff2') format('woff2'),
        url('./fonts/ClashDisplay-Regular.woff') format('woff'),
        url('./fonts/ClashDisplay-Regular.ttf') format('truetype');
    font-weight: 400; /* 'normal' cũng tương đương 400 */
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'ClashDisplay';
    src: url('./fonts/ClashDisplay-Medium.woff2') format('woff2'),
        url('./fonts/ClashDisplay-Medium.woff') format('woff'),
        url('./fonts/ClashDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'ClashDisplay';
    src: url('./fonts/ClashDisplay-Semibold.woff2') format('woff2'),
        url('./fonts/ClashDisplay-Semibold.woff') format('woff'),
        url('./fonts/ClashDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'ClashDisplay';
    src: url('./fonts/ClashDisplay-Bold.woff2') format('woff2'),
        url('./fonts/ClashDisplay-Bold.woff') format('woff'),
        url('./fonts/ClashDisplay-Bold.ttf') format('truetype');
    font-weight: 700; /* 'bold' cũng tương đương 700 */
    font-display: swap;
    font-style: normal;
}

.bg_parttern {
    position: relative;

    &::before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url('./img/bg_pattern.svg');
        background-repeat: repeat;
        background-size: 100px 100px;

        @media screen and (max-width: 768px) {
            background-size: 50px 50px;
        }
    }
}

.entry_btn_bg {
    background: url('./img/entry_btn_bg.png');
    background-size: 100% 100%;
}

@media screen and (min-width: 1023px) {
    .recruitment_title {
        > div {
            background-image: url('./img/recruitment_tab.svg');
            background-repeat: no-repeat;
            background-size: contain;

            &.--act {
                background-image: url('./img/recruitment_tab_active.svg');
            }
        }
    }
}