/**
 * Xe Tải VP - Sidebar & Widget Styling
 * Từng Widget là 1 thẻ Card riêng biệt, sang trọng và chuẩn thương hiệu THACO.
 */

/* ==========================================================================
   1. RESET KHUNG BAO NGOÀI (TRANSPARENT CONTAINER)
   ========================================================================== */
#secondary,
.post-sidebar,
.widget-area,
.sidebar-inner,
#secondary .sidebar-inner,
#shop-sidebar .sidebar-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ẩn các thanh gạch ngang xám thừa của Flatsome / Gutenberg */
.sidebar-inner .is-divider,
.sidebar-inner hr,
#secondary .is-divider,
#secondary hr,
#shop-sidebar .is-divider,
#shop-sidebar hr {
    display: none !important;
}

/* ==========================================================================
   2. TỪNG WIDGET LÀ 1 THẺ CARD RIÊNG BIỆT (INDIVIDUAL CARD BOX)
   ========================================================================== */
.sidebar-inner > .widget,
.sidebar-inner > .wp-block-group,
.sidebar-inner > .wp-block-search,
.sidebar-inner > aside,
#secondary .widget,
#secondary .wp-block-group,
#secondary .wp-block-search,
#shop-sidebar .widget,
#shop-sidebar .wp-block-group,
#shop-sidebar .wp-block-search {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 22px 20px !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(0, 72, 143, 0.09) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-sizing: border-box !important;
}

.sidebar-inner > .widget:hover,
.sidebar-inner > .wp-block-group:hover,
.sidebar-inner > .wp-block-search:hover,
#secondary .widget:hover,
#secondary .wp-block-group:hover,
#secondary .wp-block-search:hover,
#shop-sidebar .widget:hover,
#shop-sidebar .wp-block-group:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 26px rgba(0, 72, 143, 0.1), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 72, 143, 0.22) !important;
}

/* Triệt tiêu các block lồng nhau bên trong */
.sidebar-inner .wp-block-group .wp-block-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   3. TIÊU ĐỀ WIDGET (WIDGET TITLES)
   ========================================================================== */
.sidebar-inner .widget-title,
.sidebar-inner .wp-block-heading,
.sidebar-inner h2,
.sidebar-inner h3,
#secondary .widget-title,
#secondary .wp-block-heading,
#secondary h2,
#secondary h3,
#shop-sidebar .widget-title,
#shop-sidebar .wp-block-heading,
#shop-sidebar h2 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #00254D !important;
    text-transform: uppercase !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eef2f6 !important;
    position: relative !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Vạch gạch chân Đỏ THACO duy nhất */
.sidebar-inner .widget-title::after,
.sidebar-inner .wp-block-heading::after,
.sidebar-inner h2::after,
#secondary .widget-title::after,
#secondary .wp-block-heading::after,
#secondary h2::after,
#shop-sidebar .widget-title::after,
#shop-sidebar .wp-block-heading::after,
#shop-sidebar h2::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 42px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #D32F2F 0%, #B71C1C 100%) !important;
    border-radius: 3px !important;
}

/* ==========================================================================
   4. Ô TÌM KIẾM (SEARCH WIDGETS - GUTENBERG & FLATSOME / WOOCOMMERCE)
   ========================================================================== */

/* A. Flatsome / WooCommerce Product Search Form */
.sidebar-inner form.searchform,
#secondary form.searchform,
#shop-sidebar form.searchform {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    width: 100% !important;
}

.sidebar-inner form.searchform .flex-row,
#secondary form.searchform .flex-row,
#shop-sidebar form.searchform .flex-row {
    display: flex !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ed !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.sidebar-inner form.searchform .flex-row:focus-within,
#secondary form.searchform .flex-row:focus-within,
#shop-sidebar form.searchform .flex-row:focus-within {
    border-color: #00488F !important;
    box-shadow: 0 0 0 3px rgba(0, 72, 143, 0.12) !important;
}

.sidebar-inner form.searchform .flex-col.flex-grow,
#secondary form.searchform .flex-col.flex-grow,
#shop-sidebar form.searchform .flex-col.flex-grow {
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-inner form.searchform input.search-field,
.sidebar-inner form.searchform input[type="search"],
#secondary form.searchform input.search-field,
#secondary form.searchform input[type="search"],
#shop-sidebar form.searchform input.search-field,
#shop-sidebar form.searchform input[type="search"] {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: none !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    cursor: text !important;
}

.sidebar-inner form.searchform .flex-col:not(.flex-grow),
#secondary form.searchform .flex-col:not(.flex-grow),
#shop-sidebar form.searchform .flex-col:not(.flex-grow) {
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-inner form.searchform button.ux-search-submit,
.sidebar-inner form.searchform button[type="submit"],
#secondary form.searchform button.ux-search-submit,
#shop-sidebar form.searchform button.ux-search-submit {
    height: 42px !important;
    min-width: 44px !important;
    background: #00488F !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background 0.22s ease !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.sidebar-inner form.searchform button.ux-search-submit:hover,
