/* =========================================================
   DLD - CATEGORY CẨM NANG CHILD
   HERO - FULL RESPONSIVE

   PC      : 400px
   Tablet  : 300px
   Mobile  : tỷ lệ 386 × 150

   PC / Tablet:
   - Breadcrumb
   - H1
   - Description
   - Search
   - Glass Card

   Mobile:
   - Breadcrumb
   - H1
   - Glass Card tự co
   - Ẩn Description + Search
========================================================= */


/* =========================================================
   01. HERO - DESKTOP
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-hero {
    position: relative;

    width: 100%;
    height: 400px;
    min-height: 400px;

    overflow: hidden;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-hero > .section-content {
    position: relative;
    z-index: 2;

    height: 100%;

    display: flex;
    align-items: center;
}


/* =========================================================
   03. ROW
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-hero-row {
    width: 100%;

    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================================
   04. COLUMN
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-hero-row > .col {
    padding-top: 0;
    padding-bottom: 0;
}


/* =========================================================
   05. GLASS CARD - DESKTOP
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-hero-row > .col > .col-inner {
    display: inline-block;

    width: auto;
    max-width: 720px;

    height: auto;
    min-height: 0;

    padding: 22px 26px 24px;

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.68);

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    box-shadow:
        0 8px 28px rgba(28, 36, 115, 0.10);
}


/* =========================================================
   06. DỌN MARGIN / PADDING FLATSOME
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-hero-row .text {
    margin-top: 0;
    margin-bottom: 0;
}


.dld-category-camnang-child
.dld-camnang-child-hero-row .text > p {
    margin: 0;
    padding: 0;
}


.dld-category-camnang-child
.dld-camnang-child-hero-row .text > p:empty {
    display: none;
}


/* =========================================================
   07. BREADCRUMB
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    width: auto;

    margin: 0 0 12px;
    padding: 0;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;

    color: #1C2473;
}


/* Link */
.dld-category-camnang-child
.dld-camnang-child-breadcrumb a {
    color: #1C2473;
    text-decoration: none;

    transition: color 0.2s ease;
}


.dld-category-camnang-child
.dld-camnang-child-breadcrumb a:hover {
    color: #EE2D38;
}


/* Dấu › */
.dld-category-camnang-child
.dld-camnang-child-breadcrumb-separator {
    display: inline-block;

    margin: 0 7px;

    font-size: 15px;
    line-height: 1;
    font-weight: 400;

    color: rgba(28, 36, 115, 0.55);
}


/* Category hiện tại */
.dld-category-camnang-child
.dld-camnang-child-breadcrumb > span:last-child {
    color: #555;
}


/* =========================================================
   08. H1
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-title {
    margin: 0;
    padding: 0;

    line-height: 1;
    font-weight: 800;

    letter-spacing: -0.5px;
}


/* ---------------------------------------------------------
   H1 - DÒNG 1
   "Cẩm nang du lịch"
--------------------------------------------------------- */

.dld-category-camnang-child
.dld-camnang-child-title-label {
    display: block;

    margin: 0 0 3px;
    padding: 0;

    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;

    color: #1C2473;
}


/* ---------------------------------------------------------
   H1 - DÒNG 2
   Nha Trang / Đà Lạt / Phú Quốc...
--------------------------------------------------------- */

.dld-category-camnang-child
.dld-camnang-child-title-name {
    display: block;

    margin: 0;
    padding: 0;

    font-size: 48px;
    line-height: 1.05;
    font-weight: 800;

    color: #EE2D38;
}


/* =========================================================
   09. DESCRIPTION

   Quan trọng:
   Khoảng cách H1 → Description được tạo ở đây,
   KHÔNG margin-bottom vào .dld-camnang-child-title
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-description {
    width: 100%;
    max-width: 650px;

    /* top = cách H1
       bottom = cách Search */
    margin: 14px 0 20px;
    padding: 0;

    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;

    color: #333;
}


.dld-category-camnang-child
.dld-camnang-child-description p {
    margin: 0;
    padding: 0;
}


