/*PC*/
@media (min-width: 64em){
    #header .mobile-menu-btn{
        display: none;
    }
}

/* tablet and mobile */
@media(max-width: 63.9375em) {
    #nav .subnav li a {
        padding: 5px 12px;
    }

    .contact-form .form-control {
        padding: 15px;
        font-size: 16px;
    }


    .contact-info {
        line-height: 2;
    }

    .btn {
        padding: 15px 20px;
    }

    #footer .social-list {
        font-size: 35px;
    }

    #footer .social-list a {
        margin: 0 8px;
    }

    #footer .copyright a {
        padding: 15px 0;
        display: inline-block;
    }

}

/*tablet*/
@media(min-width: 46.25em) and (max-width: 63.9375em){
    #header .mobile-menu-btn{
        display: none;
    }

    #footer .copyright  {
        font-size: 25px;
    }
}

/*Mobile*/
@media(max-width: 46.1875em){
    .s-full-width,
    .s-column-full{
        width: 100% !important;
    }

    .s-mt-16{
        margin-top: 16px !important;
    }

    .s-mt-8{
        margin-top: 8px !important;
    }

    #header {
        overflow: hidden;
    }

    #header .search-icon-btn{
        display: none;
    }
    #slider .text-content {
        display: none;
    }

    #nav {
        display: inline;
    }

    #nav .subnav {
        position: initial;
    }

    #nav .subnav li a{
        padding: 5px 36px;
        color: #fff;
    }

    #nav li a{
        padding: 1px 24px;
    }

    #nav .subnav {
        background-color: #333;
    }

    #nav > li{
        display: block;
    }

    /*Dùng pseudo class để lấy thẻ li đầu tiên (home) là con trực tiếp của nav*/
    #nav > li:first-child{
        display: inline-block;
    }

    .mobile-menu-btn{
        display: block;
    }

    #content .member-img{
        width: 60%;
    }

    .contact-form {
        margin-top: 32px;
    }
}