/* Tablet */

@media(min-width: 46.25em) and (max-width:64em){

    .header__nav{
        background: var(--white-color);
    }

    .header__nav a{
        padding: 29.6px 12px;
    }

    #about{
        display: flex;
        flex-direction: column;
    }

    .about{
        max-width: 700px;
        margin: 0 auto;
    }
    
    .about__col{
        width: 45%;
    }
    
    .about__col img{ 
        float: right;
        width: 70%;
    }

    .product__sale {
        display: flex;
    }

    .product__sale-content {
        margin: 0.625em 0.5em;
    }

    .product__time-sale {
        width: 73.2%;
    }

    .product__time-sale--none {
        min-height: 2.5em;
    }

    /* Cuối trang */
    
    #footer .icon{
        font-size: 30px;
        padding: 16px;
    }
}

/* Smart phone */

@media (max-width: 46.1875em){
    .menu-icon{
        cursor: pointer;
        display: block;
        float: right;
        padding: 14px 22px 14px;
        
    }
    
    .menu-icon:hover{
        background-color: #f44336;
    }

    /* Thanh nav */

    #header {
        display: flex;
        justify-content: flex-start;
        height: 46.33px;
    }

    .header__nav{
        display: block;
    }
    .header__nav a{
        display: block;
    }

    .header__nav a .a-full{
        width: 100%;
    }

    /*  */

    .description{
        line-height: 25px;
    }

    /* giới thiệu */

    #about{
        display: flex;
    }

    .about{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .about__row{
        display: flex;
        flex-direction: column;
    }

    .about__col{
        width: 90%;
        display: block;
    }
    
    .about__col img{ 
        margin-top: 32px;
    }

    /* San pham  */
    #product{
        display: flex;
        background-color: #ddd;
        flex-direction: column;
        padding: 0;
    }
    
    .product{
        padding: 32px 8px;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .product__col{
        border: 1px solid #ccc;
        flex: 1;
        min-width: 165px;
    }

    .product__col:hover .product__view{
        display: flex;
    }

    .product__col:hover .product__view-btn{
        display: block;
    }

    .product__view-btn{
        width: 90%;
        font-size: 14px;
    }

    .product__time-sale {
        display: flex;
        padding: 0.125rem 0.25rem;
        min-height: 10px;
        color: var(--primary-color);
        border: 0.0625rem solid var(--primary-color);
        font-size: 0.625rem;
        align-items: center;
        width: 67.2%;
    }

    .product__sale-img {
        width: 100% !important;
    }

    .product__sale-content {
        margin: 7% 1%;
    }

    .product__time-sale--none {
        display: flex;
        height: 15px;
    }

    .product__view{
        position: absolute;
        background-color: #333;
        opacity: 0.7;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
    }   
    
    .product__view-btn {
        display: none;
        width: 80%;
        position: absolute;
        top: 40%;
        left: 10%;
        border-radius: 4px;
        opacity: 1;
    }

    /* cuối trang */

    #footer .icon{
        font-size: 30px;
        padding: 16px;
    }

    #footer .col-third{
        display: none;
    }
}