/* =========================================================
   11. TABLET
   550px → 849px

   Hero thu từ 400px → 300px
========================================================= */

@media (min-width: 550px) and (max-width: 849px) {

    /* =====================================================
       HERO
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero {
        height: 300px;
        min-height: 300px;

        background-size: cover;
        background-position: center center;
    }


    /* =====================================================
       GLASS CARD
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero-row > .col > .col-inner {
        max-width: 600px;

        padding: 14px 18px 16px;

        border-radius: 16px;

        background: rgba(255, 255, 255, 0.70);

        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);

        box-shadow:
            0 6px 20px rgba(28, 36, 115, 0.09);
    }


    /* =====================================================
       BREADCRUMB
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-breadcrumb {
        margin-bottom: 8px;

        font-size: 11px;
        line-height: 1.3;
    }


    .dld-category-camnang-child
    .dld-camnang-child-breadcrumb-separator {
        margin-left: 5px;
        margin-right: 5px;

        font-size: 11px;
    }


    /* =====================================================
       H1
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-title {
        margin: 0;
        padding: 0;
    }


    .dld-category-camnang-child
    .dld-camnang-child-title-label {
        margin-bottom: 2px;

        font-size: 24px;
        line-height: 1.08;
    }


    .dld-category-camnang-child
    .dld-camnang-child-title-name {
        font-size: 36px;
        line-height: 1.05;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-description {
        max-width: 540px;

        /* H1 → description = 10px
           description → search = 14px */
        margin: 10px 0 14px;

        font-size: 13px;
        line-height: 1.45;
    }


    /* =====================================================
       SEARCH
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-search {
        max-width: 480px;
    }

}


/* =========================================================
   12. MOBILE
   <= 549px

   Hero theo tỷ lệ 386 × 150

   Hiện:
   - Breadcrumb
   - H1

   Ẩn:
   - Description
   - Search
========================================================= */

@media (max-width: 549px) {

    /* =====================================================
       HERO
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero {
        width: 100%;

        height: auto;
        min-height: 0;

        aspect-ratio: 386 / 150;

        overflow: hidden;

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }


    /* =====================================================
       SECTION CONTENT
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero > .section-content {
        height: 100%;

        display: flex;
        align-items: center;
    }


    /* =====================================================
       ROW
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero-row {
        width: 100%;

        margin-top: 0;
        margin-bottom: 0;
    }


    /* =====================================================
       COLUMN
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero-row > .col {
        padding-top: 0;
        padding-bottom: 0;
    }


    /* =====================================================
       GLASS CARD MOBILE
       Tự co ngang + dọc theo nội dung
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero-row > .col > .col-inner {
        display: inline-block;

        width: fit-content !important;
        max-width: calc(100vw - 40px) !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 9px 14px 10px !important;

        border: 1px solid rgba(255, 255, 255, 0.88);
        border-radius: 12px;

        background: rgba(255, 255, 255, 0.72);

        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);

        box-shadow:
            0 4px 14px rgba(28, 36, 115, 0.08);
    }


/* =====================================================
       ẨN DESCRIPTION + DLD BLOG SEARCH
       Mobile Hero Child chỉ giữ Breadcrumb + H1
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-description,

    .dld-category-camnang-child
    .text.dld-camnang-child-description,

    .dld-category-camnang-child
    .dld-camnang-child-hero
    .dld-blog-search {
        display: none !important;
    }

    /* =====================================================
       DỌN FLATSOME
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-hero-row .text {
        margin: 0 !important;
        padding: 0 !important;
    }


    .dld-category-camnang-child
    .dld-camnang-child-hero-row .text > p {
        margin: 0 !important;
        padding: 0 !important;
    }


    .dld-category-camnang-child
    .dld-camnang-child-hero-row .text > p:empty {
        display: none !important;
    }


    /* =====================================================
       BREADCRUMB
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-breadcrumb {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;

        width: auto !important;

        margin: 0 0 5px !important;
        padding: 0 !important;

        font-size: 9px;
        line-height: 1.15;
        font-weight: 500;

        white-space: nowrap;

        color: #1C2473;
    }


    .dld-category-camnang-child
    .dld-camnang-child-breadcrumb a,

    .dld-category-camnang-child
    .dld-camnang-child-breadcrumb > span:last-child {
        color: #1C2473;

        white-space: nowrap;
    }


    /* Dấu › */
    .dld-category-camnang-child
    .dld-camnang-child-breadcrumb-separator {
        flex: 0 0 auto;

        margin: 0 4px;

        font-size: 9px;
        line-height: 1;

        color: rgba(28, 36, 115, 0.55);
    }


    /* =====================================================
       H1
    ===================================================== */

    .dld-category-camnang-child
    .dld-camnang-child-title {
        margin: 0 !important;
        padding: 0 !important;

        line-height: 1;
        letter-spacing: -0.15px;
    }


    /* -----------------------------------------------------
       H1 - DÒNG 1
    ----------------------------------------------------- */

    .dld-category-camnang-child
    .dld-camnang-child-title-label {
        display: block;

        margin: 0 0 2px !important;
        padding: 0;

        font-size: 15px;
        line-height: 1.05;
        font-weight: 700;

        white-space: nowrap;

        color: #1C2473;
    }


    /* -----------------------------------------------------
       H1 - DÒNG 2
    ----------------------------------------------------- */

    .dld-category-camnang-child
    .dld-camnang-child-title-name {
        display: block;

        margin: 0 !important;
        padding: 0;

        font-size: 25px;
        line-height: 1.05;
        font-weight: 800;

        white-space: nowrap;

        color: #EE2D38;
    }

}


