/*
Theme Name: Caydaimoc
Theme URI: http://example.com/caydaimoc
Author: AI Assistant
Author URI: http://example.com
Description: Giao diện chuẩn SEO cho web bĂ¡n hĂ ng Caydaimoc, tĂ­ch hợp WooCommerce vĂ  Rank Math SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caydaimoc
Tags: e-commerce, seo-friendly, custom-background
*/

:root {
    --primary-color: #154031;
    /* Dark green */
    --accent-color: #FF9E03;
    /* Gold/yellow */
    --danger-color: #AF0B0B;
    /* Red */
    --text-color: #000;
    --border-color: #e5e7eb;
    --bg-light: #f9fafb;
    --container-max-width: 1230px;
    --container-padding: 25px;
}

/* ═══ Local Fonts: Helvetica Neue ═══ */
@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-bold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-bold-italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-light-italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-ultra-light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-ultra-light-italic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-condensed-bold.ttf') format('truetype');
    font-weight: 500;
    font-stretch: condensed;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('font/helvetica-neue-condensed-black.ttf') format('truetype');
    font-weight: 900;
    font-stretch: condensed;
    font-display: swap;
}

body {
    font-family: 'HelveticaNeue', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.2;
    margin: 0;
    padding: 0;
    background-color: #d9d9d9;
    -webkit-font-smoothing: antialiased;
    font-size: 17px;
}

.background_nen {
    background-color: #fff;
    display: flex;
}

/* Global Container (Chuẩn SEO & Layout) */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}

/* Utility Classes */
.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.text-center {
    text-align: center;
}

/* Image Setup */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Base Link */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

/* WooCommerce Overrides */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 20px 0;
    list-style: none;
    display: flex;
    border-bottom: 2px solid var(--border-color);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background: transparent;
    margin: 0 20px 0 0;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-weight: bold;
    color: var(--text-color);
    padding: 10px 0;
    display: block;
    text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--primary-color);
    border-bottom: 3px solid var(--accent-color);
}

.woocommerce div.product form.cart .button {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}

/* =========================================
   HEADER _hcdm
   ========================================= */