#secondary form.searchform button.ux-search-submit:hover,
#shop-sidebar form.searchform button.ux-search-submit:hover {
    background: #D32F2F !important;
}

/* B. Gutenberg Search Form */
.wp-block-search .wp-block-search__label {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #00254D !important;
    text-transform: uppercase !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eef2f6 !important;
    position: relative !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    line-height: 1.3 !important;
}

.wp-block-search .wp-block-search__label::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 42px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #D32F2F 0%, #B71C1C 100%) !important;
    border-radius: 3px !important;
}

.wp-block-search .wp-block-search__inside-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ed !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.wp-block-search .wp-block-search__inside-wrapper:focus-within {
    border-color: #00488F !important;
    box-shadow: 0 0 0 3px rgba(0, 72, 143, 0.12) !important;
}

.wp-block-search .wp-block-search__input {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: none !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

.wp-block-search .wp-block-search__button {
    flex: 0 0 auto !important;
    height: 42px !important;
    background: #00488F !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.22s ease !important;
    line-height: 42px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wp-block-search .wp-block-search__button:hover {
    background: #D32F2F !important;
}

/* ==========================================================================
   5. DANH SÁCH BÀI VIẾT MỚI (LATEST POSTS / RECENT POSTS)
   ========================================================================== */
.sidebar-inner .wp-block-latest-posts,
.sidebar-inner .widget_recent_entries ul,
.sidebar-inner .flatsome_recent_posts ul,
#secondary .wp-block-latest-posts,
#secondary .widget_recent_entries ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-inner .wp-block-latest-posts li,
.sidebar-inner .widget_recent_entries ul li,
.sidebar-inner .flatsome_recent_posts ul li,
#secondary .wp-block-latest-posts li,
#secondary .widget_recent_entries ul li {
    position: relative !important;
    padding: 10px 0 10px 18px !important;
    margin: 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
    transition: all 0.25s ease !important;
}

.sidebar-inner .wp-block-latest-posts li:last-child,
.sidebar-inner .widget_recent_entries ul li:last-child,
#secondary .wp-block-latest-posts li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.sidebar-inner .wp-block-latest-posts li:first-child,
.sidebar-inner .widget_recent_entries ul li:first-child,
#secondary .wp-block-latest-posts li:first-child {
    padding-top: 0 !important;
}

/* Mũi tên trước bài viết */
.sidebar-inner .wp-block-latest-posts li::before,
.sidebar-inner .widget_recent_entries ul li::before,
#secondary .wp-block-latest-posts li::before {
    content: "›" !important;
    position: absolute !important;
    left: 2px !important;
    top: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #00488F !important;
    line-height: 1 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.sidebar-inner .wp-block-latest-posts li:first-child::before,
.sidebar-inner .widget_recent_entries ul li:first-child::before,
#secondary .wp-block-latest-posts li:first-child::before {
    top: -2px !important;
}

.sidebar-inner .wp-block-latest-posts li:hover,
.sidebar-inner .widget_recent_entries ul li:hover,
#secondary .wp-block-latest-posts li:hover {
    padding-left: 22px !important;
}

.sidebar-inner .wp-block-latest-posts li:hover::before,
.sidebar-inner .widget_recent_entries ul li:hover::before,
#secondary .wp-block-latest-posts li:hover::before {
    transform: translateX(3px) !important;
    color: #D32F2F !important;
}

.sidebar-inner .wp-block-latest-posts li a,
.sidebar-inner .widget_recent_entries ul li a,
#secondary .wp-block-latest-posts li a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: block !important;
}

.sidebar-inner .wp-block-latest-posts li:hover a,
.sidebar-inner .widget_recent_entries ul li:hover a,
#secondary .wp-block-latest-posts li:hover a {
    color: #D32F2F !important;
}

/* ==========================================================================
   6. DANH SÁCH SẢN PHẨM (WOOCOMMERCE PRODUCT LIST WIDGET)
   ========================================================================== */
.sidebar-inner .widget_products ul,
.sidebar-inner .product_list_widget,
#secondary .widget_products ul,
#secondary .product_list_widget,
#shop-sidebar .widget_products ul,
#shop-sidebar .product_list_widget {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-inner .widget_products ul li,
.sidebar-inner .product_list_widget li,
#secondary .widget_products ul li,
#secondary .product_list_widget li,
#shop-sidebar .widget_products ul li,
#shop-sidebar .product_list_widget li {
    position: relative !important;
    min-height: 65px !important;
    padding: 12px 0 12px 75px !important;
    margin: 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
    transition: padding-left 0.25s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
}

.sidebar-inner .widget_products ul li:last-child,
.sidebar-inner .product_list_widget li:last-child,
#secondary .product_list_widget li:last-child,
#shop-sidebar .product_list_widget li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.sidebar-inner .widget_products ul li:first-child,
.sidebar-inner .product_list_widget li:first-child,
#secondary .product_list_widget li:first-child,
#shop-sidebar .product_list_widget li:first-child {
    padding-top: 0 !important;
}