/* =========================================================
   02. EXPLORE
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-explore {
    padding: 42px 0 46px;
    background: #fff;
}


/* =========================================================
   EXPLORE - TITLE
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-explore-title {
    margin: 0 0 22px;
}

.dld-category-camnang-child
.dld-camnang-child-explore-title h2,
.dld-category-camnang-child
.dld-camnang-child-explore-title p {
    margin: 0;
}


/* =========================================================
   A. CARD ĐỊA ĐIỂM
   PC: 6 CARD
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-destination-list {
    display: flex;
    flex-wrap: wrap;

    width: 100%;
    margin: 0;
    padding: 0;

    gap: 12px;
}


.dld-category-camnang-child
.dld-camnang-child-destination-card {
    position: relative;
    display: block;

    flex: 0 0 calc((100% - 60px) / 6);
    width: calc((100% - 60px) / 6);
    max-width: calc((100% - 60px) / 6);

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 12px;
    background: #f2f2f2;

    text-decoration: none !important;

    transform: translateZ(0);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* ẢNH */

.dld-category-camnang-child
.dld-camnang-child-destination-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.dld-category-camnang-child
.dld-camnang-child-destination-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center;

    transition: transform 0.4s ease;
}


/* PLACEHOLDER */

.dld-category-camnang-child
.dld-camnang-child-destination-placeholder {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        145deg,
        #1C2473 0%,
        #303b9f 100%
    );
}


/* OVERLAY */

.dld-category-camnang-child
.dld-camnang-child-destination-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.42) 28%,
        rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0) 75%
    );

    pointer-events: none;
}


/* CONTENT */

.dld-category-camnang-child
.dld-camnang-child-destination-content {
    position: absolute;
    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 8px;
    padding: 12px;
}


.dld-category-camnang-child
.dld-camnang-child-destination-info {
    flex: 1 1 auto;
    min-width: 0;
}


.dld-category-camnang-child
.dld-camnang-child-destination-name {
    margin: 0 0 2px !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}


.dld-category-camnang-child
.dld-camnang-child-destination-count {
    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.92);

    font-size: 12px;
    line-height: 1.3;

    white-space: nowrap;
}


/* ARROW */

