/* Desktop width >= 1024px */
@media (min-width: 64em) {}

/* Tablet & Mobile width < 1024px */
@media (max-width: 63.99375em) {

    .header {
        display: block;
        overflow: hidden;
    }

    .header .ti-close.open,
    .header .ti-menu.open {
        display: block;
    }

    .header .home-page {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        margin: 0;
        border-bottom: 0.2px solid #cccccc3e;
    }

    .header .navigation {
        display: none;
        position: relative;
    }

    .header .navigation.open {
        display: block;
    }

    .header .navigation li {
        padding: 10px 10px;
        border-bottom: 0.2px solid #cccccc3e;
    }

    .header .navigation li.sign-in-sm,
    .header .navigation li.sign-up-sm {
        display: block;
    }

    .header .sign-in,
    .header .sign-up {
        display: none;
    }

    .header-tab {
        display: block;
    }

    .header-des {
        display: none;
    }

    .product-menu-home {
        padding-top: 20px;
    }

    footer .row-link-contact a i {
        font-size: 28px;
    }

    @keyframes modalMenuIn {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0px);
        }
    }


}

/* Tablet 740px <= width < 1024px */
@media (max-width: 63.99375em) and (min-width: 46.25em) {
    .thu-ngay {
        background-size: contain;
        height: auto;
    }

    .thu-ngay .col-right {
        padding: 0 12px;
    }

    .thu-ngay .col-right img {
        width: 100%;
    }

    .tim-hieu-them .col-left {
        padding: 12px;
    }

    .chuyen-nha .coffeeholic .des-hidden {
        display: block;
    }

    .chuyen-nha .coffeeholic .content-list .col {
        margin: 28px 0;
    }

    .chuyen-nha .coffeeholic .content-list img {
        height: 20vw;
    }

    footer .row-linklist img {
        width: 72%;
        height: auto;
    }

}

/* Mobile width < 740px */
@media (max-width: 46.24375em) {
    .col-half {
        width: 50% !important;
    }

    .menu-home {
        padding: 0;
    }

    .slide.mob-hidden {
        display: none;
    }

    .slide.des-hidden {
        display: grid;
    }

    .thu-ngay {
        background-size: contain;
        height: auto;
    }

    .thu-ngay .container-fluid {
        padding: 0 12px;
    }

    .thu-ngay .col-right {
        padding: 0 12px;
    }

    .thu-ngay .col-right img {
        width: 70%;
    }

    .thu-ngay .col-right>.content>p {
        color: #000;
        filter: drop-shadow(1px 1px 0.5px #ffffff);
    }

    .tim-hieu-them {
        margin: 0 12px;
    }

    .tim-hieu-them .container-fluid {
        height: auto;
    }

    .tim-hieu-them .col-left {
        display: grid;
        justify-items: center;
    }


    .tim-hieu-them .content-tim-hieu-them h3 {
        text-align: center;
        font-size: 28px;
    }

    .tim-hieu-them .content-tim-hieu-them p {
        text-align: center;
    }

    .tim-hieu-them .content-tim-hieu-them .btn-tim-hieu-them {
        margin: 0 0 16px;
    }

    .tim-hieu-them .col-left .btn-next {
        display: none;
    }

    .tim-hieu-them .col-right {
        padding: 0 12px;
    }

    .tim-hieu-them .col-right .carousel-inner img {
        height: 56vw;
    }

    .chuyen-nha .container-fluid {
        padding: 0;
    }

    .chuyen-nha .header-chuyen-nha {
        margin: 0;
        width: 100%;
    }

    .chuyen-nha .coffeeholic>.title {
        margin: 12px;
    }

    .chuyen-nha .coffeeholic .content-list {
        margin: 0 12px;
    }

    .chuyen-nha .coffeeholic .content-list .col {
        margin: 16px 0;
    }

    .chuyen-nha .coffeeholic .content-list img {
        height: 48vw;
    }

    .chuyen-nha .coffeeholic .des-hidden {
        display: block;
    }

    footer .row-linklist img {
        height: auto;
    }

    footer .row-link-contact {
        justify-content: space-around;
    }

}