/* 
   FLORIST HANOI - CUSTOM RESPONSIVE OVERRIDES (V6.0 - Final 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-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;
    }

    .home_product_row_2 {
        margin-top: 10px;
    }
}

/* --- 4. SINGLE PRODUCT PAGE --- */
@media (max-width: 959px) {

    /* High Specificity Container Fixes */
    html body .hp-box.list_anh_sp,
    html body .hp-box .zoom-wrapper,
    html body .zoom-wrapper {
        float: none !important;
        width: 100% !important;
        clear: both !important;
        display: block !important;
        padding: 0 !important;
    }

    /* FIX: Single Product Image Layout - Stack Main Image & Thumbnails */
    html body .product_image,
    html body .images,
    html body .woocommerce-product-gallery {
        float: none !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Main Image / Wrapper -> Order 1 (Top) */
    html body .product_image>a,
    html body .images>a,
    html body .woocommerce-main-image,
    html body .woocommerce-product-gallery__image,
    html body .woocommerce-product-gallery__wrapper {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        display: block !important;
    }

    html body .product_image img,
    html body .images img {
        width: 100% !important;
        height: auto !important;
    }

    /* Thumbnails -> Order 2 (Bottom) */
    html body .product_image .thumbnails,
    html body .images .thumbnails,
    html body .flex-control-nav {
        order: 2 !important;
        width: 100% !important;
        padding-top: 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        clear: both !important;
        float: none !important;
    }

    html body .product_image .thumbnails a,
    html body .images .thumbnails a,
    html body .flex-control-nav li {
        width: 20% !important;
        /* Show 4-5 thumbnails per row */
        margin: 0 5px 10px 5px !important;
        float: none !important;
        display: inline-block !important;
    }

    html body .product_image .thumbnails img,
    html body .images .thumbnails img,
    html body .flex-control-nav img {
        width: 100% !important;
        height: auto !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }

    .product_summary {
        float: none !important;
        width: 100% !important;
        padding: 0 5px !important;
        clear: both !important;
        /* Ensure it starts after images */
    }

    .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;
    }

    h1.woocommerce-products-header__title.page-title {
        margin-left: 0 !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;
        margin-top: 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;
        margin-bottom: 5px !important;
    }

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

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

    /* For embedded videos */
}

/* --- MOVED FROM CONTENT-SINGLE-PRODUCT.PHP (WITH HIGH SPECIFICITY) --- */

/* 1. Global Box Sizing */
html body .hp-box.list_anh_sp,
html body .fb-box.thong_tin_sp,
html body .awards-box,
html body .tab-container,
html body .related-products-wrapper,
html body .awards-box.support_box {
    box-sizing: border-box !important;
}

/* 2. DESKTOP LAYOUT (Min-width: 960px) */
@media (min-width: 960px) {
    html body .hp-box.list_anh_sp {
        width: 40% !important;
        float: left !important;
        padding-right: 20px !important;
    }

    html body .fb-box.thong_tin_sp {
        width: 30% !important;
        float: left !important;
        padding-right: 20px !important;
    }

    html body .awards-box {
        width: 30% !important;
        float: left !important;
    }

    html body .tab-container {
        width: 70% !important;
        float: left !important;
        clear: left !important;
    }

    html body .awards-box.support_box {
        float: right !important;
        clear: right !important;
    }

    /* Flexbox Layout for Zoom Area - Desktop */
    html body .zoom-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
    }

    html body .list_images {
        width: 75px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        max-height: 500px;
        overflow-y: auto;
    }

    html body .zoom-main-image {
        flex-grow: 1 !important;
        max-width: calc(100% - 77px) !important;
    }
}

/* 4. SHARED STYLES (Moved before Mobile Block) */
.article-crumbs {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 0;
}

.article-crumbs a {
    color: #429338;
    text-decoration: none;
}

.article-crumbs .delimiter {
    margin: 0 5px;
    color: #ccc;
}

.list_images a {
    display: block !important;
    border: 1px solid #ddd;
    transition: border-color 0.3s;
}