.dld-category-camnang-child
.dld-camnang-child-destination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #fff;
    color: #1C2473;

    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   B. CARD ICON CHỦ ĐỀ
   PC: 8 CARD
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-topic-list {
    display: flex;
    flex-wrap: wrap;

    width: 100%;
    margin: 0;
    padding: 0;

    gap: 10px;
}


.dld-category-camnang-child
.dld-camnang-child-topic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex: 0 0 calc((100% - 70px) / 8);
    width: calc((100% - 70px) / 8);
    max-width: calc((100% - 70px) / 8);

    min-height: 150px;

    padding: 14px 8px;

    border: 1px solid #dce3ef;
    border-radius: 12px;

    background: #f7f9fc;

    text-align: center;
    text-decoration: none !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* ICON */

.dld-category-camnang-child
.dld-camnang-child-topic-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 52px;

    margin: 0 0 8px;

    font-size: 42px;
    line-height: 1;
}


/* TÊN */

.dld-category-camnang-child
.dld-camnang-child-topic-name {
    display: block;

    margin: 0 0 5px;

    color: #1C2473;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}


/* SỐ BÀI */

.dld-category-camnang-child
.dld-camnang-child-topic-count {
    display: block;

    color: #8b91a8;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .dld-category-camnang-child
    .dld-camnang-child-destination-card:hover,

    .dld-category-camnang-child
    .dld-camnang-child-topic-card:hover {
        transform: translateY(-3px);

        box-shadow:
            0 8px 22px rgba(28, 36, 115, 0.13);
    }


    .dld-category-camnang-child
    .dld-camnang-child-destination-card:hover
    .dld-camnang-child-destination-image {
        transform: scale(1.05);
    }


    .dld-category-camnang-child
    .dld-camnang-child-destination-card:hover
    .dld-camnang-child-destination-arrow {
        background: #EE2D38;
        color: #fff;

        transform: translateX(2px);
    }


    .dld-category-camnang-child
    .dld-camnang-child-topic-card:hover {
        border-color: rgba(28, 36, 115, 0.25);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 550px) and (max-width: 1024px) {

    .dld-category-camnang-child
    .dld-camnang-child-explore {
        padding: 34px 0 38px;
    }


    /* Địa điểm: 3 card */

    .dld-category-camnang-child
    .dld-camnang-child-destination-card {
        flex: 0 0 calc((100% - 24px) / 3);
        width: calc((100% - 24px) / 3);
        max-width: calc((100% - 24px) / 3);
    }


    /* Chủ đề: 4 card */

    .dld-category-camnang-child
    .dld-camnang-child-topic-card {
        flex: 0 0 calc((100% - 30px) / 4);
        width: calc((100% - 30px) / 4);
        max-width: calc((100% - 30px) / 4);

        min-height: 140px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 549px) {

    .dld-category-camnang-child
    .dld-camnang-child-explore {
        padding: 26px 0 30px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-explore-title {
        margin-bottom: 16px;
    }


    /* -----------------------------------------
       ĐỊA ĐIỂM
       2 card / hàng
    ----------------------------------------- */

    .dld-category-camnang-child
    .dld-camnang-child-destination-list {
        gap: 10px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-destination-card {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);

        border-radius: 10px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-destination-content {
        gap: 5px;
        padding: 10px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-destination-name {
        font-size: 15px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-destination-count {
        font-size: 11px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-destination-arrow {
        flex: 0 0 28px;

        width: 28px;
        height: 28px;

        font-size: 14px;
    }


    /* -----------------------------------------
       CHỦ ĐỀ
       2 card / hàng
    ----------------------------------------- */

    .dld-category-camnang-child
    .dld-camnang-child-topic-list {
        gap: 10px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-topic-card {
        flex: 0 0 calc((100% - 10px) / 2);
        width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);

        min-height: 125px;

        padding: 12px 8px;

        border-radius: 10px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-topic-icon {
        height: 45px;

        margin-bottom: 6px;

        font-size: 36px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-topic-name {
        margin-bottom: 3px;

        font-size: 14px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-topic-count {
        font-size: 11px;
    }

}

/* =========================================================
   02 + 03. HEADING CHUNG
   EXPLORE + FEATURED
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-section-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;
    margin: 0 0 20px;
}


/* =========================================================
   ICON
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-section-heading-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    color: #1C2473;
}


.dld-category-camnang-child
.dld-camnang-child-section-heading-icon svg {
    display: block;

    width: 40px;
    height: 40px;
}


/* Gạch đỏ dưới icon */

.dld-category-camnang-child
.dld-camnang-child-section-heading-icon::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -1px;

    width: 30px;
    height: 2px;

    border-radius: 999px;

    background: #EE2D38;

    transform: translateX(-50%);
}


/* =========================================================
   CONTENT
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-section-heading-content {
    flex: 1 1 auto;
    min-width: 0;
}


/* =========================================================
   TITLE
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-section-heading-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 6px;

    margin: 0 0 4px !important;
    padding: 0 !important;

    font-size: 27px;
    line-height: 1.15;
    font-weight: 700;

    letter-spacing: -0.3px;
}


.dld-category-camnang-child
.dld-camnang-child-section-heading-title span {
    color: #1C2473;
}


.dld-category-camnang-child
.dld-camnang-child-section-heading-title strong {
    color: #EE2D38;

    font-weight: 700;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-section-heading-desc {
    margin: 0 !important;
    padding: 0 !important;

    color: #6f7485;

    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 550px) and (max-width: 849px) {

    .dld-category-camnang-child
    .dld-camnang-child-section-heading {
        gap: 10px;

        margin-bottom: 18px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-section-heading-icon {
        flex-basis: 44px;

        width: 44px;
        height: 44px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-section-heading-icon svg {
        width: 36px;
        height: 36px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-section-heading-icon::after {
        width: 27px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-section-heading-title {
        gap: 5px;

        margin-bottom: 3px !important;

        font-size: 24px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-section-heading-desc {
        font-size: 12.5px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 549px) {

    .dld-category-camnang-child
    .dld-camnang-child-section-heading {
        align-items: center;

        gap: 8px;

        margin-bottom: 15px;
    }


    /* ICON */

    .dld-category-camnang-child
    .dld-camnang-child-section-heading-icon {
        flex: 0 0 36px;

        width: 36px;
        height: 36px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-section-heading-icon svg {
        width: 30px;
        height: 30px;
    }


    .dld-category-camnang-child
    .dld-camnang-child-section-heading-icon::after {
        width: 22px;
    }


    /* TITLE */

    .dld-category-camnang-child
    .dld-camnang-child-section-heading-title {
        gap: 4px;

        margin-bottom: 2px !important;

        font-size: 20px;
        line-height: 1.2;

        letter-spacing: -0.15px;
    }


    /* DESCRIPTION */

    .dld-category-camnang-child
    .dld-camnang-child-section-heading-desc {
        font-size: 11px;
        line-height: 1.35;
    }

}


.dld-category-camnang-child
.dld-camnang-child-explore {
    padding-bottom: 0px !important;
}

.dld-category-camnang-child
.dld-camnang-child-featured {
    padding-top: 0px !important;
}

/* =========================================================
   SECTION 4 - TẤT CẢ BÀI VIẾT
========================================================= */


/* =========================================================
   01. ROW / FLATSOME CLEANUP
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-posts-row {
	width: 100%;

	margin-top: 0;
	margin-bottom: 0;
}


/* Column */

.dld-category-camnang-child
.dld-camnang-child-posts-row
> .col {
	padding-top: 0;
	padding-bottom: 0;
}


/* Col inner */

.dld-category-camnang-child
.dld-camnang-child-posts-row
> .col
> .col-inner {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
}


/* Text element của Flatsome */

.dld-category-camnang-child
.dld-camnang-child-posts-row
.text {
	margin: 0 !important;
	padding: 0 !important;
}


/* Paragraph Flatsome tự sinh */

.dld-category-camnang-child
.dld-camnang-child-posts-row
.text > p {
	margin: 0 !important;
	padding: 0 !important;
}


.dld-category-camnang-child
.dld-camnang-child-posts-row
.text > p:empty {
	display: none !important;
}


/* =========================================================
   02. HEADING
   Dùng hệ heading chung Section 2 / 3 / 4
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-posts-row
.dld-camnang-child-section-heading {
	margin-bottom: 20px;
}


/* =========================================================
   03. POSTS WRAPPER
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-posts {
	width: 100%;

	margin: 0;
	padding: 0;
}


/* =========================================================
   04. POSTS LIST
   DESKTOP: 4 CARD / HÀNG
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-posts-list {
	display: flex;
	flex-wrap: wrap;

	width: 100%;

	margin: 0;
	padding: 0;

	gap: 28px 20px;
}


/* =========================================================
   05. CARD
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-card {
	flex: 0 0 calc((100% - 60px) / 4);

	width: calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);

	margin: 0;
	padding: 0;

	background: #fff;

	border: 1px solid #EEF0F4;
	border-radius: 16px;

	overflow: hidden;

	box-shadow:
		0 4px 14px rgba(28, 36, 115, 0.06);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}


.dld-category-camnang-child
.dld-camnang-child-post-card:hover {
	transform: translateY(-4px);

	border-color: rgba(28, 36, 115, 0.12);

	box-shadow:
		0 12px 28px rgba(28, 36, 115, 0.11);
}


/* =========================================================
   06. CARD LINK
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-link {
	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	color: inherit;
	text-decoration: none;
}


/* =========================================================
   07. IMAGE
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-image {
	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #F4F5F7;
}


.dld-category-camnang-child
.dld-camnang-child-post-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.35s ease;
}


.dld-category-camnang-child
.dld-camnang-child-post-link:hover
.dld-camnang-child-post-image img {
	transform: scale(1.04);
}


/* Không có ảnh */

.dld-category-camnang-child
.dld-camnang-child-post-no-image {
	width: 100%;
	height: 100%;

	background: #F3F4F6;
}


/* =========================================================
   08. CONTENT
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-content {
	display: flex;
	flex-direction: column;

	flex: 1;

	padding: 14px 16px 16px;
}


/* =========================================================
   09. CATEGORY
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-category {
	position: relative;

	display: block;

	margin: 0 0 10px;
	padding-left: 12px;

	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;

	color: #687083;

	text-transform: uppercase;
	letter-spacing: 0.15px;
}


/* Vạch đỏ */

.dld-category-camnang-child
.dld-camnang-child-post-category::before {
	content: "";

	position: absolute;

	left: 0;
	top: 1px;

	width: 4px;
	height: 15px;

	border-radius: 99px;

	background: #EE2D38;
}


/* =========================================================
   10. TITLE
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-title {
	display: -webkit-box;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;

	min-height: 48px;

	margin: 0 0 9px;

	font-size: 18px;
	font-weight: 600;
	line-height: 1.32;

	color: #1C2473;

	transition:
		color 0.2s ease;
}


.dld-category-camnang-child
.dld-camnang-child-post-link:hover
.dld-camnang-child-post-title {
	color: #EE2D38;
}


/* =========================================================
   11. EXCERPT
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-excerpt {
	display: -webkit-box;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;

	margin: 0 0 14px;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;

	color: #697386;
}


/* =========================================================
   12. META
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-meta {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 12px;

	width: 100%;

	margin-top: auto;
	padding-top: 4px;
}


/* Date */

.dld-category-camnang-child
.dld-camnang-child-post-date {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;

	color: #9AA1AF;
}


/* =========================================================
   13. XEM THÊM
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-post-more {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	flex-shrink: 0;

	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;

	color: #EE2D38;
}


.dld-category-camnang-child
.dld-camnang-child-post-more-text {
	padding-bottom: 2px;

	border-bottom:
		1px dotted rgba(238, 45, 56, 0.65);
}


.dld-category-camnang-child
.dld-camnang-child-post-more-arrow {
	display: inline-block;

	font-size: 17px;
	line-height: 1;

	transition:
		transform 0.2s ease;
}


.dld-category-camnang-child
.dld-camnang-child-post-link:hover
.dld-camnang-child-post-more-arrow {
	transform: translateX(4px);
}


/* =========================================================
   14. PAGINATION
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-pagination {
	display: flex;

	justify-content: center;

	width: 100%;

	margin-top: 42px;
}


.dld-category-camnang-child
.dld-camnang-child-pagination
ul.page-numbers {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 7px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.dld-category-camnang-child
.dld-camnang-child-pagination
li {
	margin: 0;
}


.dld-category-camnang-child
.dld-camnang-child-pagination
.page-numbers a,

.dld-category-camnang-child
.dld-camnang-child-pagination
.page-numbers span {
	display: flex;

	align-items: center;
	justify-content: center;

	min-width: 38px;
	height: 38px;

	padding: 0 10px;

	background: #fff;

	border: 1px solid #E5E7EB;
	border-radius: 9px;

	font-size: 14px;
	font-weight: 600;
	line-height: 1;

	color: #1C2473;

	text-decoration: none;

	transition:
		color 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease;
}


.dld-category-camnang-child
.dld-camnang-child-pagination
.page-numbers a:hover {
	color: #EE2D38;

	border-color: #EE2D38;
}


.dld-category-camnang-child
.dld-camnang-child-pagination
.page-numbers .current {
	color: #fff;

	background: #1C2473;
	border-color: #1C2473;
}


/* =========================================================
   15. EMPTY
========================================================= */

.dld-category-camnang-child
.dld-camnang-child-posts-empty {
	padding: 30px 20px;

	background: #F7F8FA;

	border-radius: 14px;

	text-align: center;

	font-size: 15px;
	line-height: 1.6;

	color: #6B7280;
}


/* =========================================================
   TABLET
   550px - 849px
   2 CARD / HÀNG
========================================================= */

@media (min-width: 550px) and (max-width: 849px) {

	/* Heading */

	.dld-category-camnang-child
	.dld-camnang-child-posts-row
	.dld-camnang-child-section-heading {
		margin-bottom: 18px;
	}


	/* List */

	.dld-category-camnang-child
	.dld-camnang-child-posts-list {
		gap: 24px 18px;
	}


	/* Card */

	.dld-category-camnang-child
	.dld-camnang-child-post-card {
		flex: 0 0 calc((100% - 18px) / 2);

		width: calc((100% - 18px) / 2);
		max-width: calc((100% - 18px) / 2);
	}


	/* Content */

	.dld-category-camnang-child
	.dld-camnang-child-post-content {
		padding: 13px 14px 15px;
	}


	/* Title */

	.dld-category-camnang-child
	.dld-camnang-child-post-title {
		min-height: 45px;

		font-size: 17px;
	}

}


/* =========================================================
   MOBILE
   <= 549px

   SECTION 4:
   - 5 bài / trang do PHP xử lý
   - Card ngang
   - Ảnh 120 x 90
   - Ẩn excerpt
   - Ẩn Xem thêm
========================================================= */

@media (max-width: 549px) {


	/* =====================================================
	   01. HEADING
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-posts-row
	.dld-camnang-child-section-heading {
		margin-bottom: 16px;
	}


	/* =====================================================
	   02. LIST
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-posts-list {
		display: flex;
		flex-direction: column;

		gap: 0;

		width: 100%;

		margin: 0;
		padding: 0;
	}


	/* =====================================================
	   03. CARD
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-card {
		flex: none;

		width: 100%;
		max-width: none;

		margin: 0;
		padding: 0;

		background: transparent;

		border: 0;
		border-bottom: 1px solid #E8EAF0;
		border-radius: 0;

		box-shadow: none;

		overflow: visible;
	}


	.dld-category-camnang-child
	.dld-camnang-child-post-card:last-child {
		border-bottom: 0;
	}


	.dld-category-camnang-child
	.dld-camnang-child-post-card:hover {
		transform: none;

		border-color: #E8EAF0;

		box-shadow: none;
	}


	/* =====================================================
	   04. LINK
	   ẢNH TRÁI + NỘI DUNG PHẢI
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-link {
		display: flex;
		flex-direction: row;
		align-items: center;

		gap: 12px;

		width: 100%;
		height: auto;

		padding: 12px 0;

		color: inherit;
		text-decoration: none;
	}


	/* =====================================================
	   05. IMAGE
	   120 x 90
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-image {
		flex: 0 0 120px;

		width: 120px;
		height: 90px;

		aspect-ratio: auto;

		border-radius: 10px;

		overflow: hidden;

		background: #F4F5F7;
	}


	.dld-category-camnang-child
	.dld-camnang-child-post-image img {
		display: block;

		width: 100%;
		height: 100%;

		object-fit: cover;

		transform: none !important;
	}


	/* =====================================================
	   06. CONTENT
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-content {
		display: flex;
		flex-direction: column;

		flex: 1 1 auto;

		min-width: 0;
		height: 90px;

		padding: 0;
	}


	/* =====================================================
	   07. BADGE
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-category {
		position: relative;

		display: -webkit-box;

		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;

		overflow: hidden;

		margin: 0 0 5px;
		padding-left: 9px;

		font-size: 10px;
		font-weight: 600;
		line-height: 1.25;

		color: #EE2D38;

		text-transform: uppercase;
		letter-spacing: 0.1px;
	}


	.dld-category-camnang-child
	.dld-camnang-child-post-category::before {
		top: 0;

		width: 3px;
		height: 12px;

		background: #EE2D38;
	}


	/* =====================================================
	   08. TITLE
	   Tối đa 3 dòng
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-title {
		display: -webkit-box;

		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;

		overflow: hidden;

		min-height: 0;

		margin: 0;

		font-size: 14px;
		font-weight: 600;
		line-height: 1.28;

		color: #1C2473;
	}


	.dld-category-camnang-child
	.dld-camnang-child-post-link:hover
	.dld-camnang-child-post-title {
		color: #1C2473;
	}


	/* =====================================================
	   09. EXCERPT
	   Mobile không hiển thị
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-excerpt {
		display: none;
	}


	/* =====================================================
	   10. META
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-post-meta {
		display: flex;
		align-items: center;

		width: 100%;

		margin-top: auto;
		padding: 0;
	}


	/* DATE */

	.dld-category-camnang-child
	.dld-camnang-child-post-date {
		font-size: 11px;
		font-weight: 400;
		line-height: 1.3;

		color: #9AA1AF;
	}


	/* =====================================================
   11. XEM THÊM
    ===================================================== */
    
    .dld-category-camnang-child
    .dld-camnang-child-post-more {
    	display: inline-flex;
    	align-items: center;
    
    	gap: 4px;
    
    	margin-left: auto;
    	flex-shrink: 0;
    
    	font-size: 11px;
    	font-weight: 500;
    	line-height: 1.3;
    
    	color: #EE2D38;
    }
    
    
    .dld-category-camnang-child
    .dld-camnang-child-post-more-text {
    	padding-bottom: 1px;
    
    	border-bottom:
    		1px dotted rgba(238, 45, 56, 0.55);
    }
    
    
    .dld-category-camnang-child
    .dld-camnang-child-post-more-arrow {
    	display: inline-block;
    
    	font-size: 12px;
    	line-height: 1;
    }


	/* =====================================================
	   12. PAGINATION
	===================================================== */

	.dld-category-camnang-child
	.dld-camnang-child-pagination {
		margin-top: 24px;
	}


	.dld-category-camnang-child
	.dld-camnang-child-pagination
	ul.page-numbers {
		gap: 5px;
	}


	.dld-category-camnang-child
	.dld-camnang-child-pagination
	.page-numbers a,

	.dld-category-camnang-child
	.dld-camnang-child-pagination
	.page-numbers span {
		min-width: 34px;
		height: 34px;

		padding: 0 8px;

		border-radius: 8px;

		font-size: 13px;
	}

}
