/* 
   FLORIST HANOI - CUSTOM RESPONSIVE OVERRIDES (V6.0 - Full Site Polish)
   - Scope: Header, Footer, Home, Category, Single Product, Cart, Checkout.
   - Goal: No broken layouts, no horizontal scrolls, perfect alignment.
*/

/* --- 1. GLOBAL RESET & BASE STYLES --- */
@media (max-width: 959px) {
    * {
        box-sizing: border-box !important;
    }

    html,
    body {
        width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        font-size: 14px !important;
        /* Base font size */
    }

    /* Container Reset */
    .container,
    .wrap,
    .swrap,
    .wrap2,
    #primary,
    #main,
    .hwrap,
    div[class*="product_row"],
    .swrap.clearfix,
    .featured-flowers,
    .woocommerce,
    .woocommerce-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        float: none !important;
    }

    /* Hide Desktop/Obsolete Elements */
    .slider,
    .nivoSlider,
    .header .top,
    .preferences,
    #phone,
    .phone p,
    .phone h3,
    .search_submit_icon {
        display: none !important;
    }
}

/* --- 2. HEADER (Final V5.3 Config) --- */
@media (max-width: 959px) {
    .topnav {
        /* Menu Pin Left */
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 999999 !important;
        height: 0 !important;
    }

    .mobile-nav {
        display: flex !important;
        position: fixed !important;
        top: 15px !important;
        left: 0 !important;
        z-index: 2147483647 !important;
        background: #429338 !important;
        color: #fff !important;
        padding: 10px 14px !important;
        border-radius: 0 6px 6px 0 !important;
        width: auto !important;
        height: auto !important;
    }

    .mobile-nav span {
        display: none !important;
    }

    .header {
        position: relative !important;
        padding-bottom: 20px !important;
        padding-top: 5px !important;
    }

    .header .hwrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .logo {
        order: 1 !important;
        margin: 0 auto 10px auto !important;
        text-align: center !important;
        width: 100% !important;
    }

    .logo img {
        width: 280px !important;
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto;
    }

    .header-right {
        order: 2 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Search Box */
    .phone.header_search,
    .header_search {
        display: block !important;
        width: 100% !important;
        border: 2px solid #a3d99b !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin-bottom: 25px !important;
        background: #fff !important;
        min-height: 185px;
    }

    #search form {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    /* Side-by-Side Selects */
    #search select {
        width: 48% !important;
        display: inline-block !important;
        height: 42px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        margin: 0 0 8px 0 !important;
    }

    /* Keywords & Button */
    #keywords {
        width: 100% !important;
        margin-top: 5px !important;
        display: block !important;
        border: none !important;
    }

    #keywords input.keyword {
        width: 100% !important;
        height: 45px !important;
        margin-bottom: 10px !important;
        display: block !important;
        margin-top: 0 !important;
    }

    .search_submit_btn {
        display: block !important;
        width: 100% !important;
        height: 45px !important;
        background: #429338 !important;
        color: #fff !important;
        border-radius: 4px !important;
        font-weight: bold !important;
        margin-top: 5px !important;
    }

    /* Cart */
    .cart-top {
        margin-bottom: 15px !important;
        margin-left: 0 !important;
        width: 100% !important;
        display: block !important;
        background: #429338 !important;
        border-radius: 25px !important;
        padding: 10px 15px !important;
        text-align: center !important;
        clear: both !important;
    }

    .cart-top a {
        color: #fff !important;
        text-decoration: none !important;
        font-size: 15px !important;
    }

    .search_submit_btn {
        font-size: 20px;
    }

    .foot2 {
        width: 100%;
    }

    .social-box {
        max-width: 100% !important;
    }

    .mid .swrap {
        padding: 0 !important;
    }

    a.cart_link {
        position: static !important;
    }
}