.list_images a.active,
.list_images a:hover {
    border-color: #429338;
}

.list_images img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.zoom-main-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    overflow: hidden !important;
    position: relative !important;
}

#zoom_03 {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Side Boxes */
.support_box .gbox {
    border: 1px solid #429338;
    margin-bottom: 20px;
    background: #fdfbd5;
    overflow: hidden;
    border-radius: 4px;
}

.support_box .tit_hotro {
    background: #429338;
    color: #fff !important;
    padding: 12px 10px;
    margin: 0 !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
}

.support_box table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 !important;
}

.support_box table td {
    padding: 10px 8px;
    border-bottom: 1px solid #e5e0a9;
    vertical-align: middle;
    font-size: 13px;
    color: #333;
}

.support_box .hailong {
    padding: 15px;
    text-align: center;
}

.support_box .hailong img {
    max-width: 100%;
    height: auto;
}

/* 9. TABS STYLING (Moved from Inline) */
ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.tabs li {
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current {
    background: #cce5c9;
    color: #222;
}

.tab-content {
    display: none;
    background: #ffffff;
    padding: 15px;
}

.tab-content.current {
    display: inherit;
    background: #ffffff;
    display: block;
}

/* 10. RELATED PRODUCTS SLIDER STYLING (Moved from Inline) */
#prevNextExample {
    margin-top: 40px;
    position: relative;
    clear: both;
    width: 100%;
}

#prevNextExample .h2_bottom_dashed {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    border-bottom: 2px dashed #429338;
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin-left: 5px;
}

/* Controls positioning */
#prevNextExample .controls {
    position: absolute;
    top: 250px;
    /* Align with middle of product images (approx) */
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    width: 100%;
    margin-left: 0;
}

#prevNextExample .fancyPrev,
#prevNextExample .fancyNext {
    opacity: 0.8;
    /* Higher visibility */
    cursor: pointer;
    transition: all 0.3s;
    pointer-events: all;
    background: rgba(0, 0, 0, 0.1);
    /* Light grey background to ensure visibility */
    width: 40px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

#prevNextExample .fancyPrev {
    left: 0;
    /* Position inside left edge */
    border-radius: 0 5px 5px 0;
}

#prevNextExample .fancyNext {
    right: 0;
    /* Position inside right edge */
    border-radius: 5px 0 0 5px;
}

#prevNextExample .fancyPrev img,
#prevNextExample .fancyNext img {
    width: 100% !important;
    height: auto !important;
    max-width: 20px !important;
    /* Smaller arrow inside box */
}

#prevNextExample .fancyPrev:hover,
#prevNextExample .fancyNext:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

#prevNextExample .disabled {
    opacity: 0.3 !important;
    /* Visible but clearly disabled */
    cursor: default;
}

/* CarrotCell container fixes */
#prevNextKitten {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#prevNextKitten .carrotCellView {
    width: 100%;
    overflow: hidden;
}

#prevNextKitten ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
}

#prevNextKitten ol li {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Product Item Styling - Using new classes to avoid conflicts */
.related-product-item {
    text-align: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.related-product-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #429338;
}

.related-product-image {
    margin-bottom: 10px;
    overflow: hidden;
    flex-shrink: 0;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: transform 0.3s;
    display: block;
}

.related-product-item:hover .related-product-image img {
    transform: scale(1.05);
}

.related-product-title {
    font-size: 14px;
    line-height: 1.4;
    margin: 10px 0;
    min-height: 40px;
    flex-grow: 1;
}

.related-product-title a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.related-product-title a:hover {
    color: #429338;
}

.related-product-price {
    display: block;
    margin: 8px 0;
}

.related-price-amount {
    color: #429338;
    font-weight: bold;
    font-size: 16px;
}

.related-product-code {
    display: block;
    color: #999;
    font-size: 12px;
    margin-bottom: 10px;
}

.related-product-link {
    text-decoration: none;
    display: block;
}

.related-product-btn {
    display: inline-block;
    background: #429338;
    color: #fff;
    padding: 8px 20px;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    transition: background 0.3s;
}