.sidebar-inner .widget_products ul li:hover,
.sidebar-inner .product_list_widget li:hover,
#secondary .product_list_widget li:hover,
#shop-sidebar .product_list_widget li:hover {
    padding-left: 80px !important;
}

/* Ảnh sản phẩm thumbnail tuyệt đối bên trái */
.sidebar-inner .product_list_widget li a.image-link,
.sidebar-inner .product_list_widget li img,
#secondary .product_list_widget li a.image-link,
#secondary .product_list_widget li img,
#shop-sidebar .product_list_widget li img {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 72, 143, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.25s ease, border-color 0.25s ease !important;
    margin: 0 !important;
    display: block !important;
}

.sidebar-inner .product_list_widget li:first-child img,
#secondary .product_list_widget li:first-child img,
#shop-sidebar .product_list_widget li:first-child img {
    top: 0 !important;
}

.sidebar-inner .product_list_widget li:hover img,
#secondary .product_list_widget li:hover img,
#shop-sidebar .product_list_widget li:hover img {
    transform: scale(1.06) !important;
    border-color: rgba(0, 72, 143, 0.35) !important;
}

/* Tên sản phẩm */
.sidebar-inner .product_list_widget li .product-title,
.sidebar-inner .product_list_widget li a:not(.image-link),
#secondary .product_list_widget li .product-title,
#secondary .product_list_widget li a:not(.image-link),
#shop-sidebar .product_list_widget li .product-title,
#shop-sidebar .product_list_widget li a:not(.image-link) {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #00254D !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: block !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.sidebar-inner .product_list_widget li:hover .product-title,
.sidebar-inner .product_list_widget li:hover a:not(.image-link),
#secondary .product_list_widget li:hover .product-title,
#shop-sidebar .product_list_widget li:hover .product-title {
    color: #D32F2F !important;
}

/* Giá sản phẩm */
.sidebar-inner .product_list_widget li .amount,
#secondary .product_list_widget li .amount,
#shop-sidebar .product_list_widget li .amount {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #D32F2F !important;
}

/* ==========================================================================
   7. DANH MỤC SẢN PHẨM & DANH MỤC TIN TỨC (PRODUCT CATEGORIES & CATEGORIES)
   ========================================================================== */
.sidebar-inner .product-categories,
.sidebar-inner .widget_product_categories ul,
.sidebar-inner .wp-block-categories,
.sidebar-inner .wp-block-archives,
.sidebar-inner .widget_categories ul,
.sidebar-inner .widget_archive ul,
#shop-sidebar .product-categories,
#shop-sidebar .widget_product_categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar-inner .product-categories li,
.sidebar-inner .widget_product_categories ul li,
.sidebar-inner .wp-block-categories li,
.sidebar-inner .wp-block-archives li,
.sidebar-inner .widget_categories ul li,
.sidebar-inner .widget_archive ul li,
#shop-sidebar .product-categories li,
#shop-sidebar .widget_product_categories ul li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
    transition: all 0.2s ease !important;
}

.sidebar-inner .product-categories li:last-child,
.sidebar-inner .widget_product_categories ul li:last-child,
.sidebar-inner .wp-block-categories li:last-child,
.sidebar-inner .wp-block-archives li:last-child,
.sidebar-inner .widget_categories ul li:last-child,
#shop-sidebar .product-categories li:last-child,
#shop-sidebar .widget_product_categories ul li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.sidebar-inner .product-categories li:first-child,
.sidebar-inner .widget_product_categories ul li:first-child,
.sidebar-inner .wp-block-categories li:first-child,
#shop-sidebar .product-categories li:first-child,
#shop-sidebar .widget_product_categories ul li:first-child {
    padding-top: 0 !important;
}

.sidebar-inner .product-categories li a,
.sidebar-inner .widget_product_categories ul li a,
.sidebar-inner .wp-block-categories li a,
.sidebar-inner .wp-block-archives li a,
.sidebar-inner .widget_categories ul li a,
#shop-sidebar .product-categories li a,
#shop-sidebar .widget_product_categories ul li a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: color 0.2s, transform 0.2s !important;
}

.sidebar-inner .product-categories li:hover > a,
.sidebar-inner .widget_product_categories ul li:hover > a,
.sidebar-inner .wp-block-categories li:hover a,
.sidebar-inner .widget_categories ul li:hover a,
#shop-sidebar .product-categories li:hover > a,
#shop-sidebar .widget_product_categories ul li:hover > a {
    color: #D32F2F !important;
    transform: translateX(4px) !important;
}

/* Count badge */
.sidebar-inner .product-categories li .count,
.sidebar-inner .widget_product_categories li .count,
#shop-sidebar .product-categories li .count {
    background: rgba(0, 72, 143, 0.08) !important;
    color: #00488F !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.sidebar-inner .product-categories li:hover > .count,
.sidebar-inner .widget_product_categories li:hover > .count,
#shop-sidebar .product-categories li:hover > .count {
    background: #D32F2F !important;
    color: #ffffff !important;
}