/* --- 3. ARCHIVE / CATEGORY PAGES --- */
@media (max-width: 959px) {

    /* Filters/Widgets Sidebar */
    #secondary {
        display: none !important;
    }

    /* Hide sidebar on mobile to save space, assuming top filters work */

    /* Product Grid */
    ul.products {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    ul.products li.product {
        width: 49% !important;
        margin-bottom: 15px !important;
        padding: 5px !important;
        border: 1px solid #eee !important;
        background: #fff !important;
        box-sizing: border-box !important;
        clear: none !important;
        float: none !important;
    }

    ul.products li.product img {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 5px auto !important;
    }

    ul.products li.product h3 {
        min-height: 36px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }

    ul.products li.product .price {
        font-size: 14px !important;
        display: block !important;
        margin-bottom: 5px !important;
    }

    /* Pagination */
    .woocommerce-pagination,
    .pagination {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .woocommerce-pagination ul {
        display: inline-block !important;
    }

    .woocommerce-pagination ul li {
        display: inline-block !important;
        margin: 0 2px !important;
    }
    #home_product_row {padding:0!important;}

    #home_product_row #sanpham #anh {
        height: auto !important;
    }
}

/* --- 4. SINGLE PRODUCT PAGE --- */
@media (max-width: 959px) {
    .product_image {
        float: none !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .images {
        width: 100% !important;
    }

    .images img {
        width: 100% !important;
        height: auto !important;
    }

    .product_summary {
        float: none !important;
        width: 100% !important;
        padding: 0 5px !important;
    }

    .product_summary h1 {
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    /* Variations/Add to Cart */
    .variations {
        width: 100% !important;
        display: block !important;
    }

    .variations td,
    .variations th {
        display: block !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }

    .quantity {
        float: left !important;
        margin-right: 10px !important;
    }

    .single_add_to_cart_button {
        float: left !important;
    }

    /* Tabs */
    .woocommerce-tabs {
        clear: both !important;
        margin-top: 30px !important;
    }

    .woocommerce-tabs ul.tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .woocommerce-tabs ul.tabs li {
        width: auto !important;
        flex-grow: 1 !important;
        text-align: center !important;
    }

    .woocommerce-tabs .panel {
        padding: 10px !important;
        border: 1px solid #eee !important;
    }

    /* Related Products */
    .related.products {
        margin-top: 30px !important;
        clear: both !important;
    }

    .related.products h2 {
        font-size: 18px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
}

/* --- 5. CART PAGE (Table Fixes) --- */
@media (max-width: 959px) {

    /* Responsive Table Hack */
    .shop_table,
    .shop_table tbody,
    .shop_table tr,
    .shop_table td,
    .shop_table th {
        display: block !important;
        width: 100% !important;
    }

    /* Hide headers */
    .shop_table thead {
        display: none !important;
    }

    .shop_table tr {
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        padding: 10px !important;
        background: #fff !important;
        position: relative !important;
    }

    .shop_table td {
        text-align: right !important;
        padding-left: 50% !important;
        position: relative !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
    }

    /* Pseudo-labels */
    .shop_table td::before {
        content: attr(data-title);
        position: absolute !important;
        left: 10px !important;
        width: 45% !important;
        white-space: nowrap !important;
        text-align: left !important;
        font-weight: bold !important;
    }

    /* Product Thumbnail/Name Exceptions */
    .shop_table td.product-thumbnail,
    .shop_table td.product-name {
        text-align: center !important;
        padding-left: 0 !important;
    }

    .shop_table td.product-thumbnail::before,
    .shop_table td.product-name::before {
        display: none !important;
    }

    .shop_table td.product-thumbnail img {
        width: 80px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .product-remove {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Cart Totals */
    .cart-collaterals {
        width: 100% !important;
        float: none !important;
    }
}

/* --- 6. CHECKOUT PAGE --- */
@media (max-width: 959px) {
    .col2-set {
        width: 100% !important;
        float: none !important;
    }

    .col-1,
    .col-2 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Form Fields */
    .form-row {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    .form-row label {
        display: block !important;
        margin-bottom: 5px !important;
    }

    .input-text,
    select {
        width: 100% !important;
        height: 40px !important;
        padding: 5px !important;
        border-radius: 4px !important;
        border: 1px solid #ddd !important;
    }

    #order_review_heading,
    #order_review {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}

/* --- 7. FOOTER & HOME GRIDS --- */
@media (max-width: 959px) {

    #home_product_row,
    .home_product_row_2,
    .featured-flowers .mid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    .sanpham,
    .featured-flowers .mid .item,
    #home_product_row .sanpham,
    #home_product_row #sanpham {
        width: 49% !important;
        margin-bottom: 10px !important;
        background: #fff !important;
        border: 1px solid #eee !important;
        min-width: 140px !important;
        /* Safety min-width */
        height: auto !important;
        min-height: 0 !important;
        /* FIX: Reset min-height (was 385px) */
        /* Let content dictate height */
        padding-bottom: 10px !important;
    }

    /* FIX: Reset Image Container Height (Override Desktop 200px) */
    #home_product_row #sanpham #anh,
    #home_product_row .sanpham #anh,
    .sanpham #anh {
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 5px !important;
        overflow: visible !important;
    }

    #home_product_row #sanpham #anh img,
    #home_product_row .sanpham #anh img,
    .sanpham #anh img {
        height: auto !important;
        width: 100% !important;
    }

    /* FIX: Restore Order Now Button (Both Form & Link types) */
    .sanpham form,
    .sanpham .cart,
    .sanpham a.cart_link,
    #home_product_row #sanpham a.cart_link {
        display: block !important;
        margin-top: 5px !important;
        text-align: center !important;
        position: relative !important;
        /* Reset from absolute */
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        float: none !important;
        width: 100% !important;
        z-index: 100 !important;
    }

    /* FIX: Product Item Internal Spacing */
    .sanpham h3.ten {
        margin-top: 10px !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
        min-height: 35px !important;
        font-size: 14px !important;
        padding: 0 2px !important;
    }

    .sanpham .gia {
        min-height: 0 !important;
        margin-bottom: 10px !important;
        display: block !important;
        line-height: 1.4 !important;
    }

    .sanpham .gia .giakm {
        font-size: 14px !important;
        color: #ce0707 !important;
    }

    /* FIX: Restore Order Now Button & Fix Overlap (MAXIMUM SPECIFICITY) */
    html body div.sanpham form,
    html body div.sanpham .cart,
    html body div.sanpham a.cart_link,
    html body div#home_product_row div.sanpham a.cart_link,
    html body div#home_product_row div#sanpham a.cart_link {
        display: block !important;
        margin: 5px auto 0 auto !important;
        text-align: center !important;
        position: relative !important;
        /* Change to relative to be safe */
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        float: none !important;
        width: 100% !important;
        z-index: 9999 !important;
        transform: none !important;
    }

    html body div.sanpham input[type="image"],
    html body div.sanpham .button,
    html body div.sanpham a.cart_link span.btn,
    html body div#home_product_row div.sanpham a.cart_link span.btn,
    html body div#home_product_row div#sanpham a.cart_link span.btn {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 8px 15px !important;
        margin-top: 0 !important;
        border-radius: 4px !important;
        position: static !important;
    }

    /* Footer */
    #footer {
        padding-top: 20px !important;
    }

    .footer-bottom ul.menu_footer {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .footer-bottom ul.menu_footer li {
        width: 50% !important;
        padding-left: 15px !important;
    }

    hr.dashed,
    .dashed {
        width: 100% !important;
        border-top: 1px dashed #ccc !important;
    }
}

/* --- DESKTOP RESTORE FOR ICONS --- */
@media (min-width: 960px) {
    .search_submit_btn {
        display: none !important;
    }

    .search_submit_icon {
        display: inline-block !important;
    }
}

/* --- 8. NEWS / POSTS PAGES --- */
@media (max-width: 959px) {

    /* Hide Sidebar on Blog/News pages */
    .blog .widget-area,
    .single-post .widget-area,
    .archive .widget-area {
        display: none !important;
    }

    /* Content Width 100% */
    .blog .content-area,
    .single-post .content-area,
    .archive .content-area {
        width: 100% !important;
        float: none !important;
    }

    /* Post Items (Blog List) */
    .post,
    .type-post {
        margin-bottom: 30px !important;
        border-bottom: 1px solid #eee !important;
        padding-bottom: 20px !important;
    }

    .post .entry-featured-image,
    .type-post .post-thumbnail {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 15px !important;
    }

    .post .entry-featured-image img,
    .type-post .post-thumbnail img {
        width: 100% !important;
        height: auto !important;
    }

    /* Post Titles */
    .entry-title,
    .entry-title a {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    /* Single Post Content */
    .entry-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    .entry-content iframe {
        max-width: 100% !important;
    }

    /* For embedded videos */
}