.related-product-btn:hover {
    background: #357a2d;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    #prevNextKitten ol li {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 768px) {
    #prevNextKitten ol li {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    #prevNextExample .controls {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    #prevNextExample .fancyPrev,
    #prevNextExample .fancyNext {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    #prevNextKitten ol li {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Override carrotskin.css defaults */
#prevNextKitten.kitten .carrotCellView {
    width: 100% !important;
}

#prevNextKitten .carrotCellView li {
    width: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#prevNextKitten .carrotCellView ol {
    float: none !important;
    width: auto !important;
}

/* 3. MOBILE LAYOUT (Max-width: 959px) - MOVED TO END TO ENSURE PRIORITY */
@media (max-width: 959px) {

    /* Reset Boxes to Full Width */
    html body .hp-box.list_anh_sp,
    html body .fb-box.thong_tin_sp,
    html body .awards-box,
    html body .tab-container,
    html body .awards-box.support_box {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
        clear: both !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* NUCLEAR TARGETING FOR ZOOM AREA */
    html body .hp-box .zoom-wrapper,
    html body .hp-box .zoom-wrapper .zoom-left,
    html body .zoom-left {
        display: flex !important;
        flex-direction: column !important;
        /* Changed from reverse for stability */
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    /* Thumbnails -> Order 2 (Bottom) */
    html body .hp-box .zoom-wrapper .zoom-left .list_images,
    html body .list_images,
    div#gallery_01 {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
        margin-top: 10px !important;
        max-height: none !important;
        overflow: visible !important;
        order: 2 !important;
        /* Visual Bottom */
        float: none !important;
        display: flex !important;
    }

    /* Main Image -> Order 1 (Top) */
    html body .hp-box .zoom-wrapper .zoom-left .zoom-main-image,
    html body .zoom-main-image {
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
        /* Visual Top */
        float: none !important;
        display: block !important;
    }

    /* Force Visibility for Thumbnails */
    html body .list_images a,
    html body div#gallery_01 a {
        display: inline-block !important;
        width: 18% !important;
        margin: 0 1% !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        float: none !important;
    }

    html body .list_images img,
    html body div#gallery_01 img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body .fb-box.thong_tin_sp {
        padding: 10px 5px !important;
        border-top: 1px dotted #ccc !important;
    }
}