/* Wrapper: giới hạn toàn bộ header trong 1230px, căn giữa */
.header_hcdm {
    max-width: 1230px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

.top_bar_hcdm {
    background-color: #163329;
    background-image: url('assets/images/nen_top_1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10px 0;
    text-align: center;
}

.top_link_hcdm {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.top_link_hcdm i {
    color: #FF9E03;
}

.top_link_hcdm:hover {
    color: #FF9E03;
}

/* Container */
.container_hcdm {
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 25px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

/* Main Header (Row 2: white bg, logo + search + phone) */
.main_header_hcdm {
    background-color: #ffffff;
    padding: 0;
    padding-top: 3px;
}

.flex_header_hcdm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Nav Bar (Row 3: white bg, navigation menu) */
.nav_bar_hcdm {
    background-color: #ffffff;
    border-bottom: 1px solid #154031;
}

/* Logo */
.logo_hcdm img {
    max-height: 70px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.logo_hcdm a {
    display: inline-block;
}

.logo_hcdm .site-title-text {
    color: #ffffff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
}

/* Navigation (inside nav_bar_hcdm) */
.nav_hcdm {
    display: flex;
}

.nav_hcdm ul.nav-menu {
    list-style: none;
    display: flex;
    gap: 0;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav_hcdm ul.nav-menu>li {
    position: relative;
}

.nav_hcdm ul.nav-menu>li>a {
    color: #1a3c30;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 30px;
    white-space: nowrap;
    display: block;
    transition: color 0.2s;
}

.nav_hcdm ul.nav-menu>li>a:first-child {
    padding-left: 0;
}

.nav_hcdm ul.nav-menu>li:hover>a,
.nav_hcdm ul.nav-menu>li.current-menu-item>a,
.nav_hcdm ul.nav-menu>li.current-menu-ancestor>a {
    color: #FF9E03;
}

.nav_hcdm ul.nav-menu>li.current-menu-item>a,
.nav_hcdm ul.nav-menu>li.current-menu-ancestor>a {
    color: #FF9E03;
}

/* Dropdown sub-menu */
.nav_hcdm ul.nav-menu>li>ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 10px 0;
    list-style: none;
    margin: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.nav_hcdm ul.nav-menu>li:hover>ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav_hcdm ul.nav-menu li ul.sub-menu li a {
    display: block;
    padding: 9px 20px;
    color: #000;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s;
}

.nav_hcdm ul.nav-menu li ul.sub-menu li:last-child a {
    border-bottom: none;
}

.nav_hcdm ul.nav-menu li ul.sub-menu li a:hover {
    color: #163329;
    padding-left: 25px;
    background: #f8f8f8;
}

/* =========================================
   MEGA MENU STYLES
   ========================================= */
.nav_hcdm ul.nav-menu>li.has-mega-menu-parent {
    position: static !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    width: auto !important;
    left: 0 !important;
    transform: translateY(10px);
    padding: 25px 30px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.nav_hcdm ul.nav-menu>li:hover>ul.sub-menu.is-mega-menu {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li {
    flex: 1 !important;
    min-width: 250px !important;
    border-bottom: none !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>a {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--primary-color) !important;
    text-transform: capitalize !important;
    padding: 0 0 10px 0 !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid var(--primary-color) !important;
    background: transparent !important;
    display: block !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: auto !important;
    background: transparent !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li {
    list-style: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li>a {
    display: block !important;
    padding: 10px 0 10px 0 !important;
    font-size: 17px !important;
    color: #000 !important;
    font-weight: 400 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    transition: color 0.2s, padding-left 0.2s !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li:last-child>a {
    border-bottom: 1px solid #e5e5e5 !important;
}

.nav_hcdm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li>a:hover {
    color: var(--primary-color) !important;
    padding-left: 5px !important;
}

.mega-text-danger {
    color: var(--danger-color) !important;
}

/* Search Box */
.search_box_hcdm {
    position: relative;
    flex: 1;
    max-width: 615px;
    flex-shrink: 0;
}

.search_box_hcdm form {
    display: flex;
    align-items: center;
    background: #f1f2f3;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    padding: 0 5px 0 0;
}

.search_box_hcdm input[type="search"] {
    width: 100%;
    padding: 13px 10px 13px 40px;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    color: #000;
}

.search_icon_hcdm {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
}

.search_box_hcdm button[type="submit"] {
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
}

/* Phone / Zalo Button */
.btn_zalo_hcdm {
    background-color: #163329;
    color: #ffffff;
    padding: 11px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Inter', Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.25s;
}

.btn_zalo_hcdm:hover {
    background-color: #0f2419;
    color: #ffffff;
}

/* Responsive Header */
@media (max-width: 1100px) {
    .nav_bar_hcdm {
        display: none;
    }

    .search_box_hcdm {
        display: none;
    }
}

/* =========================================
   PRODUCT CARD GRID
   ========================================= */
ul.products {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

ul.products li.product {
    flex: 0 0 calc(25% - 15px);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s ease;
}

ul.products li.product:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

ul.products li.product a img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

ul.products li.product:hover a img {
    transform: scale(1.03);
}

ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: 600;
    padding: 12px 12px 5px;
    color: var(--primary-color);
}

ul.products li.product .price {
    padding: 0 12px 10px;
    font-size: 15px;
    font-weight: bold;
    color: var(--danger-color);
}

ul.products li.product .button {
    display: block;
    margin: 0 12px 12px;
    background: var(--accent-color);
    color: var(--primary-color) !important;
    padding: 8px;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
}

/* =========================================
   FLOATING CONTACT SIDEBAR
   ========================================= */
.floating-contact {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.floating-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #fff;
    font-size: 22px;
    border-radius: 6px 0 0 6px;
    transition: width 0.25s ease, background 0.2s;
    overflow: hidden;
    text-decoration: none;
}

.floating-contact a:hover {
    width: 62px;
}

.float-phone {
    background: var(--danger-color);
}

.float-zalo {
    background: #0068ff;
}

.float-map {
    background: var(--primary-color);
}

/* =========================================
   SECTION TITLE
   ========================================= */
.section-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    text-transform: uppercase;
}

/* =========================================
   MARGIN UTILITIES
   ========================================= */
.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    ul.products li.product {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .header-center {
        display: none !important;
    }

    ul.products li.product {
        flex: 0 0 calc(50% - 10px);
    }

    .d-flex {
        flex-wrap: wrap;
    }

    .floating-contact {
        top: auto;
        bottom: 10px;
        transform: none;
        flex-direction: row;
        right: 10px;
    }

    .floating-contact a {
        border-radius: 50%;
        width: 44px;
        height: 44px;
    }

    .floating-contact a:hover {
        width: 44px;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        flex: 0 0 100%;
    }
}

/* =========================================
   PRODUCT DETAIL PAGE — Main Layout
   ========================================= */
.cdm-product-wrap {
    display: flex;
    gap: 30px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.cdm-gallery {
    flex: 1.2;
    position: relative;
    min-width: 0;
}

.cdm-summary {
    flex: 1;
    min-width: 0;
}

/* Badge nhĂ£n đặc biệt */
.cdm-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--danger-color);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    z-index: 5;
    letter-spacing: 0.5px;
}

/* TiĂªu đề sản phẩm */
.cdm-product-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 1.4;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    padding-bottom: 15px;
}

/* MĂ´ tả nổi bật nền vĂ ng */
.cdm-highlight-box {
    background: #fffae6;
    border: 1px dashed var(--accent-color);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

/* ── Header khu vá»±c BĂ¡o giĂ¡ / Kho ── */
.cdm-kho-header {
    background: var(--primary-color);
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Tab Kho ── */
.cdm-kho-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--border-color);
}

.cdm-kho-tab {
    background: #f3f3f3;
    border: 1px solid var(--border-color);
    border-bottom: none;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-color);
    transition: background 0.2s, color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cdm-kho-tab.active,
.cdm-kho-tab:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.cdm-kho-panel {
    display: none;
}

.cdm-kho-panel.active {
    display: block;
}

/* ── Bảng biến thể ── */
.cdm-variations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cdm-variations-table thead {
    background: var(--bg-light);
}

.cdm-variations-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
    font-size: 12px;
    text-transform: uppercase;
}

.cdm-variations-table td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.cdm-var-image img {
    border-radius: 4px;
    object-fit: cover;
}

.cdm-var-name {
    display: block;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.cdm-var-attrs {
    display: inline-block;
    background: #e8f5e9;
    color: var(--primary-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 500;
}

.cdm-var-price {
    margin-top: 4px;
    font-weight: 500;
    color: var(--danger-color);
}

/* Trạng thĂ¡i tồn kho */
.cdm-stock-badge {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cdm-stock-badge.in-stock {
    color: #1a7f37;
}

.cdm-stock-badge.out-of-stock {
    color: #888;
}

/* NĂºt actions trong bảng */
.cdm-btn-baogiai {
    display: block;
    text-align: center;
    padding: 6px 10px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.cdm-btn-baogiai:hover {
    background: var(--primary-color);
    color: #fff;
}

.cdm-btn-addcart {
    width: 100%;
    padding: 6px 10px;
    background: var(--accent-color);
    color: var(--primary-color) !important;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.cdm-btn-addcart:hover {
    opacity: 0.85;
}

.cdm-var-note {
    margin: 10px 0 0;
    color: #888;
    font-size: 12px;
}

/* ── NĂºt CTA bổ sung ── */
.cdm-extra-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.cdm-btn-call {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--danger-color);
    color: #fff !important;
    padding: 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

.cdm-btn-zalo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0068ff;
    color: #fff !important;
    padding: 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}

/* Khung hotline */
.cdm-hotline-box {
    display: flex;
    gap: 20px;
    background: var(--primary-color);
    color: #fff;
    padding: 14px 16px;
    border-radius: 4px;
    margin-top: 16px;
    font-size: 13px;
}

.cdm-hotline-item a {
    color: var(--accent-color);
    font-weight: 500;
}

/* ──/* ── Tabs section dưới ── */
/* (Styles moved to the new layout block below around line 1751) */

/* ── Related products ── */
.cdm-related {
    margin-bottom: 50px;
}

.cdm-section-heading {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
    border-left: 5px solid var(--accent-color);
    padding-left: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* =========================================
   REVIEWS LAYOUT
   ========================================= */
.cdm-reviews-wrapper {
    padding: 20px 0;
}

.cdm-rating-summary {
    display: flex;
    align-items: center;
    gap: 30px;
    background: var(--bg-light);
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.cdm-score-big {
    font-size: 52px;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 1;
}

.cdm-stars-display {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}

.cdm-rating-bars {
    flex: 1;
}

.cdm-rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 13px;
}

.cdm-bar-label {
    width: 38px;
    text-align: right;
    color: #555;
    font-weight: 600;
}

.cdm-bar-track {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.cdm-bar-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.cdm-bar-count {
    width: 22px;
    color: #888;
    font-size: 12px;
}

/* Danh sĂ¡ch review */
.cdm-review-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 0;
}

.cdm-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.cdm-reviewer-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cdm-reviewer-info img {
    border-radius: 50%;
    display: inline-block;
}

.cdm-review-date {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.cdm-review-stars {
    display: flex;
    gap: 2px;
}

.cdm-review-body {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

.cdm-load-more-wrap {
    text-align: center;
    padding: 20px 0;
}

.cdm-load-more-btn {
    background: var(--accent-color);
    color: var(--primary-color);
    border: none;
    padding: 12px 40px;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Ä‘Ă¡nh giĂ¡ */
.cdm-review-form-wrap {
    background: var(--bg-light);
    border-radius: 6px;
    padding: 24px;
    margin-top: 20px;
}

.cdm-form-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--primary-color);
    margin: 0 0 16px;
}

.cdm-review-form-wrap input[type="text"],
.cdm-review-form-wrap input[type="email"],
.cdm-review-form-wrap textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 14px;
    margin-top: 4px;
    box-sizing: border-box;
}

.cdm-submit-review {
    background: var(--primary-color) !important;
    color: #fff !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
}

/* =========================================
   RESPONSIVE — Product Detail
   ========================================= */
@media (max-width: 900px) {
    .cdm-product-wrap {
        flex-direction: column;
    }

    .cdm-gallery,
    .cdm-summary {
        flex: unset;
        width: 100%;
    }

    .cdm-rating-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .cdm-hotline-box {
        flex-direction: column;
        gap: 8px;
    }

    .cdm-variations-table thead {
        display: none;
    }

    .cdm-variations-table td {
        display: block;
        border-bottom: none;
    }

    .cdm-variations-table tr {
        border-bottom: 1px solid #eee;
    }
}

/* ══════════════════════════════════════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   PRODUCT DETAIL — New Layout (Gallery + Info Two Column)
════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* Breadcrumb */
.cdm-breadcrumb {
    font-size: 13px;
    color: #888;
    padding: 6px 0 14px;
}

.cdm-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.cdm-breadcrumb a:hover {
    text-decoration: underline;
}

/* ── 2-Column Wrapper ── */
.cdm-product-top {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 40px;
}

/* ════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   GALLERY COLUMN  (left ~46%)
══╕═══════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.cdm-gallery-col {
    flex: 0 0 600px;
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* Container bao quanh cdm-thumb-strip và 2 nút tròn */
.cdm-thumb-wrap {
    flex: 0 0 140px;
    width: 140px;
    position: relative;
    /* nút tròn absolute sẽ căn theo đây */
}

/* Nút tròn ▲ ▼ — position absolute trong cdm-thumb-wrap */
.cdm-tnav-up,
.cdm-tnav-down {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    cursor: pointer;
    color: #333 !important;
    transition: background 0.2s, transform 0.2s;
    padding: 0 !important;
    z-index: 5;
}

.cdm-tnav-up {
    top: 4px !important;
}

.cdm-tnav-down {
    bottom: 4px !important;
}

.cdm-tnav-up::before {
    content: "▲";
    font-size: 11px;
}

.cdm-tnav-down::before {
    content: "▼";
    font-size: 11px;
}

.cdm-tnav-up:hover,
.cdm-tnav-down:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    transform: scale(1.1);
}

.cdm-tnav-up:disabled,
.cdm-tnav-down:disabled {
    opacity: 0.3;
    cursor: default;
}


/* Thumbnail strip — vertical, left side */
.cdm-thumb-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 140px;
    overflow-y: scroll;
    /* scroll để JS scrollBy() hoạt động; scrollbar bị ẩn bởi CSS bên dưới */
    max-height: 600px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cdm-thumb-strip::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.cdm-thumb-btn {
    width: 140px;
    height: 196px;
    /* 3 ảnh × 196px + 2 gap × 6px = 600px (khớp ảnh lớn) */
    padding: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    background: none;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.cdm-thumb-btn:hover,
.cdm-thumb-btn.active {
    border-color: #154031;
}

.cdm-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Main image area */
.cdm-main-img-wrap {
    flex: 0 0 450px;
    width: 450px;
    height: 600px;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: #f5f5f5;
}

/* Ảnh lớn — fill 100% container, không cắt sai */
.cdm-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cdm-main-img-slide.cdm-hidden {
    display: none;
}

/* ── Dấu chấm (Dots) điều hướng ── */
.cdm-gallery-dots {
    width: 450px;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 960px) {
    .cdm-gallery-col {
        flex-direction: column !important;
    }

    .cdm-gallery-dots {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        order: 2;
    }

    .cdm-main-img-wrap {
        order: 1;
    }

    .cdm-thumb-wrap {
        order: 3;
    }
}

.cdm-gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d6d6d6;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cdm-gallery-dot.active,
.cdm-gallery-dot:hover {
    background: var(--primary-color);
    transform: scale(1.2);
    border-color: #fff;
}


/* Badge BẢO HĂ€NH — gold pill, top-right of image */
.cdm-guarantee-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #FF9E03;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    padding: 9px 14px;
    border-radius: 5px;
    z-index: 5;
    pointer-events: none;
    text-transform: uppercase;
}

/* XEM VIDEO button — red, lower-right of image */
.cdm-video-btn {
    position: absolute;
    /* Bên dưới badge BẢO HÀNH: badge top 12px, cao ~28px, + gap 6px = 46px */
    top: 55px;
    right: 12px;
    background: #AF0B0B;
    color: #fff !important;
    font-size: 14px;
    font-weight: 400;
    padding: 9px 27px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
    text-decoration: none;
}

.cdm-video-btn:hover {
    opacity: 0.88;
    color: #fff !important;
}

/* Counter "Ảnh 1/10" — bottom-left */
.cdm-img-counter {
    position: absolute;
    bottom: 12px;
    right: 0;
    background: #fff;
    color: #00000099;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 0;
    pointer-events: none;
    z-index: 5;
}

/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•â• â• â•â• â•â•â• â•â•â•â•â•â• â• 
   INFO COLUMN  (right ~54%)
â• â• â• â• â• â• â• â•â• â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.cdm-info-col {
    flex: 0 0 560px;
    width: 560px;
    min-width: 0;
}

/* H1 product title */
.cdm-product-title {
    font-size: 28px;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.cdm-italic-quote {
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: #000;
    text-align: justify;
    border-left: 5px solid #D4AF37;
    margin: 0 0 15px 0;
    padding: 15px 18px;
    background: #FF9E0326;
    border-radius: 0 10px 10px 0;
}

/* Checklist — 2 columns */
.cdm-checklist-wrap {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.cdm-checklist-col {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.cdm-checklist-col li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 17px;
    color: #154031;
    margin-bottom: 5px;
    line-height: 1.2;
}

.cdm-checklist-col li svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.cdm-checklist-col li img {
    width: 20px;
}

/* CTA Buttons */
.cdm-cta-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.cdm-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    transition: 1;
    white-space: nowrap;
    text-decoration: none;
}

.cdm-cta-wrap .cdm-cta svg {
    width: 24px;
    height: 24px;
}

.container_hcdm.background_nen .rank-math-breadcrumb {
    padding: 0;
}

.cdm-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.cdm-cta-red {
    background: #AF0B0B;
    color: #fff !important;
}

.cdm-cta-dark {
    background: #AF0B0B;
    color: #fff !important;
}

/* ── Cam Kết Block ── */
.cdm-camket-box {
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 10px;
    background: transparent;
}

/* Header: centered title with decorative lines on both sides */
.cdm-camket-header {
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* Line left */
.cdm-camket-header::before,
.cdm-camket-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d0d0d0;
}

.cdm-camket-header strong {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
    white-space: nowrap;
}

.cdm-camket-header strong span {
    color: #AF0B0B !important;
}

/* Slider nav buttons (kept for JS compat) */
.cdm-ck-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.cdm-ck-prev,
.cdm-ck-next {
    background: transparent;
    border: 1px solid #c8ddc8;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a7c59;
    transition: background 0.2s;
    flex-shrink: 0;
}

.cdm-ck-prev:hover,
.cdm-ck-next:hover {
    background: #eef8ee;
}

.cdm-ck-dots {
    display: flex;
    gap: 4px;
}

.cdm-ck-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8ddc8;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.cdm-ck-dot.active {
    background: var(--primary-color);
    transform: scale(1.3);
}

/* Slider rows — show only .active */
.cdm-ck-slider {
    position: relative;
}

.cdm-camket-row {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    color: #000;
}

.cdm-camket-row:first-child {
    border-top: none;
}

.cdm-camket-row.active {
    display: flex;
}

/* Icon shield circle */
.cdm-camket-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.cdm-camket-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cdm-camket-text strong {
    font-size: 16px;
    font-weight: 500;
    color: #154031;
    line-height: 1.2;
}

.cdm-camket-text small {
    font-size: 14px;
    color: #000;
    line-height: 1.2;
}

.cdm-camket-arrow {
    flex-shrink: 0;
    color: #bbb;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: background 0.15s, color 0.15s;
}

#cdm-bang-gia .bg-header svg {
    width: 28px;
    height: 28px;
}

.cdm-camket-arrow:hover {
    background: #154031;
    color: #fff;
}

/* ── Lead Capture Form ── */
.cdm-lead-form-box {
    background: var(--primary-color, #1a5c2a);
    border-radius: 10px;
    padding: 16px 18px;
    color: #fff;
}

.cdm-lead-intro {
    font-size: 17px;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.5;
}

.cdm-lead-row2 {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.cdm-lead-row1 {
    display: flex;
    gap: 8px;
}

.cdm-lead-form input[type="text"],
.cdm-lead-form input[type="tel"] {
    flex: 1;
    border: none;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    background: #fff;
    color: #333;
    outline: none;
}

.cdm-lead-form input[type="text"]:focus,
.cdm-lead-form input[type="tel"]:focus {
    box-shadow: 0 0 0 2px rgba(230, 184, 0, 0.5);
}

.cdm-lead-row1 input {
    flex: 1;
    border: none;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    background: #fff;
    color: #333;
    outline: none;
}

.cdm-lead-form button[type="submit"] {
    background: #e6b800;
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    padding: 10px 18px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

.cdm-lead-form button[type="submit"]:hover {
    opacity: 0.88;
}

/* ═════════════════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   BÁO GIÁ & KHO HÀNG Section
═════â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.cdm-banggia-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden;
}

.cdm-banggia-header {
    background: var(--primary-color);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Tab wrapper ---- */
.cdm-tabs-wrapper {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

/* --- Tab nav list --- */
.cdm-wc-tabs {
    display: flex !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #fff;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.cdm-wc-tabs::-webkit-scrollbar {
    display: none;
}

/* --- Each tab item --- */
.cdm-tab-item {
    flex-shrink: 0;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative;
}

.cdm-tab-item a {
    display: block;
    padding: 15px 15px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent;
    margin-bottom: 0;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    /* padding-left: 0 !important; */
}

.cdm-tab-item a:hover {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

/* Active tab — bold + bottom line (like mockup) */
.cdm-tab-item.active a,
.cdm-tab-item.description_tab.active a {
    color: var(--primary-color) !important;
    border-bottom-color: #AF0B0B !important;
}

/* --- Tab panel --- */
.cdm-tab-panel {
    display: none;
    padding: 10px 0px 0 0px;
}

.cdm-tab-panel.active {
    display: block;
}

.cdm-tab-content-inner {
    font-size: 17px;
    line-height: 1.5;
    color: #000000;
    max-width: 100%;
    margin: 0 auto;
    text-align: justify;
    padding: 0 40px;
}

.cdm-tab-content-inner.cdm-tab-collapsed {
    max-height: 780px;
    overflow: hidden;
    position: relative;
}

.cdm-tab-content-inner.cdm-tab-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
}

/* --- Read more button row --- */
.cdm-tab-read-more {
    text-align: center;
    padding: 18px 0 24px;
}

.cdm-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 20px;
    font-weight: 500;
    color: #AF0B0B;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.3px;
    transition: opacity 0.2s;
}

.cdm-read-more-btn:hover {
    opacity: 0.75;
}

.cdm-read-more-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cdm-read-more-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.cdm-section-heading {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 24px;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 12px;
}

.cdm-section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-color, #e6b800);
    border-radius: 2px;
}

/* ══════════════════════════════
   LIGHTBOX
══════════════════════════════ */
/* ══════════════════════════════════════════
   cdm-lightbox: ảnh lớn popup
══════════════════════════════════════════ */
.cdm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdm-lightbox[hidden] {
    display: none;
}

.cdm-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
}

/* White card popup */
.cdm-lightbox-content {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Close button — top-right corner of the card */
.cdm-lb-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #AF0B0B;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.cdm-lb-close:hover {
    background: #8a0a0a;
}

/* Inner: thumb column + image column */
.cdm-lb-inner {
    display: flex;
    flex-direction: row;
}

/* ── Thumbnail column ── */
.cdm-lb-thumbs {
    width: 115px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    flex-shrink: 0;
    background: #f5f5f5;
    max-height: 627px;
}

.cdm-lb-thumbs::-webkit-scrollbar {
    width: 3px;
}

.cdm-lb-thumbs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.cdm-lbt {
    width: 115px;
    height: 153px;
    flex-shrink: 0;
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    display: block;
    transition: border-color 0.15s;
}

.cdm-lbt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cdm-lbt.active {
    border-color: #AF0B0B;
}

.cdm-lbt:hover:not(.active) {
    border-color: #ccc;
}

.cdm-lbt-video-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
}

/* ── Image column ── */
.cdm-lb-img-col {
    display: flex;
    flex-direction: column;
}

/* Media wrap — fixed width to fill popup */
.cdm-lb-media-wrap {
    position: relative;
    width: 470px;
    height: 627px;
    overflow: hidden;
    background: #111;
    flex-shrink: 0;
}

.cdm-lb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cdm-lb-video-wrap {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #000;
}

.cdm-lb-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Badges: top-right inside image */
.cdm-lb-badges {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cdm-lb-badge-guarantee {
    background: #e6a817;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cdm-lb-badge-video {
    background: #AF0B0B;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: background 0.15s;
}

.cdm-lb-badge-video:hover {
    background: #8a0a0a;
    color: #fff;
}

/* Nav inside image */
.cdm-lb-prev,
.cdm-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.cdm-lb-prev:hover,
.cdm-lb-next:hover {
    background: rgba(0, 0, 0, 0.85);
}

.cdm-lb-prev {
    left: 10px;
}

.cdm-lb-next {
    right: 10px;
}

/* Counter — bottom left */
.cdm-lb-counter {
    position: absolute;
    bottom: 10px;
    left: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}

/* Caption bar below image */
.cdm-lb-caption {
    background: #f9f9f9;
    color: #444;
    font-size: 13px;
    text-align: center;
    padding: 8px 12px;
    margin: 0;
    border-top: 1px solid #eee;
    width: 470px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* CTA bar */
.cdm-lb-cta-bar {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 470px;
    box-sizing: border-box;
}

.cdm-lb-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
    text-decoration: none;
    background: #AF0B0B;
    border: none;
    cursor: pointer;
    transition: filter 0.15s;
}

.cdm-lb-cta:hover {
    filter: brightness(1.12);
    color: #fff;
}

.cdm-lb-cta-call {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.cdm-lb-cta-zalo {
    background: #AF0B0B;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .cdm-lb-inner {
        flex-direction: column;
    }

    .cdm-lb-thumbs {
        width: 100%;
        height: 80px;
        max-height: 80px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .cdm-lbt {
        width: 55px;
        height: 73px;
        flex-shrink: 0;
    }

    .cdm-lb-media-wrap {
        width: 100vw;
        height: 55vw;
    }

    .cdm-lb-img {
        object-fit: contain;
    }

    .cdm-lb-caption,
    .cdm-lb-cta-bar {
        width: 100%;
    }
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1230px) {

    /* Khi màn hình nhỏ hơn tổng chiều rộng (600+20+580=1200), cho phép co lại */
    .cdm-gallery-col {
        flex: 0 0 50%;
        width: 50%;
    }

    .cdm-info-col {
        flex: 1;
        width: auto;
    }

    .cdm-main-img-wrap {
        flex: 1;
        width: auto;
        height: 480px;
    }
}

@media (max-width: 960px) {
    .cdm-product-top {
        flex-direction: column;
        gap: 16px;
    }

    .cdm-gallery-col,
    .cdm-info-col {
        flex: unset;
        width: 100%;
    }

    /* Thumbnails go horizontal below main image on mobile */
    .cdm-gallery-col {
        flex-direction: column-reverse;
    }

    .cdm-main-img-wrap {
        flex: unset;
        width: 100%;
        height: 60vw;
        max-height: 500px;
    }

    .cdm-thumb-strip {
        flex-direction: row;
        flex: unset;
        width: 100%;
        overflow-x: auto;
        max-height: unset;
    }

    .cdm-thumb-btn {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 600px) {
    .cdm-cta-wrap {
        flex-direction: column;
    }

    .cdm-lead-row2 {
        flex-direction: column;
    }

    .cdm-checklist-wrap {
        flex-direction: column;
    }

    .cdm-lb-prev,
    .cdm-lb-next {
        display: none;
    }

    .cdm-product-title {
        font-size: 18px;
    }
}


/* =============================================
   BÁO GIÁ & KHO HÀNG v2 (.bg-*)
   ============================================= */

/* Section */
.bg-section {
    background: #fff;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.bg-header {
    background: #154031;
    color: #fff;
    padding: 11px 20px;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0;
    border-radius: 0;
}

/* Tabs wrap */
.bg-tabs-wrap {
    padding: 20px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-bottom: none;
}

.bg-tabs {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 5px solid #efefef;
    padding: 4px;
    background: #efefef;
}

.bg-tab {
    padding: 11px 36px;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    background: #efefef;
    color: #000000;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
    border-radius: 10px;
}

.bg-tab.active,
.bg-tab:hover {
    background: #cc0000;
    color: #fff;
}

.bg-tabs-hint {
    font-size: 16px;
    color: #000;
    text-align: center;
    font-style: italic;
    margin: 0;
    margin-bottom: 10px;
}

.bg-header h2 {
    font-size: 26px !important;
}

/* Panel list */
.bg-list {
    display: none;
    padding: 0 45px 15px;
}

.bg-list.active {
    display: block;
}

/* Row (nhóm cây) */
.bg-row {
    border-bottom: 1px solid #ebebeb;
    padding: 15px 0;
    border-top: 1px solid #ebebeb;
    margin-bottom: -1px;
}


.bg-row-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
}

/* Thumbnail */
.bg-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e0dbd5;
    flex-shrink: 0;
}

.bg-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f6;
}

/* Row text */
.bg-row-text {
    flex: 1;
    min-width: 0;
}

.bg-row-name {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

.bg-row-size {
    font-size: 16px;
    color: #000;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.bg-row-status {
    font-size: 16px;
    font-weight: 500;
    color: #AF0B0B;
    margin: 0;
}

/* CTA buttons */
.bg-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 55px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    border: 2px solid;
}

.bg-cta-red {
    background: #cc0000;
    border-color: #cc0000;
    color: #fff;
}

.bg-cta-red:hover {
    background: #a80000;
    border-color: #a80000;
}

.bg-cta-red svg {
    transition: transform 0.2s;
}

.bg-cta-eye {
    background: transparent;
    border-color: #444;
    color: #444;
}

.bg-cta-eye:hover {
    background: #f0f0f0;
}

.bg-cta-outline {
    background: transparent;
    color: #154031;
    border-color: #154031;
}

.bg-cta-outline:hover {
    background: #f0f0f0;
}

/* Sub-list (expandable) */
.bg-sub-list {
    display: none;
    margin-top: 12px;
    border: none;
    border-radius: 0;
    overflow: hidden;
    padding-left: 74px;
}

.bg-sub-list.open {
    display: block;
}

.bg-sub-row {
    background: #fff;
    transition: background 0.15s;
}

.bg-sub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    /* border-bottom: 1px solid #eeebe6; */
}

.bg-sub-row:last-child {
    border-bottom: none;
}

/* Sub thumbnail */
.bg-sub-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #e0dbd5;
    flex-shrink: 0;
}

.bg-sub-thumb-ph {
    background: #f0ede9;
    display: block;
}

/* Sub text */
.bg-sub-text {
    flex: 1;
    min-width: 0;
}

.bg-sub-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 600;
    color: #000;
    line-height: 1.4;
}

.bg-sub-code {
    font-size: 17px;
    color: #000;
    font-weight: 400;
}

.bg-sub-desc {
    font-size: 16px;
    color: #000000CC;
    margin: 3px 0 0;
    line-height: 1.2;
}

/* Stock badge */
.bg-stk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 12px;
    white-space: nowrap;
}

.bg-stk-in {
    background: none;
    color: #0A8F61;
}

.bg-stk-low {
    background: none;
    color: #f57c00;
}

.bg-stk-out {
    background: none;
    color: #AF0B0B;
}

/* Sub arrow / action button */
.bg-sub-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1.5px solid #ddd;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: #555;
    text-decoration: none;
}

.bg-sub-arrow:hover {
    background: var(--primary-color, #163329);
    border-color: var(--primary-color, #163329);
    color: #fff;
}

.bg-sub-arrow:hover svg {
    stroke: #fff;
}

.bg-sub-arrow-out {
    opacity: 0.4;
    pointer-events: none;
}

/* Footer bar */
.bg-footer-bar {
    background: #edab03;
    border-radius: 0 0 8px 8px;
    padding: 10px 50px;
    overflow-x: auto;
}

.bg-footer-scroll {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.bg-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    color: #154031;
    font-weight: 500;
    white-space: nowrap;
}

.bg-footer-item svg {
    stroke: #154031;
    flex-shrink: 0;
    padding: 3px;
    border: 1px solid #154031;
    border-radius: 100%;
}

/* No data */
.bg-no-data-p {
    padding: 20px;
    color: #888;
    font-size: 13px;
}

/* Lưu ý note */
.bg-luu-y {
    font-size: 16px;
    color: #00000099;
    font-style: italic;
    text-align: center;
    padding: 6px 24px 12px;
    margin: 0;
}

.bg-no-data-center {
    padding: 30px 20px;
    text-align: center;
}

/* Hidden gallery data - MUST be visually hidden */
.bg-gal-data {
    display: none !important;
}

/* ── Lightbox ── */
/* ═══════════════════════════════════════════════════════
   BÁO GIÁ LIGHTBOX — 2-Panel Design
═══════════════════════════════════════════════════════ */

.bg-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-lb[hidden] {
    display: none !important;
}

.bg-lb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.bg-lb-box {
    position: relative;
    background: #fff;
    border-radius: 10px;
    width: min(96vw, 970px);
    max-height: 92vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    z-index: 1;
    padding: 30px 15px;
}

/* ── Nút đóng ── */
.bg-lb-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}

.bg-lb-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* ─────────────────────────────────────────
   Panel trái: thumb strip dọc + ảnh lớn
───────────────────────────────────────── */
.bg-lb-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    background: #fff;
    overflow: hidden;
}

.bg-lb-thumbs-col {
    width: 115px;
    height: 627px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    overflow-x: hidden;
    background: #fff0;
    align-self: flex-start;
    margin-right: 5px;
    padding-right: 5px;
}

.bg-lb-thumbs-col::-webkit-scrollbar {
    width: 4px;
}

.bg-lb-thumbs-col::-webkit-scrollbar-track {
    background: transparent;
}

.bg-lb-thumbs-col::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

/* Thumbnail item */
.bg-lb-t {
    width: 115px;
    height: 153px !important;
    /* 4x153 + 3x5gap = 627px = ảnh chính */
    object-fit: cover;
    border-radius: 5px;
    opacity: 1;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition: all 0.18s;
    display: block;
}

.bg-lb-t.active,
.bg-lb-t:hover {
    opacity: 1;
    border-color: #edab03;
}

/* Image + caption column */
.bg-lb-img-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

/* Main image wrap — fixed 470x627 */
.bg-lb-img-wrap {
    position: relative;
    width: 470px;
    height: 627px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}

.bg-lb-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Caption below image */
.bg-lb-img-caption {
    background: #fff;
    color: #000;
    font-size: 12.5px;
    text-align: center;
    padding: 7px 12px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 470px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Nav buttons on image */
.bg-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    font-size: 34px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
    padding: 0 0 2px;
}

.bg-lb-nav:hover {
    background: rgba(0, 0, 0, 0.85);
}

.bg-lb-prev {
    left: 8px;
}

.bg-lb-next {
    right: 8px;
}

/* Counter — bottom LEFT inside image */
.bg-lb-counter {
    position: absolute;
    bottom: 10px;
    left: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}

/* ─────────────────────────────────────────
   Panel phải: thông tin cây
───────────────────────────────────────── */
.bg-lb-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
    background: #fff;
    gap: 5px;
    min-width: 0;
    padding-left: 20px;
}

.bg-lb-right-title {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000000;
    margin: 0 0 2px;
    line-height: 1.35;
    letter-spacing: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.bg-lb-right-code {
    font-size: 17px;
    color: #00000099;
    margin: 0;
    font-style: italic;
    letter-spacing: 0;
}

/* ─────────────────── Thông số kỹ thuật ─────────────────── */
.bg-lb-specs-wrap {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.bg-lb-specs-head {
    background: #154031;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0;
}

/* Grid: 2 columns for spec rows */
.bg-lb-specs-table {
    display: grid;
    grid-template-columns: 1fr;
}

.bg-lb-spec-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 8px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #0000001A;
    background: #EFEFEF;
}

/* .bg-lb-spec-row:nth-child(3n) {
    border-right: none;
}

.bg-lb-spec-row:nth-last-child(-n+3) {
    border-bottom: none;
}

.bg-lb-spec-row:nth-child(odd) {
    background: #fff;
} */

.bg-lb-spec-label {
    font-size: 17px;
    color: #00000099;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 4px;
    display: block;
}

.bg-lb-spec-value {
    font-size: 17px;
    font-weight: 800;
    color: #154031;
    display: block;
    line-height: 1.2;
}

/* ─────────────────── Checklist ─────────────────── */
.bg-lb-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.bg-lb-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    color: #000;
    line-height: 1.4;
}

.bg-lb-checklist li svg {
    flex-shrink: 0;
}

/* ─────────────────── CTA buttons ─────────────────── */
.bg-lb-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0;
    color: #fff;
    transition: filter 0.15s, transform 0.1s;
    border: none;
    cursor: pointer;
}

.bg-lb-cta:hover {
    filter: brightness(1.12);
    color: #fff;
    transform: translateY(-1px);
}

.bg-lb-cta:active {
    transform: translateY(0);
}

.bg-lb-cta-call {
    background: #AF0B0B;
    box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35);
}

.bg-lb-cta-zalo {
    background: #AF0B0B;
    box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35);
}

/* ── Responsive: stack vertical on mobile ── */
@media (max-width: 700px) {
    .bg-lb-box {
        flex-direction: column;
        width: 100vw;
        max-width: 100vw;
        max-height: 98vh;
        border-radius: 10px 10px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .bg-lb[hidden] {
        display: none !important;
    }

    .bg-lb-left {
        flex: 0 0 auto;
        flex-direction: column;
    }

    .bg-lb-thumbs-col {
        width: 100%;
        max-height: 80px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 10px;
        align-self: auto;
    }

    .bg-lb-t {
        width: 55px;
        height: 55px;
    }

    .bg-lb-img-col {
        flex: 1;
    }

    .bg-lb-img-wrap {
        width: 100% !important;
        height: 38vh !important;
    }

    .bg-lb-main-img {
        object-fit: contain;
    }

    .bg-lb-img-caption {
        width: 100% !important;
    }

    .bg-lb-right {
        padding: 16px 16px 20px;
        flex: 1;
        overflow-y: auto;
    }

    .bg-lb-right-title {
        font-size: 14px;
    }

    .bg-lb-nav {
        width: 34px;
        height: 34px;
        font-size: 24px;
    }

    .bg-row-main {
        flex-wrap: wrap;
        gap: 10px;
    }

    .bg-cta {
        width: 100%;
        justify-content: center;
    }

    .bg-tabs-wrap {
        padding: 10px 14px 0;
    }

    .bg-row-main,
    .bg-sub-list,
    .bg-footer-bar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .bg-sub-row {
        gap: 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   NEWSLETTER SECTION
═══════════════════════════════════════════════════════ */
.nl-section {
    background: #fff;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 0;
}

/* inner container resets to avoid double-padding */
.nl-section .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

/* Green rounded box inside nl-section */
.nl-box {
    background: var(--primary-color);
    border-top: none;
    padding: 40px 170px;
    color: #fff;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
}

.nl-inner {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nl-text {
    flex: 0 0 auto;
    min-width: 220px;
}

.nl-heading {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

/* Form */
.nl-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nl-row-top {
    display: flex;
    gap: 10px;
}

.nl-row-bottom {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.nl-field {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 24px;
    padding: 0 16px;
    gap: 8px;
    height: 44px;
}

.nl-field-wide {
    flex: 1;
}

.nl-icon {
    flex-shrink: 0;
    color: #aaa;
    display: flex;
    align-items: center;
}

.nl-field input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    height: 100%;
    padding: 0;
    min-width: 0;
}

.nl-field input::placeholder {
    color: #aaa;
}

.nl-submit {
    flex-shrink: 0;
    background: var(--accent-color);
    color: var(--primary-color);
    border: none;
    border-radius: 24px;
    padding: 0 28px;
    height: 44px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    letter-spacing: 0.5px;
}

.nl-submit:hover {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════
   FOOTER TICKER BAR
═══════════════════════════════════════════════════════ */
.footer-ticker {
    background: #FF9E0326;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
    overflow: hidden;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.footer-ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ft-scroll 28s linear infinite;
    will-change: transform;
}

.footer-ticker:hover .footer-ticker-track {
    animation-play-state: paused;
}

.ft-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    flex-shrink: 0;
    padding-right: 50px;
}

@keyframes ft-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ═══════════════════════════════════════════════════════
   SITE FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
    background: #fff;
    padding: 15px 15px 0;
    border-top: none;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.site-footer .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

/* --- 4-column grid --- */
.ft-grid {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1.3fr 1fr;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

/* --- Brand column --- */

.ft-logo-link {
    display: inline-block;
    margin-bottom: 12px;
}

.ft-logo {
    max-width: 300px;
    height: auto;
    display: block;
}

.ft-brand-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    margin: 0 0 8px;
    line-height: 1.4;
}

.ft-brand-desc {
    font-size: 16px;
    color: #000;
    line-height: 1.2;
    margin: 0 0 14px;
}

.ft-member-label {
    font-size: 16px;
    font-weight: 500;
    color: #AF0B0B;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 8px;
}

.ft-member-logos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ft-member-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    width: 76px;
    height: 44px;
    background: #f8f8f8;
    transition: border-color 0.2s;
}

.ft-member-logo img {
    max-width: 70px;
    max-height: 40px;
    object-fit: contain;
}

/* --- Generic column --- */
.ft-col-title {
    font-size: 20px;
    font-weight: 500;
    color: #AF0B0B;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 15px;
    padding-bottom: 0;
}

.ft-social-title {
    margin-top: 18px;
    font-size: 16px;
}

/* Info list (thông tin trụ sở) */
.ft-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #000;
    line-height: 1.2;
}

.ft-info-list li {
    margin-bottom: 8px;
}

.ft-info-list strong {
    color: #000;
    font-weight: 500;
}

/* Link list */
.ft-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

.ft-link-list li {
    margin-bottom: 7px;
}

.ft-link-list a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}

.ft-link-list a:hover {
    color: var(--primary-color);
}

/* --- Social icons --- */
.ft-social-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ft-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: #f0f0f0;
    color: #333;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.ft-social-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

/* --- Bottom bar --- */
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: #00000099;
    gap: 16px;
    flex-wrap: wrap;
}

.ft-copyright {
    margin: 0;
    color: #666;
}

.ft-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ft-badge-label {
    font-size: 14px;
    color: #00000099;
    white-space: nowrap;
}

.ft-badge {
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 4px;
    overflow: hidden;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.ft-badge:hover {
    opacity: 1;
}

.cdm-tab-content-inner ul {
    list-style: none;
    /* Xóa chấm mặc định */
    padding: 0;
    margin: 15px;
    font-size: 17px;
    line-height: 1.8;
    color: #000;
}

.cdm-tab-content-inner li {
    position: relative;
    padding-left: 15px;
    /* Khoảng cách từ dấu chấm đến chữ */
    margin-bottom: 0;
}

.cdm-tab-content-inner li::before {
    content: "";
    position: relative;
    left: 0;
    top: 11px;
    width: 10px;
    height: 10px;
    background-color: #154031;
    border-radius: 50%;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.aligncenter {
    clear: both;
    text-align: center;
    width: 100% !important;
}

.aligncenter img {
    margin: 0 auto;
}

.wp-caption-text {
    margin-top: 5px;
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Newsletter & Footer
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ft-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .nl-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .nl-heading {
        font-size: 20px;
    }

    .nl-row-top,
    .nl-row-bottom {
        flex-direction: column;
    }

    .nl-submit {
        width: 100%;
        justify-content: center;
    }

    .ft-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ft-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════
   CDM VIDEO EMBED — Shortcode [cdm_video]
═══════════════════════════════════════════════════════ */
.cdm-video-embed {
    max-width: 800px;
    margin: 20px auto;
    padding: 0;
    border: none;
}

/* 16:9 ratio wrapper */
.cdm-video-ratio {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #000;
}


.cdm-video-ratio iframe,
.cdm-video-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.cdm-video-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #154031;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    padding: 8px 14px;
    border-radius: 0 0 8px 8px;
    margin-top: 0;
    line-height: 1.4;
}

/* Monitor icon */
.cdm-video-caption::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .9;
}


.cdm-video-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #111;
    text-decoration: underline;
    font-size: 14px;
    padding: 12px;
}

/* ═══════════════════════════════════════════════════════
   CDM FEATURED PRODUCTS — [cdm_featured] Shortcode
═══════════════════════════════════════════════════════ */
.cdm-featured-block {
    background: #EFEFEF;
    border-left: 10px solid #FF9E03;
    border-radius: 0;
    margin: 0;
    padding: 22px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Heading row */
.cdm-featured-heading {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 0 5px;
    margin: 0;
}

/* Hide old bar element — border is on .cdm-featured-block now */
.cdm-featured-bar {
    display: none;
}

/* Slider wrapper — clips overflow */
.cdm-featured-slider-wrap {
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* Slider inner — flex row, translates on nav */
.cdm-featured-slider {
    display: flex;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* Each slide card */
.cdm-featured-slide {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 6px 40px 6px 0;
    border-right: 1px solid #f0f0f0;
}

.cdm-tab-content-inner p,
.cdm-tab-content-inner h2,
.cdm-tab-content-inner h3,
.cdm-tab-content-inner h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.cdm-featured-slide:last-child {
    border-right: none;
}

.cdm-featured-img-wrap {
    flex-shrink: 0;
    display: block;
}

.cdm-featured-img-wrap img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.cdm-featured-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cdm-featured-title {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 !important;
}

/* "Xem bài" button */
.cdm-featured-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #AF0B0B;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 55px;
    width: fit-content;
    min-width: 110px;
    transition: background .2s;
    white-space: nowrap;
}

.cdm-featured-btn:hover {
    background: #a00;
}

.cdm-featured-btn svg {
    flex-shrink: 0;
}


/* Prev / Next buttons */
.cdm-fs-prev,
.cdm-fs-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(21, 64, 49, .85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 2;
    padding: 0;
}

.cdm-fs-prev {
    left: 2px;
    transform: translateY(-50%) scaleX(-1);
}

.cdm-fs-next {
    right: 2px;
}

.cdm-fs-prev:hover,
.cdm-fs-next:hover {
    background: #154031;
}

/* Mobile: 1 slide */
@media (max-width: 639px) {
    .cdm-featured-slide {
        padding: 8px 0;
    }

    .cdm-featured-img-wrap img {
        width: 80px;
        height: 80px;
    }
}

/* ─────────────────────────────────────────
   Author Card — dmc_v2
   ───────────────────────────────────────── */
.dmc_v2_wrapper {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: inherit;
    box-sizing: border-box;
}

.dmc_v2_wrapper .dmc_v2_card {
    background-color: #ededed;
    border-radius: 20px;
    padding: 30px;
    max-width: 850px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}

.dmc_v2_wrapper .dmc_v2_avatar_wrap {
    flex-shrink: 0;
}

.woocommerce .products ul,
.woocommerce ul.products {
    margin: 0;
    padding: 0;
    list-style: none outside;
    clear: both;
}

.dmc_v2_wrapper .dmc_v2_img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dmc_v2_wrapper .dmc_v2_info {
    flex-grow: 1;
}

.dmc_v2_wrapper .dmc_v2_role {
    font-size: 16px;
    color: #000;
    margin-bottom: 4px;
    display: inline-block;
}

.dmc_v2_wrapper .dmc_v2_name {
    font-size: 16px;
    color: #154031;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0;
    display: inline-block;
}

.dmc_v2_wrapper .dmc_v2_quote_container {
    position: relative;
    margin-bottom: 25px;
    padding: 0 25px;
    margin-top: 15px;
}

.dmc_v2_wrapper .dmc_v2_quote_mark {
    font-size: 45px;
    color: #b31217;
    font-family: 'Georgia', serif;
    position: absolute;
    line-height: 1;
}

.dmc_v2_wrapper .dmc_v2_mark_open {
    top: -15px;
    left: -5px;
}

.dmc_v2_wrapper .dmc_v2_mark_close {
    bottom: -35px;
    right: -5px;
}

.dmc_v2_wrapper .dmc_v2_text {
    font-style: italic;
    color: #000;
    line-height: 1.2;
    font-size: 14px;
    margin: 0;
}

.dmc_v2_wrapper .dmc_v2_btn_phone {
    display: inline-flex;
    align-items: center;
    background-color: #b31217;
    color: #ffffff !important;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 18px;
    gap: 12px;
    transition: all 0.3s ease;
}

.dmc_v2_wrapper .dmc_v2_btn_phone:hover {
    background-color: #8e0e12;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(179, 18, 23, 0.3);
}

.dmc_v2_wrapper .dmc_v2_icon_svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .dmc_v2_wrapper .dmc_v2_card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }

    .dmc_v2_wrapper .dmc_v2_img {
        width: 140px;
        height: 140px;
    }

    .dmc_v2_wrapper .dmc_v2_mark_close {
        bottom: -25px;
    }
}

/* ═══════════════════════════════════════════════
   HOME BANNER IMAGE — Trang Chủ
   Max-width: 1230px, căn giữa, responsive
═══════════════════════════════════════════════ */
.home-banner-img {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 0;
    line-height: 0;
}

.home-banner-img__inner {
    max-width: 1230px;
    margin: 0 auto;
    display: block;
    line-height: 0;
}

.home-banner-img__inner a {
    display: block;
    line-height: 0;
}

.home-banner-img__img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .home-banner-img {
        margin-bottom: 0;
    }
}

/* ═══════════════════════════════════════════════
   HOME PAGE CONTENT — Nội dung trang chủ
   (Chỉnh sửa qua WP Editor)
═══════════════════════════════════════════════ */
.home-page-content {
    padding: 30px 0 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.home-page-content h1 {
    font-size: 28px;
    font-weight: 500;
    color: var(--primary-color);
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.home-page-content h2 {
    font-size: 26px;
    font-weight: 500;
    color: var(--primary-color);
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.home-page-content h3 {
    font-size: 24px;
    font-weight: 500;
    color: var(--primary-color);
    margin: 0;
}

.home-page-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #000;
    margin: 0 0 10px;
}

.home-page-content blockquote,
.home-page-content .wp-block-quote {
    border-left: 5px solid #FF9E03;
    background: #FF9E0326;
    padding: 16px 20px;
    margin: 0 0 16px;
    border-radius: 0 4px 4px 0;
}

.home-page-content blockquote {
    margin-top: 15px;
}

.home-page-content blockquote p,
.home-page-content .wp-block-quote p {
    margin: 0 0 8px;
    font-size: 16px;
    color: #000;
    line-height: 1.2;
}

.home-page-content blockquote p:last-child,
.home-page-content .wp-block-quote p:last-child {
    margin: 0;
}

.home-page-content blockquote cite,
.home-page-content blockquote strong {
    font-weight: 500;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .home-page-content {
        padding: 20px 0 10px;
    }

    .home-page-content h1,
    .home-page-content h2 {
        font-size: 20px;
    }
}

/* ═══════════════════════════════════════════════
   DỊCH VỤ NỔI BẬT — cdm-services-section
═══════════════════════════════════════════════ */
.cdm-services-section {
    padding: 30px 0 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
}

/* Heading với thanh đỏ bên trái */
.cdm-services-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 500;
    color: #154031;
    text-transform: uppercase;
    margin: 0 0 20px;
    line-height: 1.2;
}

.cdm-services-heading__bar {
    display: inline-block;
    width: 64px;
    min-width: 6px;
    height: 32px;
    background: var(--danger-color);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Grid 3 cột × 2 hàng */
.cdm-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.cdm-svc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cdm-svc-card:hover .cdm-svc-card__img {
    transform: scale(1.05);
}

/* Placeholder khi chưa có ảnh */
.cdm-svc-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c8dbc8 0%, #a0c0a0 100%);
}

/* Overlay chứa tiêu đề — dải đen mờ cuối card */
.cdm-svc-card__overlay {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    height: 50px;
    background: rgba(239, 241, 239, 0.90);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.cdm-svc-card__title {
    color: #154031;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;

}

/* Nút CTA */
.cdm-services-cta {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.cdm-services-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FF9E03;
    color: #fff !important;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 36px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity background 0.2s, transform 0.2s;
    text-transform: uppercase;

}


/* ═══════════════════════════════════════════════
   BANNER GIỬA TRANG — cdm-mid-banner
   Ảnh thực (img tag), max-width 1230px, căn giữa
═══════════════════════════════════════════════ */
.cdm-mid-banner {
    display: block;
    width: 100%;
    max-width: 1230px;
    margin: 0 auto 30px;
    border-bottom: 3px solid var(--danger-color, #AF0B0B);
    overflow: hidden;
    line-height: 0;
    /* xóa khoảng trắng dưới img */
}

/* Link wrapper */
.cdm-mid-banner a {
    display: block;
    line-height: 0;
}

/* Ảnh banner */
.cdm-mid-banner__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fallback khi chưa có ảnh */
.cdm-mid-banner--empty {
    min-height: 80px;
    background: #154031;
}

/* Responsive */
@media (max-width: 768px) {
    .cdm-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cdm-services-heading {
        font-size: 18px;
    }

    .cdm-svc-card__title {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cdm-services-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════
   TOP CÂY NỔI BẬT — cdm-top-trees-section
═══════════════════════════════════════════════ */
.cdm-top-trees-section {
    padding: 30px 0 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
}

/* Heading */
.cdm-top-trees-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
    font-weight: 500;
    color: #154031;
    text-transform: uppercase;
    margin: 0 0 20px;
    line-height: 1.2;
}

.cdm-top-trees-heading__bar {
    display: inline-block;
    width: 64px;
    min-width: 6px;
    height: 32px;
    background: var(--danger-color);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Grid — 5 cột cho 8sp, 4 cột cho 12sp (2 hàng 6) */
.cdm-top-trees-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.cdm-top-trees-grid--8 {
    grid-template-columns: repeat(5, 1fr);
}

.cdm-top-trees-grid--12 {
    grid-template-columns: repeat(6, 1fr);
}

/* Card */
.cdm-tt-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Vùng ảnh + badge */
.cdm-tt-card__img-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 3 / 4;
    background: #e0e8e0;
}

/* Link bọc ảnh - full size */
.cdm-tt-card__img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.cdm-tt-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.cdm-tt-card__img-wrap:hover .cdm-tt-card__img {
    transform: scale(1.06);
}

.cdm-tt-card__badge {
    position: absolute;
    bottom: 10px;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--danger-color, #AF0B0B);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 10px;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
    z-index: 2;
    transition: background 0.2s;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.cdm-tt-card__badge:hover {
    background: #8a0808;
}

.cdm-tt-card__badge--below {
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 180px;
    border-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-top: 8px;
    padding: 13px 12px;
    font-size: 14px;
    text-align: center;
    bottom: 0;
    left: 0;
}

.cdm-tt-card__stars {
    color: #FF9E03;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1;
    margin: 0;
}

.cdm-tt-card__name {
    font-size: 20px;
    font-weight: 500;
    color: #154031;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left;
}

/* Nút XEM THÊM */
.cdm-top-trees-cta {
    text-align: center;
    margin-top: 10px;
}

.cdm-top-trees-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FF9E03;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 28px;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.cdm-top-trees-cta__btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .cdm-top-trees-grid--8 {
        grid-template-columns: repeat(4, 1fr);
    }

    .cdm-top-trees-grid--12 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {

    .cdm-top-trees-grid--8,
    .cdm-top-trees-grid--12 {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .cdm-top-trees-heading {
        font-size: 18px;
    }
}

@media (max-width: 480px) {

    .cdm-top-trees-grid--8,
    .cdm-top-trees-grid--12 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Archive: Grid 5 cột giống front-page ── */
.cdm-archive-grid {
    grid-template-columns: repeat(5, 1fr);
}

.cdm-archive-grid .cdm-tt-card__name a {
    color: #154031;
    text-decoration: none;
}

.cdm-archive-grid .cdm-tt-card__name a:hover {
    color: var(--accent-color);
}

/* cdm-top-trees-grid--10 (archive dùng) */
.cdm-top-trees-grid--10 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {

    .cdm-archive-grid,
    .cdm-top-trees-grid--10 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {

    .cdm-archive-grid,
    .cdm-top-trees-grid--10 {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

@media (max-width: 540px) {

    .cdm-archive-grid,
    .cdm-top-trees-grid--10 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════
   SẢN PHẨM THEO TAB — cdm-ptabs-section
═══════════════════════════════════════════════ */
.cdm-ptabs-section {
    padding: 0 0 20px;
    margin-bottom: 30px;
}

/* Grid 5 cột cho tab 10 SP */
.cdm-top-trees-grid--10 {
    grid-template-columns: repeat(5, 1fr);
}

/* Tab nav bar — nền xám nhạt, border-bottom đỏ trực tiếp */
.cdm-ptabs-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border-radius: 0;
    width: 100%;
    border-bottom: none;
    box-sizing: border-box;
    margin-bottom: 18px;
}

.cdm-ptabs-btn {
    padding: 10px 20px;
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 30px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    line-height: 1.2;
}

.cdm-ptabs-btn:hover {
    background: rgba(21, 64, 49, 0.08);
    border-color: #154031;
    color: #154031;
}

.cdm-ptabs-btn.is-active {
    background: var(--primary-color, #154031);
    color: #fff;
    border-color: var(--primary-color, #154031);
}

/* Tab panels — không có border (dường đỏ đã nằm trên nav) */
.cdm-ptabs-panel {
    display: none;
    margin-top: 0;
    padding-top: 0;
}

.cdm-ptabs-panel.is-active {
    display: block;
}

/* Empty state */
.cdm-ptabs-empty {
    color: #888;
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
}

/* Nút Xem Danh Mục */
.cdm-ptabs-cta {
    text-align: center;
    margin-top: 16px;
}

.cdm-ptabs-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FF9E03;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 28px;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.cdm-ptabs-cta__btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .cdm-top-trees-grid--10 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .cdm-top-trees-grid--10 {
        grid-template-columns: repeat(3, 1fr);
    }

    .cdm-ptabs-nav {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cdm-top-trees-grid--10 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─────────────────────────────────────────────
   TAB SWITCHING — Inline script (added via wp_footer)
   CSS-only fallback: panels hidden by default
───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════
   CÁC DỰ ÁN TIÊU BIỂU — cdm-posts-section
═══════════════════════════════════════════════ */
.cdm-posts-section {
    padding: 30px 0 20px;
    margin-bottom: 30px;
}

/* Grid 3 cột (mặc định) */
.cdm-pn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.cdm-pn-card {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}



/* Ảnh card */
.cdm-pn-card__img-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e0e8e0;
}

.cdm-pn-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.cdm-pn-card__img-wrap:hover .cdm-pn-card__img {
    transform: scale(1.05);
}

/* Placeholder khi không có ảnh */
.cdm-pn-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c8dbc8, #a0c0a0);
    min-height: 180px;
}

.cdm-pn-card__body {
    padding: 14px 0px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cdm-pn-card__title {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.cdm-pn-card__title a {
    color: #154031;
    text-decoration: none;
    transition: color 0.18s;
    font-size: 20px;
}

.cdm-pn-card__title a:hover {
    color: var(--primary-color, #154031);
}

.cdm-pn-card__excerpt {
    font-size: 17px;
    color: #000000;
    line-height: 1.2;
    margin: 0;
}

/* Nút CTA */
.cdm-pn-cta {
    text-align: center;
    margin-top: 6px;
}

.cdm-pn-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FF9E03;
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 28px;
    border-radius: 10px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: opacity 0.18s, transform 0.18s;
}

.cdm-pn-cta__btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Panel không có tabs — xóa border-top */
.cdm-pn-panel.cdm-pn-notab {
    border-top: none;
    padding-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .cdm-pn-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .cdm-pn-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════
   PHẢN HỒI KHÁCH HÀNG — cdm-reviews-section
═══════════════════════════════════════════════ */
.cdm-reviews-section {
    padding: 30px 0 20px;
    margin-bottom: 30px;
}

.cdm-reviews-intro {
    margin-bottom: 20px;
}

.cdm-reviews-quote {
    margin: 0 0 8px;
    padding: 0;
    border: none;
    font-size: 15px;
    font-style: italic;
    color: #333;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.cdm-reviews-quote__icon {
    color: var(--danger-color, #AF0B0B);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    font-style: normal;
}

.cdm-reviews-intro__text {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.65;
}

.cdm-reviews-slider {
    overflow: hidden;
}

.cdm-reviews-page {
    display: none;
}

.cdm-reviews-page.is-active {
    display: block;
}

.cdm-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.cdm-review-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8df;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.cdm-review-card:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

.cdm-review-card__avatar-wrap {
    flex-shrink: 0;
}

.cdm-review-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.cdm-review-card__avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #dbe8d8;
    color: #6a9c6a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdm-review-card__body {
    flex: 1;
    min-width: 0;
}

.cdm-review-card__name {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 500;
    color: #1a3d1f;
    line-height: 1.3;
}

.cdm-review-card__role {
    font-weight: 400;
    color: #666;
}

.cdm-review-card__stars {
    color: #f5a623;
    font-size: 13px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.cdm-review-card__text {
    margin: 0;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}

.cdm-reviews-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.cdm-reviews-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.cdm-reviews-dot.is-active {
    background: var(--danger-color, #AF0B0B);
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .cdm-reviews-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════
   PHẢN HỒI KHÁCH HÀNG — cdm-reviews-section
═══════════════════════════════════════════════ */
.cdm-reviews-section {
    padding: 30px 0 20px;
    margin-bottom: 30px;
}

.cdm-reviews-intro {
    margin-bottom: 20px;
}

.cdm-reviews-quote {
    margin: 0 0 8px;
    padding: 0;
    border: none;
    font-size: 17px;
    font-style: italic;
    color: #154031;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-weight: bold;
}

.cdm-reviews-quote__icon {
    color: #154031;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    font-style: normal;
    margin-top: -4px;
}

.cdm-reviews-intro__text {
    margin: 0;
    font-size: 17px;
    color: #000;
    line-height: 1.2;
}

.cdm-reviews-slider {
    overflow: hidden;
}

.cdm-reviews-page {
    display: none;
}

.cdm-reviews-page.is-active {
    display: block;
}

.cdm-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.cdm-review-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8df;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
    background: #EFEFEF;
}

.cdm-review-card:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);

}

.cdm-review-card__avatar-wrap {
    flex-shrink: 0;
}

.cdm-review-card__avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.cdm-review-card__avatar-placeholder {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #EFEFEF;
    color: #154031;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdm-review-card__body {
    flex: 1;
    min-width: 0;
}

.cdm-review-card__name {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    line-height: 1.2;
}

.cdm-review-card__role {
    font-weight: 500;
    color: #000000;
}

.cdm-review-card__stars {
    color: #f5a623;
    font-size: 13px;
    margin-bottom: 5px;
    letter-spacing: 1px;
    display: none;
}

.cdm-review-card__text {
    margin: 0;
    font-size: 17px;
    color: #000000;
    line-height: 1.2;
    font-style: italic;
}

.cdm-reviews-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.cdm-reviews-dot {
    width: 80px;
    height: 10px;
    border-radius: 0;
    border: none;
    background: #D9D9D9;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
    margin: 0px 5px;
}

.cdm-reviews-dot.is-active {
    background: #FF9E03;
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .cdm-reviews-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════
   TIN TỨC CÂY XANH — cdm-news-section
═══════════════════════════════════════════════ */
.cdm-news-section {
    padding: 30px 0 10px;
    margin-bottom: 30px;
}

/* Grid: 2 lớn (hàng 1) + 3 nhỏ (hàng 2) */
.cdm-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
}

/* 2 card lớn hàng trên: mỗi card chiếm 1.5 cột */
.cdm-news-card--big:nth-child(1) {
    grid-column: 1 / 2;
}

.cdm-news-card--big:nth-child(2) {
    grid-column: 2 / 4;
}

/* 3 card nhỏ hàng dưới: tự fill vào hàng 2 */
.cdm-news-card--sm {
    grid-column: span 1;
}

/* Card base */
.cdm-news-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #1a3d1f;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.cdm-news-card--big {
    min-height: 240px;
}

.cdm-news-card--sm {
    min-height: 150px;
}

/* Link fills entire card */
.cdm-news-card__link {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    text-decoration: none;
    position: relative;
}

/* Overlay gradient at bottom */
.cdm-news-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-height: 80px;
}

/* Title */
.cdm-news-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    flex: 1;
}

.cdm-news-card--big .cdm-news-card__title {
    font-size: 15px;
}

/* Arrow icon */
.cdm-news-card__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 17px;
    transition: background 0.2s, transform 0.2s;
}

/* CTA button — vàng */
.cdm-news-cta {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.cdm-news-cta__btn {
    display: inline-block;
    padding: 12px 36px;
    background: #FF9E03;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 3px;
    letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.15s;
    text-transform: uppercase;
}

.cdm-news-cta__btn:hover {
    background: #AF0B0B;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .cdm-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cdm-news-card--big:nth-child(1) {
        grid-column: 1 / 2;
    }

    .cdm-news-card--big:nth-child(2) {
        grid-column: 2 / 3;
    }

    .cdm-news-card--sm {
        grid-column: span 1;
    }

    .cdm-news-card--big {
        min-height: 180px;
    }
}

@media (max-width: 480px) {
    .cdm-news-grid {
        grid-template-columns: 1fr;
    }

    .cdm-news-card--big:nth-child(1),
    .cdm-news-card--big:nth-child(2) {
        grid-column: 1;
    }

    .cdm-news-card--big {
        min-height: 200px;
    }

    .cdm-news-card--sm {
        min-height: 140px;
    }
}


/* ═══════════════════════════════════════════════
   TIN TỨC — FIX layout 50/50 + heights + green overlay
═══════════════════════════════════════════════ */

/* Grid: 6 cột ẩn để chia đều: big=3/6=50%, sm=2/6=33% */
.cdm-news-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

/* 2 card lớn: mỗi cái 50% */
.cdm-news-card--big {
    grid-column: span 3;
    height: 395px;
    min-height: unset;
}

/* 3 card nhỏ: mỗi cái 33% */
.cdm-news-card--sm {
    grid-column: span 2;
    height: 280px;
    min-height: unset;
}

.cdm-news-card {
    border-radius: 30px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #154031;
    position: relative;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Link cover full card */
.cdm-news-card__link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    text-decoration: none;
}

/* Overlay: nền XANH đặc ở dưới cùng */
.cdm-news-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    background: rgba(21, 64, 49, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: unset;
}

/* Title text */
.cdm-news-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    flex: 1;
}

.cdm-news-card--big .cdm-news-card__title {
    font-size: 17px;
}

/* Arrow icon */
.cdm-news-card__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    font-size: 28px;
    transition: background 0.2s;
}


/* Responsive */
@media (max-width: 860px) {
    .cdm-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cdm-news-card--big {
        grid-column: span 1;
        height: 240px;
    }

    .cdm-news-card--sm {
        grid-column: span 1;
        height: 180px;
    }
}

@media (max-width: 540px) {
    .cdm-news-grid {
        grid-template-columns: 1fr;
    }

    .cdm-news-card--big,
    .cdm-news-card--sm {
        grid-column: 1;
        height: 200px;
    }
}


/* ═══ NEWS GRID FINAL FIX ═══ */
.cdm-news-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: 395px 280px !important;
    gap: 15px !important;
}

/* Row 1: 2 card lớn 50/50 */
.cdm-news-card--big:nth-child(1) {
    grid-column: 1 / 4 !important;
    grid-row: 1 !important;
    height: 395px !important;
}

.cdm-news-card--big:nth-child(2) {
    grid-column: 4 / 7 !important;
    grid-row: 1 !important;
    height: 395px !important;
}

/* Row 2: 3 card nhỏ ~33% */
.cdm-news-card--sm:nth-child(3) {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    height: 280px !important;
}

.cdm-news-card--sm:nth-child(4) {
    grid-column: 3 / 5 !important;
    grid-row: 2 !important;
    height: 280px !important;
}

.cdm-news-card--sm:nth-child(5) {
    grid-column: 5 / 7 !important;
    grid-row: 2 !important;
    height: 280px !important;
}

/* Card uses height, not min-height */
.cdm-news-card {
    min-height: unset !important;
}

.cdm-news-card__link {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    text-decoration: none !important;
}

/* Responsive override */
@media (max-width: 860px) {
    .cdm-news-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
    }

    .cdm-news-card--big:nth-child(1),
    .cdm-news-card--big:nth-child(2) {
        grid-column: span 1 !important;
        grid-row: auto !important;
        height: 230px !important;
    }

    .cdm-news-card--sm:nth-child(3),
    .cdm-news-card--sm:nth-child(4),
    .cdm-news-card--sm:nth-child(5) {
        grid-column: span 1 !important;
        grid-row: auto !important;
        height: 170px !important;
    }
}

@media (max-width: 540px) {
    .cdm-news-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }

    .cdm-news-card--big:nth-child(1),
    .cdm-news-card--big:nth-child(2),
    .cdm-news-card--sm:nth-child(3),
    .cdm-news-card--sm:nth-child(4),
    .cdm-news-card--sm:nth-child(5) {
        grid-column: 1 !important;
        grid-row: auto !important;
        height: 200px !important;
    }
}


/* ═══════════════════════════════════════════════
   ĐỐI TÁC - BÁO CHÍ — cdm-partners-section
═══════════════════════════════════════════════ */
.cdm-partners-section {
    padding: 20px 0 14px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e8ece6;
}

/* Wrap: flex với 2 nút prev/next */
.cdm-partners-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Viewport: overflow hidden */
.cdm-partners-viewport {
    flex: 1;
    overflow: hidden;
}

/* Track: hàng ngang logo */
.cdm-partners-track {
    display: flex;
    gap: 10px;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* Từng item */
.cdm-partner-item {
    flex: 0 0 auto;
    width: 150px;
}

/* Logo box */
.cdm-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 8px 10px;
    border: 1px solid #dde8d9;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
    box-shadow: 3px 3px 3px 0px #00000026;
}

.cdm-partner-logo:hover {
    border-color: #4a8c5c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.cdm-partner-logo__img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    display: block;
    filter: grayscale(20%);
    transition: filter 0.2s;
}

.cdm-partner-logo:hover .cdm-partner-logo__img {
    filter: grayscale(0%);
}

/* Text placeholder khi chưa có ảnh */
.cdm-partner-logo__text {
    font-size: 11px;
    font-weight: 500;
    color: #1a3d1f;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Nút prev/next */
.cdm-partners-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
    padding: 0;
}

.cdm-partners-btn:hover {
    background: var(--danger-color, #AF0B0B);
    border-color: var(--danger-color, #AF0B0B);
    color: #fff;
}

@media (max-width: 600px) {
    .cdm-partner-item {
        width: 120px;
    }

    .cdm-partner-logo {
        height: 58px;
    }
}


/* ═══ FIX: Horizontal scroll từ partners carousel ═══ */
/* Chặn overflow toàn trang */
html,
body {
    overflow-x: hidden !important;
}

/* Đảm bảo section không tràn */
.cdm-partners-section {
    overflow: hidden;
}

.cdm-partners-wrap {
    overflow: hidden;
    max-width: 100%;
}

/* Viewport ẩn phần tràn của track */
.cdm-partners-viewport {
    overflow: hidden !important;
    max-width: 100%;
    flex: 1 1 0;
    min-width: 0;
}

/* Track KHÔNG được tràn ra ngoài */
.cdm-partners-track {
    display: flex;
    flex-wrap: nowrap;
    max-width: none;
    /* track rộng tuỳ ý, viewport sẽ ẩn */
}

/* Button không bị co lại */
.cdm-partners-btn {
    flex-shrink: 0;
    min-width: 32px;
}


/* ═══ Container width 1260 + padding 30px override ═══ */
:root {
    --container-max-width: 1230px;
    --container-padding: 25px;
}

.cdm-container,
.container,
.cdm-main-container {
    max-width: 1230px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   HOMEPAGE SECTIONS — border-bottom + spacing đều nhau
═══════════════════════════════════════════════ */

/* Tất cả section trong .container trang chủ: border đỏ dưới + margin đều */
.container>section,
.container .cdm-reviews-section,
.container .cdm-news-section,
.container .cdm-partners-section,
.container section.home-page-content,
.container section.cdm-services-section,
.container section.cdm-featured-trees-section,
.container section.cdm-project-section,
.container section.cdm-top-trees-section {
    border-bottom: 5px solid #AF0B0B;
    margin-bottom: 25px;
    padding-bottom: 0px;
}

/* Section cuối cùng không cần margin-bottom */
.container>section:last-child,
.container .cdm-partners-section {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 30px;
}

.container>section.cdm-top-trees-section:after {
    border-bottom: none !important;
    display: none !important;
}

.cdm-tabs-section {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 10px;
    padding-bottom: 30px !important;
}

.cdm-related-section:after {
    display: none !important;
}

/* ═══ SECTION BORDER -- Full 1230px (Khớp với container container) ═══ */

.container>section,
.container .cdm-reviews-section,
.container .cdm-news-section,
.container .cdm-partners-section {
    border-bottom: none !important;
    position: relative;
}

.container>section::after,
.container .cdm-news-section::after,
.container .cdm-reviews-section::after {
    content: "";
    display: block;
    height: 5px;
    background: var(--danger-color, #AF0B0B);

    /* Khớp với container (bù padding 25px mỗi bên) */
    position: absolute;
    bottom: -30px;
    left: -25px;
    right: -25px;
    width: auto;
    max-width: none;
}

/* Hide line on last section (Partners) */
.container .cdm-partners-section::after,
.container .cdm-posts-section::after {
    display: none;
}

/* ═══════════════════════════════════════════════
   DỊCH VỤ NỔI BẬT — cdm-services-section (FIXED 380x250)
═══════════════════════════════════════════════ */
/* Heading is already styled by user */

.cdm-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.cdm-svc-card {
    display: block;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    height: 250px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cdm-svc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cdm-svc-card:hover .cdm-svc-card__img {
    transform: scale(1.05);
}

.cdm-svc-card__placeholder {
    width: 100%;
    height: 100%;
    background: #e8ecef;
}

.cdm-svc-card__overlay {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: rgba(239, 241, 239, 0.90);
    border-radius: 4px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background 0.3s;
}

.cdm-svc-card__title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #154031;
    margin: 0;
    line-height: 1.3;
}

.cdm-svc-card:hover .cdm-svc-card__overlay {
    background: rgba(255, 255, 255, 1);
}

.cdm-services-cta {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.cdm-services-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FF9E03;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 36px;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.2s;
}

.cdm-services-cta__btn:hover {
    background: #dca800;
    color: #fff;
    transform: translateY(-2px);
}

.cdm-services-cta__btn svg {
    margin-bottom: 2px;
}

/* Responsive Dịch Vụ Nổi Bật */
@media (max-width: 900px) {
    .cdm-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 540px) {
    .cdm-services-grid {
        grid-template-columns: 1fr;
    }

    .cdm-svc-card {
        height: 200px;
    }
}

/* ═══════════════════════════════════════════════
   DỊCH VỤ NỔI BẬT — cdm-services-section (FIXED 380x250)
═══════════════════════════════════════════════ */
/* Heading is already styled by user */

.cdm-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.cdm-svc-card {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 250px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cdm-svc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cdm-svc-card:hover .cdm-svc-card__img {
    transform: scale(1.05);
}

.cdm-svc-card__placeholder {
    width: 100%;
    height: 100%;
    background: #e8ecef;
}

.cdm-svc-card__overlay {
    position: absolute;
    bottom: 25px;
    left: 15px;
    right: 15px;
    background: #FFFFFFCC;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background 0.3s;
}

.cdm-svc-card__title {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: #154031;
    margin: 0;
    line-height: 1.2;
}

.cdm-svc-card:hover .cdm-svc-card__overlay {
    background: rgba(255, 255, 255, 1);
}

.cdm-services-cta {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.cdm-services-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FF9E03;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 36px;
    border-radius: 10px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.2s;
}

.cdm-services-cta__btn:hover {
    background: #dca800;
    color: #fff;
    transform: translateY(-2px);
}

.cdm-services-cta__btn svg {
    margin-bottom: 2px;
}

/* Responsive Dịch Vụ Nổi Bật */
@media (max-width: 900px) {
    .cdm-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 540px) {
    .cdm-services-grid {
        grid-template-columns: 1fr;
    }

    .cdm-svc-card {
        height: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CDM ARCHIVE PRODUCT — Trang Danh mục Sản phẩm
   ═══════════════════════════════════════════════════════════ */

/* Ẩn home-banner-img trên trang WooCommerce (archive, shop, single product) */
.woocommerce-page .home-banner-img,
.post-type-archive-product .home-banner-img,
.woocommerce .home-banner-img,
.tax-product_cat .home-banner-img {
    display: none !important;
}

/* ── Wrapper chính ── */
.cdm-archive-main {
    margin-bottom: 0;
}

.cdm-archive-container {
    padding-top: 0;
}

/* ── Banner ảnh đầu trang (dùng <img> tag) ── */
.cdm-cat-banner {
    width: 100%;
    margin-bottom: 0;
}

.cdm-cat-banner .container {
    padding: 0;
}

.cdm-cat-banner__img {
    display: block;
    width: 100%;
    max-width: 1230px;
    height: auto;
    margin: 0 auto;
}

.cdm-cat-header {
    text-align: center;
    padding: 30px 0px 0px;
    border-bottom: 0;
    margin-bottom: 0;
}

.cdm-cat-title {
    font-size: 32px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0px;
    margin: 0 0 10px;
    line-height: 1.2;
}

.cdm-cat-desc {
    font-size: 17px;
    line-height: 1.2;
    color: #000;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* ── Toolbar: Tabs + Sort ── */
.cdm-cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 18px 0 16px;
    border-bottom: 5px solid #FF9E03;
    margin-bottom: 20px;
}

/* Tabs trong toolbar */
.cdm-archive-tabnav.cdm-ptabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    /* Override margin/border từ cdm-ptabs-nav */
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sort: không bao giờ wrap */
.cdm-cat-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Tabs danh mục cha ── */
.cdm-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cdm-cat-tab {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    background: #f3f4f6;
    border: 1.5px solid #e2e4e8;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cdm-cat-tab:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.cdm-cat-tab.is-active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ── Dropdown sắp xếp ── */
.cdm-cat-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cdm-sort-icon {
    color: #888;
    flex-shrink: 0;
}

.cdm-sort-label {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

.cdm-sort-dropdown {
    position: relative;
}

.cdm-sort-current {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: none !important;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.cdm-sort-current:hover,
.cdm-sort-dropdown.is-open .cdm-sort-current {
    border-color: var(--primary-color);
}

.cdm-sort-list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 190px;
    background: #fff;
    border: 1px solid #dde0e5;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 999;
}

.cdm-sort-dropdown.is-open .cdm-sort-list {
    display: block;
}

.cdm-sort-list li {
    margin: 0;
    padding: 0;
}

.cdm-sort-option {
    display: block;
    padding: 9px 16px;
    font-size: 14px;
    color: #333;
    transition: background 0.15s, color 0.15s;
}

.cdm-sort-option:hover {
    background: #f5f7f5;
    color: var(--primary-color);
}

.cdm-sort-option.is-active {
    color: var(--primary-color);
    font-weight: 500;
    background: #edf5ef;
}

/* ── Phân trang ── */
.cdm-cat-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cdm-cat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    background: #f3f4f6;
    border: 1.5px solid #e2e4e8;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cdm-cat-pagination .page-numbers:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.cdm-cat-pagination .page-numbers.current {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.cdm-cat-pagination .page-numbers.dots {
    background: transparent;
    border: none;
    cursor: default;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .cdm-cat-banner {
        height: 240px;
    }

    .cdm-cat-title {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .cdm-cat-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cdm-cat-sort {
        align-self: flex-end;
    }

    .cdm-cat-banner {
        height: 180px;
    }

    .cdm-cat-title {
        font-size: 18px;
    }

    .cdm-cat-tab {
        font-size: 13px;
        padding: 6px 14px;
    }
}

@media (max-width: 480px) {
    .cdm-cat-banner {
        height: 130px;
    }

    .cdm-cat-header {
        padding: 20px 0 16px;
    }
}

/* ── Mô tả SEO dài dưới phân trang ── */
.cdm-cat-bottom-desc {
    margin-top: 0;
    padding-top: 30px;
    border-top: 5px solid #FF9E03;
    padding-bottom: 15px;
}

.cdm-cat-bottom-desc__inner {
    font-size: 15px;
    line-height: 1.85;
    color: #333;
}

.cdm-cat-bottom-desc__inner h1,
.cdm-cat-bottom-desc__inner h2,
.cdm-cat-bottom-desc__inner h3,
.cdm-cat-bottom-desc__inner h4 {
    color: var(--primary-color);
    font-weight: 500;
    margin: 24px 0 10px;
    line-height: 1.35;
}

.cdm-cat-bottom-desc__inner h2 {
    font-size: 22px;
}

.cdm-cat-bottom-desc__inner h3 {
    font-size: 18px;
}

.cdm-cat-bottom-desc__inner h4 {
    font-size: 16px;
}

.cdm-cat-bottom-desc__inner p {
    margin: 0 0 14px;
}

.cdm-cat-bottom-desc__inner ul,
.cdm-cat-bottom-desc__inner ol {
    padding-left: 22px;
    margin: 0 0 14px;
}

.cdm-cat-bottom-desc__inner li {
    margin-bottom: 6px;
}

.cdm-cat-bottom-desc__inner a {
    color: var(--primary-color);
    text-decoration: underline;
}

.cdm-cat-bottom-desc__inner a:hover {
    color: var(--accent-color);
}

.cdm-cat-bottom-desc__inner img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 10px 0;
}

.cdm-cat-bottom-desc__inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 14px;
}

.cdm-cat-bottom-desc__inner table th,
.cdm-cat-bottom-desc__inner table td {
    border: 1px solid #dde0e5;
    padding: 9px 13px;
    text-align: left;
}

.cdm-cat-bottom-desc__inner table th {
    background: #f5f7f5;
    font-weight: 600;
    color: var(--primary-color);
}

.cdm-cat-bottom-desc__inner blockquote {
    border-left: 4px solid var(--primary-color);
    margin: 16px 0;
    padding: 10px 16px;
    background: #f9faf8;
    color: #555;
    font-style: italic;
}

.cdm-tabs-section::after {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERHAUL — 4 BREAKPOINTS
   BP1: max-width 1229px (min 850px)
   BP2: max-width 849px  (min 550px)
   BP3: max-width 549px  (min 440px)
   BP4: max-width 439px  (min 390px)
═══════════════════════════════════════════════════════════════════ */

/* ── Mobile Header Elements — hidden by default on desktop ── */
.action_mobile_hcdm {
    display: none;
}

.mobile_search_bar_hcdm {
    display: none;
    background: #0f2a1e;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile_search_bar_hcdm.is-open {
    display: block;
}

.mobile_search_form_hcdm {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 8px;
    padding: 4px 10px;
}

.mobile_search_form_hcdm i {
    color: #888;
    flex-shrink: 0;
}

.mobile_search_form_hcdm input[type="search"] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    padding: 7px 4px;
    outline: none;
    color: #333;
}

.mobile_search_form_hcdm button {
    background: var(--primary-color);
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

/* Hamburger button */
.btn_hamburger_hcdm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.btn_hamburger_hcdm span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.btn_hamburger_hcdm.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.btn_hamburger_hcdm.is-open span:nth-child(2) {
    opacity: 0;
}

.btn_hamburger_hcdm.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile search toggle */
.btn_mobile_search_hcdm {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 6px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
}

/* Mobile Nav Drawer */
.mobile_nav_hcdm {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    max-width: 85vw;
    height: 100%;
    background: #163329;
    z-index: 99998;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

.mobile_nav_hcdm.is-open {
    left: 0;
}

.mobile_nav_inner_hcdm {
    padding: 20px 0 40px;
}

.mobile_nav_hcdm .mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile_nav_hcdm .mobile-nav-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile_nav_hcdm .mobile-nav-menu li a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s, padding-left 0.2s;
}

.mobile_nav_hcdm .mobile-nav-menu li a:hover,
.mobile_nav_hcdm .mobile-nav-menu li.current-menu-item>a {
    background: rgba(255, 255, 255, 0.08);
    color: #ffb800;
    padding-left: 28px;
}

.mobile_nav_hcdm .mobile-nav-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.2);
}

.mobile_nav_hcdm .mobile-nav-menu .sub-menu li a {
    padding-left: 32px;
    font-size: 14px;
    text-transform: none;
    font-weight: 400;
}

/* CTA buttons trong mobile nav */
.mobile_nav_cta_hcdm {
    display: flex;
    gap: 10px;
    padding: 20px 20px 0;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile_btn_call_hcdm,
.mobile_btn_zalo_hcdm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
}

.mobile_btn_call_hcdm {
    background: var(--danger-color);
    color: #fff !important;
}

.mobile_btn_zalo_hcdm {
    background: #0068ff;
    color: #fff !important;
}

/* Overlay */
.mobile_nav_overlay_hcdm {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile_nav_overlay_hcdm.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ────────────────────────────────────────── */
/* BP1: max-width 1229px                      */
/* ────────────────────────────────────────── */
@media (max-width: 1229px) {

    .container,
    .container_hcdm {
        padding-left: 20px;
        padding-right: 20px;
    }

    ul.products li.product {
        flex: 0 0 calc(33.333% - 14px);
    }

    .cdm-gallery-col {
        flex: 0 0 48%;
        width: 48%;
    }

    .cdm-info-col {
        flex: 1;
        width: auto;
    }

    .cdm-main-img-wrap {
        flex: 1;
        width: auto;
        height: 450px;
    }

    .cdm-tab-item a {
        font-size: 18px !important;
        padding: 12px 12px !important;
    }

    .cdm-cat-title {
        font-size: 26px;
    }

    .ft-grid {
        gap: 20px;
    }
}

/* ────────────────────────────────────────── */
/* BP2: max-width 849px                       */
/* ────────────────────────────────────────── */
@media (max-width: 849px) {

    .container,
    .container_hcdm {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Header */
    .nav_hcdm,
    .search_box_hcdm,
    .action_desktop_hcdm {
        display: none !important;
    }

    .action_mobile_hcdm {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .main_header_hcdm {
        padding: 10px 0;
    }

    .logo_hcdm img {
        max-height: 46px;
    }

    /* Top bar */
    .top_bar_hcdm {
        padding: 6px 0;
    }

    .top_link_hcdm {
        font-size: 12px;
        gap: 6px;
    }

    /* Product grid */
    ul.products li.product {
        flex: 0 0 calc(50% - 10px);
    }

    ul.products {
        gap: 12px;
    }

    /* Single product */
    .cdm-product-top {
        flex-direction: column;
        gap: 14px;
    }

    .cdm-gallery-col,
    .cdm-info-col {
        flex: unset;
        width: 100%;
    }

    .cdm-gallery-col {
        flex-direction: column-reverse;
    }

    .cdm-main-img-wrap {
        flex: unset;
        width: 100%;
        height: 60vw;
        max-height: 460px;
    }

    .cdm-thumb-strip {
        flex-direction: row;
        flex: unset;
        width: 100%;
        overflow-x: auto;
        max-height: unset;
    }

    .cdm-thumb-btn {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
    }

    .cdm-thumb-wrap {
        flex: unset;
        width: 100%;
    }

    .cdm-tnav-up,
    .cdm-tnav-down {
        display: none !important;
    }

    .cdm-product-title {
        font-size: 22px;
    }

    .cdm-cta {
        font-size: 16px;
        padding: 10px 8px;
    }

    /* Tabs */
    .cdm-tab-item a {
        font-size: 16px !important;
        padding: 10px 10px !important;
    }

    .cdm-tab-content-inner {
        padding: 0 16px;
    }

    /* Archive */
    .cdm-cat-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 0 12px;
    }

    .cdm-cat-sort {
        align-self: flex-end;
    }

    .cdm-cat-title {
        font-size: 20px;
    }

    .cdm-cat-header {
        padding: 20px 0 0;
    }

    .cdm-cat-banner {
        height: 180px;
    }

    /* Footer: 2 col grid */
    .ft-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 20px;
    }

    .ft-col-brand {
        grid-column: 1 / -1;
    }

    .ft-logo {
        max-width: 180px;
        height: auto;
    }

    /* Floating contact */
    .floating-contact {
        top: auto;
        bottom: 16px;
        right: 10px;
        transform: none;
        flex-direction: row;
        gap: 6px;
    }

    .floating-contact a {
        border-radius: 50%;
        width: 44px;
        height: 44px;
    }

    .floating-contact a:hover {
        width: 44px;
    }

    /* Newsletter */
    .nl-inner {
        flex-direction: column;
        gap: 16px;
    }

    .nl-row-top {
        flex-direction: column;
        gap: 8px;
    }

    /* Homepage services */
    .cdm-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cdm-svc-card {
        height: 220px;
    }

    /* Old product wrap */
    .cdm-product-wrap {
        flex-direction: column;
    }

    .cdm-gallery,
    .cdm-summary {
        flex: unset;
        width: 100%;
    }

    /* Bảng giĂ¡ */
    .bg-tabs-wrap {
        padding: 14px 16px 0;
    }

    .cdm-banggia-header {
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Breadcrumb */
    .cdm-breadcrumb {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rank-math-breadcrumb,
    .rank-math-breadcrumb p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }
}

/* ────────────────────────────────────────── */
/* BP3: max-width 549px                       */
/* ────────────────────────────────────────── */
@media (max-width: 549px) {
    body {
        font-size: 15px;
    }

    .container,
    .container_hcdm {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Header */
    .logo_hcdm img {
        max-height: 40px;
    }

    .main_header_hcdm {
        padding: 8px 0;
    }

    .action_mobile_hcdm {
        gap: 6px;
    }

    .btn_hamburger_hcdm,
    .btn_mobile_search_hcdm {
        width: 34px;
        height: 34px;
    }

    /* Top bar */
    .top_bar_hcdm {
        padding: 5px 0;
    }

    .top_link_hcdm {
        font-size: 11px;
        gap: 5px;
    }

    /* Product grid */
    ul.products li.product {
        flex: 0 0 calc(50% - 8px);
    }

    ul.products {
        gap: 10px;
    }

    ul.products li.product a img {
        height: 160px;
    }

    ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
        padding: 8px 8px 4px;
    }

    ul.products li.product .price {
        font-size: 13px;
        padding: 0 8px 6px;
    }

    /* Single product */
    .cdm-product-title {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .cdm-main-img-wrap {
        height: 65vw;
        max-height: 360px;
    }

    .cdm-thumb-btn {
        width: 64px;
        height: 64px;
    }

    .cdm-italic-quote {
        font-size: 14px;
        padding: 10px 12px;
    }

    .cdm-checklist-wrap {
        flex-direction: column;
    }

    .cdm-checklist-col li {
        font-size: 14px;
    }

    /* CTA */
    .cdm-cta-wrap {
        flex-direction: column;
        gap: 8px;
    }

    .cdm-cta {
        font-size: 15px;
        padding: 11px 10px;
        border-radius: 8px;
    }

    /* Lead form */
    .cdm-lead-row2,
    .cdm-lead-row1 {
        flex-direction: column;
        gap: 8px;
    }

    .cdm-lead-intro {
        font-size: 14px;
    }

    /* Tabs */
    .cdm-tab-item a {
        font-size: 14px !important;
        padding: 10px 8px !important;
    }

    .cdm-tab-content-inner {
        font-size: 15px;
        padding: 0 8px;
    }

    .cdm-read-more-btn {
        font-size: 15px;
    }

    /* Archive */
    .cdm-cat-title {
        font-size: 18px;
    }

    .cdm-cat-tab {
        font-size: 12px;
        padding: 6px 12px;
    }

    .cdm-cat-banner {
        height: 130px;
    }

    /* Footer: 1 col */
    .ft-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ft-col-brand {
        grid-column: auto;
    }

    .ft-logo {
        max-width: 160px;
    }

    .ft-col-title {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .ft-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .ft-badges {
        justify-content: center;
    }

    /* Floating */
    .floating-contact {
        bottom: 12px;
        right: 8px;
        gap: 5px;
    }

    .floating-contact a {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Homepage */
    .cdm-services-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cdm-svc-card {
        height: 200px;
    }

    .cdm-svc-card__title {
        font-size: 15px;
    }

    .cdm-services-cta__btn {
        font-size: 14px;
        padding: 10px 24px;
    }

    /* Newsletter */
    .nl-heading {
        font-size: 18px;
    }

    .nl-submit {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Section title */
    .section-title {
        font-size: 18px;
    }

    /* Bảng giĂ¡ */
    .cdm-kho-tab {
        padding: 7px 12px;
        font-size: 12px;
    }

    .bg-header {
        font-size: 13px;
        padding: 9px 14px;
    }

    /* Lightbox */
    .cdm-lb-inner {
        flex-direction: column;
    }

    .cdm-lb-thumbs {
        width: 100%;
        height: 70px;
        max-height: 70px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .cdm-lbt {
        width: 50px;
        height: 66px;
        flex-shrink: 0;
    }

    .cdm-lb-media-wrap {
        width: 100vw;
        height: 56vw;
    }

    .cdm-lb-img {
        object-fit: contain;
    }

    .cdm-lb-caption,
    .cdm-lb-cta-bar {
        width: 100%;
        box-sizing: border-box;
    }

    .cdm-lb-cta {
        font-size: 12px;
        padding: 11px 8px;
    }

    .cdm-lb-prev,
    .cdm-lb-next {
        display: none;
    }

    /* Cam ket */
    .cdm-camket-header strong {
        font-size: 16px;
    }
}

/* ────────────────────────────────────────── */
/* BP4: max-width 439px (390–439px)           */
/* ────────────────────────────────────────── */
@media (max-width: 439px) {
    body {
        font-size: 14px;
    }

    .container,
    .container_hcdm {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Header */
    .logo_hcdm img {
        max-height: 38px;
    }

    .main_header_hcdm {
        padding: 7px 0;
    }

    .btn_hamburger_hcdm,
    .btn_mobile_search_hcdm {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    /* Top bar */
    .top_link_hcdm {
        font-size: 10px;
        gap: 4px;
    }

    .top_bar_hcdm {
        padding: 4px 0;
    }

    /* Product grid */
    ul.products {
        gap: 8px;
    }

    ul.products li.product {
        flex: 0 0 calc(50% - 4px);
    }

    ul.products li.product a img {
        height: 140px;
    }

    ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px;
        padding: 6px 6px 3px;
    }

    ul.products li.product .price {
        font-size: 12px;
        padding: 0 6px 6px;
    }

    ul.products li.product .button {
        margin: 0 6px 8px;
        font-size: 11px;
        padding: 6px;
    }

    /* Single product */
    .cdm-product-title {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .cdm-main-img-wrap {
        height: 72vw;
        max-height: 320px;
    }

    .cdm-thumb-btn {
        width: 56px;
        height: 56px;
    }

    .cdm-italic-quote {
        font-size: 13px;
        padding: 8px 10px;
    }

    .cdm-checklist-col li {
        font-size: 13px;
    }

    .cdm-cta {
        font-size: 14px;
        padding: 10px 8px;
    }

    /* Cam ket */
    .cdm-camket-header strong {
        font-size: 14px;
    }

    .cdm-camket-text strong {
        font-size: 14px;
    }

    .cdm-camket-text small {
        font-size: 12px;
    }

    /* Tabs */
    .cdm-tab-item a {
        font-size: 13px !important;
        padding: 9px 7px !important;
    }

    .cdm-tab-content-inner {
        font-size: 14px;
        padding: 0 6px;
    }

    /* Archive */
    .cdm-cat-title {
        font-size: 16px;
    }

    .cdm-cat-tab {
        font-size: 11px;
        padding: 5px 10px;
    }

    .cdm-cat-banner {
        height: 110px;
    }

    /* Section titles */
    .section-title,
    .cdm-section-heading {
        font-size: 16px;
    }

    /* Footer */
    .ft-grid {
        gap: 16px;
    }

    .ft-logo {
        max-width: 140px;
    }

    .ft-info-list li,
    .ft-link-list li a {
        font-size: 13px;
    }

    /* Floating */
    .floating-contact a {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .floating-contact {
        gap: 4px;
        bottom: 10px;
        right: 6px;
    }

    /* Newsletter */
    .nl-heading {
        font-size: 16px;
    }

    .nl-submit {
        padding: 9px 12px;
        font-size: 13px;
    }

    /* Homepage */
    .cdm-services-cta__btn {
        font-size: 13px;
        padding: 9px 20px;
    }

    /* Lead form */
    .cdm-lead-intro {
        font-size: 13px;
    }

    .cdm-lead-form button[type="submit"] {
        font-size: 13px;
        padding: 9px 12px;
    }

    /* Bảng giĂ¡ */
    .cdm-kho-tab {
        padding: 6px 10px;
        font-size: 11px;
    }

    .bg-header {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Breadcrumb */
    .cdm-breadcrumb,
    .rank-math-breadcrumb,
    .rank-math-breadcrumb p {
        font-size: 11px;
    }

    /* Archive sort */
    .cdm-cat-sort .cdm-sort-label {
        display: none;
    }

    .cdm-sort-current {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FILTER POPUP — cdm-filter-*
   NĂºt bá»™ lọc + popup sheet theo mockup
═══════════════════════════════════════════════════════════════ */

/* ── NĂºt Bá»™ lọc trong toolbar ── */
.cdm-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1.5px solid #e2e4e8;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.cdm-filter-btn:hover,
.cdm-filter-btn[aria-expanded="true"] {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.cdm-filter-btn svg {
    flex-shrink: 0;
}

/* Badge số lượng filter đang active */
.cdm-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: #AF0B0B;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: 50px;
    padding: 0 5px;
    line-height: 1;
}

/* ── Popup wrapper (full-screen fixed) ── */
.cdm-filter-popup {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

.cdm-filter-popup[hidden] {
    display: none;
}

/* Animate in */
.cdm-filter-popup .cdm-filter-sheet {
    transform: translateY(-18px);
    opacity: 0;
    transition: transform 0.26s ease, opacity 0.26s ease;
}

.cdm-filter-popup.is-open .cdm-filter-sheet {
    transform: translateY(0);
    opacity: 1;
}

/* ── Overlay tối ── */
.cdm-filter-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

/* ── Sheet nội dung ── */
.cdm-filter-sheet {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 12px;
    width: 560px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

/* ── Header sheet ── */
.cdm-filter-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.cdm-filter-sheet__head span {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.cdm-filter-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #AF0B0B;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}

.cdm-filter-close:hover {
    opacity: 0.7;
}

/* ── Từng nhĂ³m filter ── */
.cdm-filter-form {
    padding: 0 20px 16px;
}

.cdm-filter-group {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cdm-filter-group:last-of-type {
    border-bottom: none;
}

.cdm-filter-group__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
}

/* ── Chips ── */
.cdm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cdm-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    background: #f3f4f6;
    border: 1.5px solid #e2e4e8;
    cursor: pointer;
    user-select: none;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.cdm-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #f0f8f4;
}

.cdm-chip.is-active {
    border-color: var(--accent-color);
    background: #fff;
    color: #222;
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--accent-color);
}

/* ── Footer actions ── */
.cdm-filter-actions {
    display: flex;
    gap: 10px;
    padding: 16px 0 4px;
    margin-top: 4px;
    border-top: 1px solid #f0f0f0;
}

.cdm-filter-reset {
    flex: 1;
    padding: 11px;
    background: #f3f4f6;
    border: 1.5px solid #e2e4e8;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.cdm-filter-reset:hover {
    background: #e8eaed;
    border-color: #ccc;
}

.cdm-filter-apply {
    flex: 2;
    padding: 11px;
    background: var(--primary-color);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cdm-filter-apply:hover {
    opacity: 0.88;
}

/* ── Responsive ── */
@media (max-width: 549px) {
    .cdm-filter-popup {
        padding-top: 40px;
    }

    .cdm-filter-sheet {
        border-radius: 12px 12px 0 0;
    }

    .cdm-chip {
        font-size: 12px;
        padding: 6px 11px;
    }
}

/* ── Toolbar 2-row layout (tabs top / filter+sort bottom) ── */
.cdm-cat-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 20px;
}

/* Hàng 1: tabs full width - có border dưới nhẹ */
.cdm-toolbar-tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 0 10px;
    border-bottom: 1px solid #e8e8e8;
}

/* Hàng 2: filter btn trái + sort phải */
.cdm-toolbar-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 10px;
}

/* Responsive override for toolbar */
@media (max-width: 849px) {
    .cdm-toolbar-row2 {
        padding: 8px 0;
    }

    .cdm-toolbar-tabs {
        padding: 8px 0;
    }
}

@media (max-width: 549px) {
    .cdm-toolbar-tabs {
        gap: 6px;
        padding: 8px 0 6px;
    }

    .cdm-toolbar-row2 {
        padding: 6px 0;
    }
}


/* ── Toolbar 2-row layout (tabs top / filter+sort bottom) ── */
.cdm-cat-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 20px;
}

.cdm-toolbar-tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
}

.cdm-toolbar-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 10px;
}

@media (max-width: 849px) {
    .cdm-toolbar-tabs {
        padding: 8px 0;
    }

    .cdm-toolbar-row2 {
        padding: 8px 0;
    }
}

@media (max-width: 549px) {
    .cdm-toolbar-tabs {
        gap: 6px;
        padding: 8px 0 6px;
    }

    .cdm-toolbar-row2 {
        padding: 6px 0;
    }
}

/* Fix toolbar row2 full-width */
.cdm-toolbar-row2 {
    width: 100%;
}

.cdm-cat-bottom-desc .cdm-cat-bottom-desc__inner {
    max-height: 100%;
}