/* --- EXTRACTED INLINE STYLES --- */
.zoom-placeholder {
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-products-wrapper {
    clear: both;
    padding-top: 20px;
}

/* --- MOBILE REFINEMENTS (Ensure Priority) --- */
@media (max-width: 959px) {

    /* Ensure Title is visible */
    #product_title {
        font-size: 20px !important;
        margin-top: 0 !important;
        word-wrap: break-word !important;
    }

    /* --- FIX: VARIATION / SIZE OPTIONS --- */
    /* Container: Allow wrapping */
    ul.o-options.variations-radio-list {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        /* Allow row layout for wrapping */
        width: 100% !important;
        margin: 0 -1% !important;
        /* Negative margin to offset item padding */
        padding: 0 !important;
    }

    /* Items: Default to 48% (2 per row) for larger mobile/tablet */
    /* --- FIX: BROKEN FOOTER IMAGES/LIGHTBOX --- */
    .floristhanoi-lightbox,
    .lightbox-btn,
    .lightbox-close,
    .lightbox-content,
    .controls,
    #controls1 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        pointer-events: none !important;
    }

    ul.o-options.variations-radio-list li.o-option-box {
        width: 48% !important;
        display: inline-block !important;
        float: none !important;
        margin: 0 1% 10px 1% !important;
        box-sizing: border-box !important;
    }

    /* SMALL MOBILE (< 480px): Stack 1 per row */
    @media (max-width: 479px) {
        ul.o-options.variations-radio-list li.o-option-box {
            width: 98% !important;
            /* Nearly full width */
            margin: 0 1% 10px 1% !important;
        }
    }

    /* Option Label Content */
    ul.o-options.variations-radio-list li.o-option-box label {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        min-height: 50px !important;
        /* Uniform height */
    }

    /* --- FIX: ADD TO CART BUTTON --- */
    .woocommerce-variation-add-to-cart {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        overflow: visible !important;
        /* Prevent clipping */
    }

    .single_add_to_cart_button {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-top: 15px !important;
        white-space: normal !important;
        /* Allow text wrap if needed */
        height: auto !important;
        padding: 12px !important;
    }

    /* --- FIX: TABS OVERFLOW --- */
    .woocommerce-tabs ul.tabs,
    ul.tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #eee !important;
    }

    .woocommerce-tabs ul.tabs li,
    ul.tabs li {
        width: 50% !important;
        /* 2 tabs per row */
        flex-grow: 1 !important;
        font-size: 11px !important;
        padding: 10px 2px !important;
        text-align: center !important;
        border: 1px solid #eee !important;
        margin: 0 -1px -1px 0 !important;
        /* Collapse borders */
    }

    /* Tab Content - Prevent Overflow */
    .tab-content,
    .panel {
        padding: 15px 10px !important;
        overflow-x: hidden !important;
        /* Clip overflow */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tab-content img,
    .panel img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- FIX: "WHY US" / AWARDS BOX --- */
    .awards-box {
        margin-top: 20px !important;
    }

    .awards-box .thong_tin {
        display: flex !important;
        flex-direction: row !important;
        /* Keep side-by-side */
        align-items: center !important;
        padding: 10px !important;
        background: #fafafa !important;
        margin-bottom: 10px !important;
        border: 1px dashed #ddd !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    .awards-box .thong_tin strong {
        color: #ff0000;
    }

    .awards-box .thong_tin img {
        width: 40px !important;
        /* Fixed width icon */
        height: auto !important;
        margin-right: 15px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        /* Don't shrink icon */
    }

    .storefront-breadcrumb .col-full {
        margin-left: 0 !important;
        margin-right: 5px;
    }

    /* --- FIX: SUPPORT / SATISFACTION BOXES --- */
    .support_box .gbox {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px !important;
        /* Internal padding */
        margin-bottom: 15px !important;
        border: 2px solid #429338 !important;
        /* Visible border */
        height: auto !important;
    }

    .support_box .hailong {
        padding: 10px !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    /* --- FIX: RELATED PRODUCTS RIGHT EDGE --- */
    .related-products-wrapper {
        width: 100% !important;
        padding: 20px 0 !important;
        overflow: hidden !important;
    }

    .related-products-section {
        margin: 0 -5px !important;
        /* Offset grid padding */
    }

    /* Ensure specific grid for related products on small screens */
    #prevNextKitten .carrotCellView {
        height: auto !important;
        overflow: visible !important;
    }

    #prevNextKitten ol {
        display: flex !important;
        flex-wrap: wrap !important;
        transform: none !important;
        width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
    }

    #prevNextKitten ol li {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 5px !important;
        margin-bottom: 15px !important;
        float: none !important;
    }

    /* Hide Slider Controls on Mobile */
    #prevNextExample .controls,
    #prevNextExample .fancyPrev,
    #prevNextExample .fancyNext {
        display: none !important;
    }

    /* Adjust Card Height for Grid */
    .related-product-item {
        height: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Ensure Info Box visibility */
    /* --- UNIFIED RESPONSIVE REFINEMENTS --- */

    /* 1. PRODUCT IMAGES (Desktop Default: Row, Thumbs Left) */
    .hp-box .zoom-wrapper,
    .hp-box .zoom-wrapper .zoom-left {
        display: flex;
        flex-direction: row;
        gap: 15px;
        /* Space between thumbs and main image */
        align-items: flex-start;
    }

    /* Thumbs Container */
    .list_images {
        width: 80px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        order: 1;
        /* Left */
    }

    /* Main Image */
    .zoom-main-image {
        flex-grow: 1;
        order: 2;
        /* Right */
        width: calc(100% - 95px);
        /* Full width minus thumbs + gap */
    }

    /* 2. PRICE OPTIONS (Fluid Wrapper) */
    ul.o-options.variations-radio-list {
        display: flex;
        flex-wrap: wrap;
        /* Allow wrapping */
        gap: 10px;
        margin: 0;
        width: 100%;
    }

    ul.o-options.variations-radio-list li.o-option-box {
        /* Fluid Logic: */
        /* Basis 45% allows 2 items per row with small gap. */
        /* Min-width 220px ensures 2 per row on 600px screens (since 600 > 220*2) */
        flex: 1 1 45%;
        min-width: 185px;
        margin-bottom: 0 !important;
        box-sizing: border-box;
    }

    ul.o-options.variations-radio-list li.o-option-box label {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        min-height: 50px;
        box-sizing: border-box;
    }

    .o-options li:first-of-type {
        margin-left: -6px !important;
    }

    table.cam_ket_table li {
        text-align: left;
    }

    /* --- MOBILE OVERRIDES (< 960px) --- */
    /* --- MOBILE OVERRIDES (< 960px) --- */
    @media (max-width: 959px) {

        /* 1. IMAGES: Stack Vertical (Main Top, Thumbs Bottom Left) */
        .hp-box .zoom-wrapper,
        .hp-box .zoom-wrapper .zoom-left {
            flex-direction: column !important;
            align-items: center !important;
        }

        .zoom-main-image {
            order: 1 !important;
            /* Top */
            width: 100% !important;
        }

        .zoom-main-image img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
        }

        .list_images {
            order: 2 !important;
            /* Bottom */
            width: 100% !important;
            flex-direction: row !important;
            /* Horizontal list */
            justify-content: flex-start !important;
            /* Left aligned as requested */
            flex-wrap: wrap !important;
            /* Wrap if many */
            gap: 10px !important;
            overflow-x: visible;
            padding-bottom: 10px;
        }

        /* Ensure Title is visible */
        #product_title {
            font-size: 20px !important;
            margin-top: 0 !important;
            word-wrap: break-word !important;
        }

        /* 3. TABS (50/50 Split) */
        .woocommerce-tabs ul.tabs,
        ul.tabs {
            display: flex !important;
            flex-wrap: wrap !important;
            border-bottom: 1px solid #eee !important;
        }

        .woocommerce-tabs ul.tabs li,
        ul.tabs li {
            width: 50% !important;
            flex-grow: 1 !important;
            font-size: 11px !important;
            border: 1px solid #eee !important;
            margin: 0 -1px -1px 0 !important;
        }

        /* 4. WHY US (Icon Left, Text Right - Fix) */
        .awards-box .thong_tin {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            text-align: left !important;
            padding: 10px !important;
        }

        .awards-box .thong_tin img {
            margin-right: 15px !important;
            margin-bottom: 0 !important;
            flex-shrink: 0 !important;
            /* Prevent icon shrinking */
        }

        /* 5. BOX BORDERS & PADDING */
        .support_box .gbox {
            box-sizing: border-box !important;
            border: 2px solid #429338 !important;
            /* Inside border */
            width: 100% !important;
        }

        /* 6. RELATED PRODUCTS (Grid) */
        #prevNextKitten .carrotCellView {
            height: auto !important;
            overflow: visible !important;
        }

        #prevNextKitten ol {
            display: flex !important;
            flex-wrap: wrap !important;
            width: 100% !important;
            margin: 0 !important;
        }

        #prevNextKitten ol li {
            width: 50% !important;
            max-width: 50% !important;
            padding: 0 5px !important;
            float: none !important;
        }

        #prevNextExample .controls {
            display: none !important;
        }

        /* FIX: Related Products Title Overflow */
        .related-products-wrapper {
            padding-top: 30px !important;
            /* Increase top padding */
            margin-top: 20px !important;
            border-top: none !important;
            /* Remove if line is border */
            position: relative;
        }

        .related-products-wrapper h3.related-title {
            margin-top: 0 !important;
            padding-top: 10px !important;
            position: relative;
            z-index: 5;
            background: #fff;
            /* Mask line if behind */
            display: inline-block;
            padding-right: 10px;
        }
    }

    /* --- FINAL POLISH (Restored Fixes) --- */

    /* 1. Price Option Fix (User Request: -6px) */
    ul.o-options.variations-radio-list {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    ul.o-options.variations-radio-list li.o-option-box {
        margin-left: 0 !important;
        width: 100% !important;
    }

    ul.o-options.variations-radio-list li.o-option-box:first-child {
        margin-left: -10px !important;
    }

    /* 2. Commitment List Left Align */
    .florist-hanoi-commitment-wrapper {
        text-align: left !important;
    }

    .florist-hanoi-commitment-wrapper ul {
        text-align: left !important;
        padding-left: 0 !important;
        list-style-position: inside !important;
    }

    .florist-hanoi-commitment-wrapper li {
        text-align: left !important;
        justify-content: flex-start !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    /* 3. Breadcrumb Indentation */
    .woocommerce-breadcrumb {
        padding-left: 0 !important;
        width: calc(100% + 20px) !important;
    }

    /* 4. Related Products Title Overflow */
    .related-products-wrapper h3.related-title,
    h2.h2_bottom_dashed {
        margin-left: 15px !important;
        padding-left: 0 !important;
        display: inline-block !important;
    }

    /* --- MOBILE MENU FIXES (Green Dot & Alignment) --- */

    /* 1. Remove "Green Dot" on Menu Button */
    /* Target ONLY the top wrapper (which was showing the green artifact) */
    .header>.top.wrap.clearfix {
        background: transparent !important;
        /* Do NOT set height:0 as it hides My Account/Top Links */
    }

    /* 2. Fix Menu Alignment (Force Left) */
    /* When menu is OPEN, counteract the container's transform */
    /* 2. Fix Menu Alignment (Force Left) & Scroll */
    /* When menu is OPEN: Show it, enable pointer events, and force layout */
    .shownav .nav-container.for-mobile,
    .shownav .nav-container.hide-d.for-mobile {
        transform: none !important;
        /* Reset transform so left:0 works */
        left: 0 !important;
        top: 0 !important;
        position: fixed !important;
        z-index: 999999 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-left: 0 !important;
        right: auto !important;
        padding-bottom: 80px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
    }

    /* Default / Closed state: HIDE IT COMPLETELY so it doesn't block clicks */
    .nav-container.for-mobile,
    .nav-container.hide-d.for-mobile {
        width: 250px !important;
        max-width: 80% !important;
        height: 100vh !important;
        overflow-y: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: translateX(-110%) !important;
        /* Move off-screen */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        /* Key fix: Allow clicks to pass through */
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease !important;
    }

    /* Custom scrollbar styling for mobile menu */
    .nav-container.for-mobile::-webkit-scrollbar {
        width: 8px;
    }

    .nav-container.for-mobile::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
    }

    .nav-container.for-mobile::-webkit-scrollbar-thumb {
        background: rgba(241, 196, 15, 0.5);
        /* Yellow scrollbar */
        border-radius: 4px;
    }

    .nav-container.for-mobile::-webkit-scrollbar-thumb:hover {
        background: rgba(241, 196, 15, 0.8);
    }

    /* --- FINAL MENU POLISH (Sticky, Hidden, Clean-up) --- */

    /* 1. Reset Header Transform to allow Fixed Positioning of Children */
    .header {
        transform: none !important;
    }

    /* Only apply transform when menu is OPEN (pushed state) */
    html.shownav .header {
        transform: translateX(250px) !important;
    }

    /* 2. Hide Menu Button when Open */
    html.shownav .mobile-nav,
    html.shownav .menu_header {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 3. Sticky Menu Button */
    .mobile-nav,
    .menu_header {
        position: fixed !important;
        top: 0px !important;
        left: 0px !important;
        z-index: 99999 !important;

        /* Green Dot Side Effect Removal */
        box-shadow: none !important;
        border: none !important;
    }

    /* 4. Green Dot Eliminator (Refined) 
       Removed height/width restrictions to prevent layout collapse.
       Just hiding visual artifacts. 
    */
    .topnav.clearfix>.wrap.clearfix {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* FIX: Force Clickability for Top Right Links (My Account) */
    .header .top-right,
    .header .mi.rad,
    .header .mi.rad a {
        position: relative !important;
        z-index: 100000 !important;
        pointer-events: auto !important;
    }

    /* Backup: Clean up other wrappers just in case */
    .top.wrap.clearfix {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* --- FIX: Mobile Menu Widget Styling (Match Reference Image 2) --- */

    /* 0. Force Widget Visibility */
    .mobileTarget .widget,
    .mobileTarget .widget_nav_menu,
    .mobileTarget .mobile-menu-widget-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Show widget title (Main Menu) */
    .mobileTarget .widget-title,
    .mobileTarget .widget h2 {
        display: block !important;
        color: #999 !important;
        font-size: 16px !important;
        text-align: center !important;
        font-weight: normal !important;
        margin: 0 0 15px 0 !important;
        padding: 10px 0 !important;
        text-transform: none !important;
    }

    /* Prevent upward jump - add proper spacing */
    .mobileTarget {
        padding-top: 10px !important;
        max-height: none !important;
        /* Allow full height */
        overflow: visible !important;
        /* Don't clip content */
    }

    .mobileTarget>.widget:first-child,
    .mobileTarget>ul:first-child {
        margin-top: 0 !important;
    }

    /* Hide WordPress default menu arrows (>) from menu text */
    .mobileTarget .widget ul li a,
    .mobileTarget ul.menu li a,
    .mobileTarget ul.navigation li a {
        /* Remove any > characters WordPress adds */
    }

    .mobileTarget li a::before {
        content: none !important;
    }

    /* 1. Reset List Styles for Widget & Handheld Menu */
    .mobileTarget .widget ul,
    .mobileTarget .widget_nav_menu ul,
    .mobileTarget ul.menu,
    .mobileTarget ul.navigation,
    .mobileTarget .handheld-menu {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
    }

    .mobileTarget .widget ul li,
    .mobileTarget .widget_nav_menu ul li,
    .mobileTarget ul.menu li,
    .mobileTarget ul.navigation li,
    .mobileTarget .handheld-menu li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px dotted #555 !important;
        text-align: left !important;
        /* LEFT ALIGN */
        position: relative !important;
    }

    /* Remove dots/bullets */
    .mobileTarget .widget ul li:before,
    .mobileTarget .handheld-menu li:before {
        content: none !important;
        display: none !important;
    }

    /* 2. Link Styling (White, Uppercase, Bold) */
    .mobileTarget .widget ul li a,
    .mobileTarget .widget_nav_menu ul li a,
    .mobileTarget ul.menu li a,
    .mobileTarget ul.navigation li a,
    .mobileTarget .handheld-menu li a {
        padding: 12px 15px !important;
        /* More left padding */
        color: #ffffff !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        font-family: Arial, sans-serif !important;
        background: transparent !important;
        text-align: left !important;
        /* LEFT ALIGN LINKS */
        display: block !important;
        /* Default display */
    }

    .mobileTarget .widget ul li a:hover,
    .mobileTarget .handheld-menu li a:hover {
        color: #f1c40f !important;
        /* Yellow Hover */
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* 3. Headers (Main Menu) - Make Visible */
    .nav-container.for-mobile h4 {
        color: #999 !important;
        text-transform: none !important;
        font-size: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        font-weight: normal !important;
        border: none !important;
        display: block !important;
        visibility: visible !important;
        padding: 15px 10px 10px 10px !important;
    }

    /* 4. Close Button (Yellow X) */
    .nav-container.for-mobile .m-close {
        display: block !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .nav-container.for-mobile .m-close i {
        color: #f1c40f !important;
        font-size: 24px !important;
    }

    /* 5. Submenu Styling */
    .mobileTarget .widget ul.sub-menu,
    .mobileTarget ul.menu ul.sub-menu,
    .mobileTarget ul.navigation ul.sub-menu {
        display: none !important;
        /* Hidden by default */
        background: rgba(0, 0, 0, 0.3) !important;
        padding-left: 0 !important;
    }

    .mobileTarget .widget ul.sub-menu.open,
    .mobileTarget ul.menu ul.sub-menu.open,
    .mobileTarget ul.navigation ul.sub-menu.open {
        display: block !important;
        height: auto !important;
        /* Force height to override transition 0px */
    }

    /* Fix for mobile menu scrolling - Override specific shownav rule */
    .nav-container.hide-d.for-mobile,
    .shownav .nav-container.hide-d.for-mobile {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        top: 0 !important;
        left: 0 !important;
        /* Ensure it sticks to left */
        padding-bottom: 80px !important;
        /* Extra padding for bottom content */
        transform: none !important;
        /* Prevent transform from breaking fixed pos if needed, or handle in open state */
    }

    /* When open, ensure it stays fixed and 100vh */
    .shownav .nav-container.hide-d.for-mobile {
        transform: translateX(-250px) !important;
        /* Keep the original transform if that's how it slides */
    }

    /* Fix for arrow alignment and jumping */
    .navigation li.hasSub>a::after {
        content: "›" !important;
        position: absolute !important;
        right: 15px !important;
        /* Move to right side for better standard look */
        left: auto !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        transition: transform 0.3s ease !important;
        display: inline-block;
        font-family: inherit;
        /* Ensure font consistency */
        font-size: 20px;
        line-height: 1;
        width: auto !important;
        height: auto !important;
    }

    /* Rotation when the menu is open */
    .navigation li.hasSub.open>a::after {
        transform: translateY(-50%) rotate(90deg) !important;
    }

    /* Highlight Active/Current Menu Items */
    .mobileTarget li.current-menu-item>a,
    .mobileTarget .widget ul li.current-menu-item>a,
    .mobileTarget ul.menu li.current-menu-item>a,
    .mobileTarget ul.navigation li.current-menu-item>a {
        color: #f1c40f !important;
    }

    /* FIX: Term Description Alignment (Desktop) */
    @media (min-width: 960px) {
        .term-description {
            display: block !important;
            text-align: left !important;
            width: 100% !important;
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
    }

    .mobileTarget .widget ul.sub-menu li,
    .mobileTarget ul.menu ul.sub-menu li,
    .mobileTarget ul.navigation ul.sub-menu li {
        background: rgba(0, 0, 0, 0.3) !important;
    }

    .mobileTarget .widget ul.sub-menu li a,
    .mobileTarget ul.menu ul.sub-menu li a,
    .mobileTarget ul.navigation ul.sub-menu li a {
        text-transform: none !important;
        /* Lowercase for submenu */
        padding-left: 30px !important;
        /* Indent submenu */
        font-size: 13px !important;
        font-weight: 400 !important;
        /* Normal weight */
    }

    /* 6. Parent Menu Item with Arrow (RIGHT SIDE) - ABSOLUTE POSITIONING */
    .mobileTarget li.menu-item-has-children>a,
    .mobileTarget .widget ul li.menu-item-has-children>a,
    .mobileTarget ul.menu li.menu-item-has-children>a,
    .mobileTarget ul.navigation li.menu-item-has-children>a {
        position: relative !important;
        padding-right: 35px !important;
    }

    .mobileTarget li.menu-item-has-children>a::after,
    .mobileTarget .widget ul li.menu-item-has-children>a::after,
    .mobileTarget ul.menu li.menu-item-has-children>a::after,
    .mobileTarget ul.navigation li.menu-item-has-children>a::after {
        content: "›" !important;
        font-family: Arial, sans-serif !important;
        font-size: 20px !important;
        line-height: 1 !important;
        color: #f1c40f !important;
        font-weight: bold !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: transform 0.3s ease !important;
        font-weight: bold !important;
    }

    .mobileTarget li.menu-item-has-children.open>a::after,
    .mobileTarget .widget ul li.menu-item-has-children.open>a::after,
    .mobileTarget ul.menu li.menu-item-has-children.open>a::after,
    .mobileTarget ul.navigation li.menu-item-has-children.open>a::after {
        transform: translateY(-50%) rotate(90deg) !important;
    }

}

/* End @media (max-width: 959px) */