/**
 * Theme Name: BV Nguyễn Trãi
 * Description: BV Nguyễn Trãi
 * Author: 123Web Themes
 * Template: blocksy
 * Text Domain: blocksy
 */
/* Ẩn toàn bộ hero-section ở trang chủ */
.home .hero-section {
    display: none !important;
}

/* Nền mobile menu (offcanvas) */
[data-header*="type-1"] #offcanvas .ct-panel-inner {
    background-color: #ffffff !important;
    /* đổi màu tại đây */
}

/* Icon nút đóng (X) mobile menu Blocksy */
.ct-panel-actions .ct-toggle-close svg {
    width: 24px;
    /* tăng kích thước */
    height: 24px;
    fill: #000000;
    /* màu đen */
}

/* Trang chủ */
/* Bỏ đường kẻ giữa title & content khi mở */
.e-n-accordion-item[open]>summary {
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

}

/* Bỏ border của vùng content */
.e-n-accordion-item>summary+div {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* =========================
   HEADER: TITLE + MORE
========================= */

.bv-news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.bv-news-title {
    font-size: 28px;
    font-weight: 400;
    color: #111;
    margin: 0;
    line-height: 1.3;
}

.bv-news-more {
    font-size: 16px;
    font-weight: 500;
    color: #1e73be;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bv-news-more:hover {
    text-decoration: underline;
}


/* =========================
   GRID 2 BÀI VIẾT
========================= */
.bv-two-news {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}


/* =========================
   ITEM
========================= */
.bv-news-item {
    position: relative;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}


/* =========================
   IMAGE
========================= */
.bv-thumb,
.bv-thumb img {
    width: 100%;
    height: 100%;
    display: block;
}

.bv-thumb img {
    object-fit: cover;
    transition: transform 0.5s ease;
}


/* =========================
   OVERLAY GRADIENT
========================= */
.bv-news-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.45) 45%,
            rgba(0, 0, 0, 0.15) 100%);
    z-index: 1;
}


/* =========================
   HOVER
========================= */
.bv-news-item:hover img {
    transform: scale(1.06);
}


/* =========================
   CONTENT
========================= */
.bv-content {
    position: absolute;
    left: 24px;
    bottom: 24px;
    right: 24px;
    z-index: 2;
    color: #fff;
}


/* =========================
   TITLE
========================= */
.bv-title a {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

.bv-title a:hover {
    text-decoration: underline;
}


/* =========================
   EXCERPT
========================= */
.bv-excerpt {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.95;
    margin-bottom: 12px;
    max-width: 85%;
}


/* =========================
   META
========================= */
.bv-meta {
    font-size: 13px;
    opacity: 0.9;
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
    .bv-news-item {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .bv-two-news {
        grid-template-columns: 1fr;
    }

    .bv-news-item {
        height: 280px;
    }

    .bv-excerpt {
        max-width: 100%;
    }
}

/* =========================
   MOBILE OPTIMIZATION
========================= */
@media (max-width: 768px) {

    /* header */
    .bv-news-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .bv-news-title {
        font-size: 18px;
    }

    .bv-news-more {
        font-size: 13px;
    }

    /* item */
    .bv-news-item {
        height: 220px;
        border-radius: 14px;
    }

    /* overlay đậm hơn ở đáy */
    .bv-news-item::after {
        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.05) 0%,
                rgba(0, 0, 0, 0.75) 85%);
    }

    /* content */
    .bv-content {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    /* title */
    .bv-title a {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 6px;

        /* chỉ 2 dòng */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* meta */
    .bv-meta {
        font-size: 12px;
        opacity: 0.85;
    }
}

.bv-title a:hover {
    text-decoration: none !important;
}

/* 1 post lớn và các post nhỏ  */
/* ===============================
   WRAPPER
================================ */
.post-card-box {
    width: 100%;
}

/* ===============================
   HEADER
================================ */
.post-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.post-card-line {
    width: 4px;
    height: 30px;
    background: #16a34a;
    border-radius: 2px;
}

.post-card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
}

/* ===============================
   BODY
================================ */
.post-card-body {
    display: flex;
    flex-direction: column;
}

/* ===============================
   FEATURE POST (ẢNH LỚN)
================================ */
.post-card-feature {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    text-decoration: none;
    margin-bottom: 25px;
}

/* Ảnh lớn */
.post-card-feature .post-card-thumb img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    transition: transform .45s ease;
}

/* Hover nhẹ – KHÔNG lỗi */
.post-card-feature:hover .post-card-thumb img {
    transform: scale(1.04);
}

/* Overlay */
.post-card-overlay {
    position: absolute;
    inset: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .65),
            rgba(0, 0, 0, .35),
            transparent);
}

.post-card-overlay h4 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* SỐ DÒNG */
    -webkit-box-orient: vertical;
    overflow: hidden;

}

.post-card-overlay span {
    font-size: 14px;
    color: #e5e7eb;
}

/* ===============================
   POST ITEM NHỎ
   → CHỈ GẠCH DƯỚI
================================ */
.post-card-item {
    display: flex;
    gap: 12px;
    /*     align-items: center; */
    text-decoration: none;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eef2f7;
}

.post-card-item .post-card-item-thumb img {
    width: 121px;
    height: 106px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.post-card-item-content {
    flex: 1;
}

.post-card-item-content .meta {
    display: block;
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.post-card-item-content h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #111;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* SỐ DÒNG */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ❌ Bỏ gạch bài nhỏ cuối */
.post-card-item:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 20px;
}

/* ===============================
   XEM THÊM
================================ */
.post-card-more {
    margin-top: 18px;
    padding: 14px;
    background: #2589ff;
    color: #fff;
    text-align: center;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    display: block;
}

.post-card-more:hover {
    background: #1e6fe0;
}

/*
 * ======================================
 * ELEMENTOR WIDGET: MEDICAL POSTS
 * Chọn danh mục + số bài
 * ======================================
 */


.medical-block {
    margin-bottom: 48px
}

/* ===== HEADING ===== */
.medical-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}

.medical-heading .line {
    width: 4px;
    height: 30px;
    background: #22c55e;
    border-radius: 2px
}

.medical-heading h3 {
    font-size: 28px;
    font-weight: 400
}

/* ===== LAYOUT ===== */
.medical-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px
}

/* ===== MAIN POST ===== */
.medical-main .thumb img {
    width: 100%;
    height: 455px;
    object-fit: cover;
    border-radius: 20px
}

.medical-main .title {
    font-size: 20px;
    margin: 14px 0 6px;
    font-weight: 400;
    line-height: 1.4
}

.medical-main .title a {
    color: #111;
    text-decoration: none
}

.medical-main .date {
    font-size: 13px;
    color: #6b7280
}

/* ===== SIDE LIST ===== */
.medical-list {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.medical-item {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.medical-list .medical-item img {
    width: 121px;
    height: 106px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    max-width: 121px;
}

.medical-item h5 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.medical-item a {
    color: #111;
    text-decoration: none
}

.medical-item span {
    font-size: 14px;
    color: #6b7280
}

.medical-main .meta,
.medical-item .meta {
    display: flex;
    gap: 14px;
    font-size: 14px;
    color: #6b7280
}

.meta {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: #6b7280;
}

.meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
}

.medical-main .views,
.medical-item .views {
    display: flex;
    align-items: center;
    gap: 4px
}


/* ===== MOBILE ===== */
@media(max-width:991px) {
    .medical-layout {
        grid-template-columns: 1fr
    }

    .medical-main .thumb img {
        height: 260px
    }
}

/* Trang tin tức */
/* =========================================
   CSS FEATURED POSTS 
   ========================================= */

/* --- 1. LAYOUT CHÍNH --- */
.fp-clean-container {
    display: flex;
    gap: 30px;
    height: 615px;
    width: 100%;
    box-sizing: border-box;
}

.fp-clean-left {
    flex: 0 0 70%;
    max-width: 70%;
    height: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.fp-clean-right {
    flex: 0 0 calc(30% - 30px);
    max-width: calc(30% - 30px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fp-clean-right-item-wrap {
    width: 100%;
    height: 31%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* --- 2. XỬ LÝ ẢNH & ZOOM MƯỢT (QUAN TRỌNG) --- */
.fp-clean-item-big,
.fp-clean-item-small {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* Giữ mọi thứ bên trong khung */
    text-decoration: none !important;
}

/* Lớp ảnh nền riêng biệt */
.fp-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    /* Thời gian zoom chậm lại cho mượt */
    will-change: transform;
}

/* Chỉ zoom lớp ảnh nền, không zoom chữ */
.fp-clean-item-big:hover .fp-bg-image,
.fp-clean-item-small:hover .fp-bg-image {
    transform: scale(1.05);
    /* Zoom cực nhẹ (3%) để không bị lỗi */
}

/* --- 3. OVERLAY & CONTENT --- */
.fp-clean-overlay,
.fp-clean-overlay-small {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 2;
    transition: 0.3s;
}

.fp-clean-content-big {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    z-index: 10;
}

.fp-clean-content-small {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    z-index: 10;
}

/* --- 4. CĂN CHỈNH ICON SVG (FLEXBOX) --- */
.fp-clean-meta,
.fp-clean-meta-small {
    display: flex;
    /* Dàn ngang */
    align-items: center;
    /* Căn giữa theo chiều dọc */
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 400;
}

.fp-meta-item {
    display: inline-flex;
    /* Để icon và chữ dính liền nhau thẳng hàng */
    align-items: center;
    gap: 6px;
    /* Khoảng cách giữa icon và chữ */
}

.fp-icon {
    width: 14px;
    height: 14px;
    display: block;
    /* Sửa lỗi hiển thị SVG */
    opacity: 0.9;
}

.fp-sep {
    margin-left: 20px;
    position: relative;
}

/* Dấu chấm ngăn cách */
.fp-sep::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

/* --- 5. TYPOGRAPHY (GIỮ NGUYÊN SIZE YÊU CẦU) --- */
.fp-clean-badge {
    display: inline-block;
    background-color: #ff9800;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400;
    text-transform: uppercase;
    padding: 2px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.fp-clean-title-big {
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 400;
    line-height: 1.3;
    margin: 8px 0 10px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.fp-clean-title-small {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 5px !important;
    /* margin: 5px 0 8px 0; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* --- 6. MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .fp-clean-container {
        flex-direction: column;
        height: auto !important;
        gap: 20px;
    }

    .fp-clean-left {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: 260px;
    }

    .fp-clean-right {
        flex: none;
        width: 100%;
        max-width: 100%;
        gap: 15px;
    }

    .fp-clean-right-item-wrap {
        height: 130px;
    }

    .fp-clean-title-big {
        font-size: 19px !important;
    }

    .fp-clean-badge {
        font-size: 11px !important;
        padding: 4px 8px;
        margin-bottom: 5px;
    }

    .fp-clean-title-small {
        font-size: 15px !important;
    }

}

/* =========================================
   CUSTOM LANGUAGE SWITCHER (TranslatePress) - SPLIT DESKTOP & MOBILE
   IDs: Desktop #menu-menu-phu | Mobile #menu-menu-phu-1
   ========================================= */

/* --- A. DESKTOP STYLES (#menu-menu-phu) --- */
ul#menu-menu-phu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    /* Canh phải cho đẹp trên desktop */
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul#menu-menu-phu>li {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Thứ tự Desktop */
ul#menu-menu-phu li.menu-item-1404 {
    order: 1 !important;
}

/* VI */
ul#menu-menu-phu li.menu-item-1403 {
    order: 2 !important;
}

/* EN */

/* Vách ngăn Desktop */
ul#menu-menu-phu li.menu-item-1404::after {
    content: "/" !important;
    display: block !important;
    margin: 0 10px !important;
    color: #ccc;
    font-weight: 400;
}


/* --- B. MOBILE STYLES (#menu-menu-phu-1) --- */
ul#menu-menu-phu-1 {
    display: inline-flex !important;
    /* Mobile dùng inline-flex */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
    width: auto !important;
}

ul#menu-menu-phu-1>li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    float: none !important;
    min-width: 0 !important;
}

/* Thứ tự Mobile */
ul#menu-menu-phu-1 li.menu-item-1404 {
    order: 1 !important;
}

ul#menu-menu-phu-1 li.menu-item-1403 {
    order: 2 !important;
}

/* Vách ngăn Mobile (Gắn vào thẻ A để chắc chắn không rớt) */
ul#menu-menu-phu-1 li.menu-item-1404>a::after {
    content: "/" !important;
    display: inline-block !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    color: #ccc !important;
}


/* --- C. COMMON STYLES (Dùng chung) --- */

/* Link Reset */
.menu-item-1403 a,
.menu-item-1404 a {
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}

/* Span wrapper */
span[data-no-translation] {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Text Styles */
.trp-ls-language-name {
    font-size: 15px !important;
    text-transform: uppercase;
    line-height: 1;
    transition: color 0.2s;
}

/* 6. TRẠNG THÁI ACTIVE (.current-language-menu-item) */
li.current-language-menu-item .trp-ls-language-name {
    font-weight: 700 !important;
    color: #111 !important;
}

/* --- XỬ LÝ ẢNH CỜ NÉT HƠN (HIGH RES) --- */
/* Hiện cờ cho ngôn ngữ đang chọn */
li.current-language-menu-item img {
    display: block !important;
    width: 24px !important;
    height: 0 !important;
    /* Hack: Ẩn ảnh gốc low-res */
    padding-top: 24px !important;
    /* Tạo chiều cao giả để hiện background */
    overflow: hidden !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Thay thế ảnh gốc bằng ảnh CDN chất lượng cao */
/* Việt Nam */
li.menu-item-1404 img {
    background-image: url('https://bvnguyentrai.123websitedev.com/wp-content/uploads/2026/01/vn.png');
}

/* Mỹ (English) */
li.menu-item-1403 img {
    background-image: url('https://bvnguyentrai.123websitedev.com/wp-content/uploads/2026/01/us.png');
}

/* 7. TRẠNG THÁI INACTIVE (Không chọn) */
li:not(.current-language-menu-item) .trp-ls-language-name {
    font-weight: 500 !important;
    color: #888 !important;
    /* Màu xám */
}

/* Ẩn cờ cho ngôn ngữ chưa chọn */
li:not(.current-language-menu-item) img {
    display: none !important;
}

/* Hover vào ngôn ngữ chưa chọn thì sáng lên */
li:not(.current-language-menu-item):hover .trp-ls-language-name {
    color: #000 !important;
}

/* Reset lại style mặc định của thẻ a trong menu */
#menu-menu-phu .ct-menu-link {
    padding: 0 !important;
}

/* Footer: gom Home + Menu sát nhau */
/* Desktop */
@media (min-width: 1024px) {
    [data-footer*="type-1"] .ct-footer [data-row*="top"]>div {
        --grid-template-columns: 0.45fr 3fr;
    }
}

/* Tablet & Mobile */
@media (max-width: 1023px) {
    [data-footer*="type-1"] .ct-footer [data-row*="top"]>div {
        --grid-template-columns: 1fr;
        row-gap: 15px;
    }
}

/* Chỉ active icon Home khi ở trang chủ */
/* Căn giữa icon và text cho nút Trang chủ */
.ct-header-cta a[href="/"],
.ct-header-cta a[href="/en/"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 6px;
    /* Mặc định trong suốt và màu đen (fix lỗi hiển thị trên header sticky các trang khác) */
    background-color: transparent !important;
    color: #192a3d !important;
    font-weight: 500;
}

.ct-header-cta a[href="/"] svg,
.ct-header-cta a[href="/en/"] svg {
    transform: translateY(-2px);
    fill: currentColor;
}

/* Chỉ active icon Home khi ở trang chủ */
body.home .ct-header-cta a[href="/"],
body.home .ct-header-cta a[href="/en/"],
body.front-page .ct-header-cta a[href="/"],
body.front-page .ct-header-cta a[href="/en/"] {
    background-color: var(--theme-palette-color-2) !important;
    color: #ffffff !important;
}

/* Màu icon trắng khi ở trang chủ */
body.home .ct-header-cta a[href="/"] svg,
body.home .ct-header-cta a[href="/en/"] svg,
body.front-page .ct-header-cta a[href="/"] svg,
body.front-page .ct-header-cta a[href="/en/"] svg {
    fill: #ffffff;
}

/* Hover effect: Hiển thị như đang active khi di chuột vào */
.ct-header-cta a[href="/"]:hover,
.ct-header-cta a[href="/en/"]:hover {
    background-color: var(--theme-palette-color-2) !important;
    color: #ffffff !important;
}

.ct-header-cta a[href="/"]:hover svg,
.ct-header-cta a[href="/en/"]:hover svg {
    fill: #ffffff;
}

/* Mobile: Căn trái nút trang chủ */
/* Mobile: Căn trái nút trang chủ */
@media (max-width: 991px) {
    #offcanvas .ct-header-cta a.icon_text_home {
        justify-content: flex-start;
        padding-left: 0;
        text-transform: none !important;
        /* Hiển thị nguyên bản (Trang chủ) */
        font-size: 20px;
        font-weight: 400;
        padding-bottom: 8px !important;
        margin-bottom: -15px !important;
        /* Giảm padding dưới cho cân */
    }

    /* Khi active thì thêm padding để không bị dính lề */
    body.home .ct-header-cta a[href="/"],
    body.home .ct-header-cta a[href="/en/"],
    body.front-page .ct-header-cta a[href="/"],
    body.front-page .ct-header-cta a[href="/en/"] {
        padding-left: 15px !important;
        padding-right: 15px;
    }
}

/* =========================================
   STEP BOX HOVER EFFECT (Quy trình khám bệnh)
   ========================================= */
.step-box {
    position: relative;
    overflow: hidden;
    border-radius: 50px 0 0 0;
    /* Bo góc trái trên nhiều hơn giống mẫu */
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    z-index: 1;
    cursor: pointer;
    /* Hiển thị bàn tay khi hover */
}

/* Tạo border góc trái trên (L-shape accent) */
.step-box::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-top-left-radius: 4px;
    opacity: 0;
    /* Ẩn mặc định */
    transition: opacity 0.6s ease;
    z-index: 2;
    /* Nằm trên lớp nền cam */
    pointer-events: none;
}

.step-box:hover::before {
    opacity: 1;
    /* Hiển thị khi hover */
}

/* Sử dụng ::after thay vì ::before để đè lên các lớp nền bên trong của Elementor */
.step-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 130, 0, 0.85), rgba(255, 130, 0, 0.85)),
        url('https://bvnguyentrai.123websitedev.com/wp-content/uploads/2025/12/e1f57c68b9794d83d495ce69f2ffcd4a3137cf6e-300x200.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
    border-top-left-radius: 16px;

    /* Lớp này nằm trên nền xanh */
    pointer-events: none;
}

.step-box:hover::after {
    opacity: 1;
}

/* Khi hover, chỉ đổi box-shadow */
.step-box:hover {
    box-shadow: 0 10px 20px rgba(255, 130, 0, 0.3);
    /* Giữ nguyên transition transform nếu có */
}

/* QUAN TRỌNG: Chỉ đưa các widget nội dung lên trên lớp nền cam
   KHÔNG đưa widget-wrap lên vì nó chứa nền xanh */
.step-box .elementor-widget,
.step-box .step-number {
    position: relative;
    z-index: 2;
}

/* Đổi màu tiêu đề (H2) và nội dung (p, span) thành trắng */
.step-box:hover .elementor-heading-title,
.step-box:hover .elementor-widget-text-editor,
.step-box:hover .elementor-widget-text-editor p,
.step-box:hover .elementor-widget-text-editor span {
    color: #ffffff !important;
    transition: color 0.6s ease;
}

/* 2. Áp dụng nền trắng trực tiếp vào thẻ H3 (Text số) */
.step-box:hover .step-number {
    background-color: #ffffff !important;
    transition: background-color 0.6s ease;
}

.step-box:hover .step-number .elementor-heading-title {
    color: #FF8200 !important;
    border-radius: 8px !important;
    transition: color 0.6s ease;
}

[data-vertical-spacing*=top] {
    padding-top: 30px !important;
}

/* điều chỉnh các post cũ k full content */
.entry-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 100%;
}

/* Điều chỉnh icon footer */
/* ===== FOOTER SOCIAL ICON SIZE RESPONSIVE ===== */

/* Desktop */
@media (min-width: 1025px) {

    .ct-socials-block.footer-social-icons .ct-social-box {
        --theme-icon-size: 90px !important;
        --items-spacing: 18px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .ct-socials-block.footer-social-icons .ct-social-box {
        --theme-icon-size: 80px;
        --items-spacing: 16px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ct-socials-block.footer-social-icons .ct-social-box {
        --theme-icon-size: 60px;
        --items-spacing: 14px;
    }
}

/* =========================================
   BREADCRUMB STYLES
   ========================================= */
.bvn-breadcrumb {
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

.bvn-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bvn-breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.bvn-breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bvn-breadcrumb-item a svg {
    fill: currentColor;
}

.bvn-breadcrumb-item a:hover {
    color: #ffffff;
    text-decoration: none;
}

.bvn-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
}

.bvn-breadcrumb-text {
    color: #ffffff;
    font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bvn-breadcrumb {
        font-size: 13px;
        margin-bottom: 15px;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        /* Scrollbar space if needed */
    }

    .bvn-breadcrumb-list {
        flex-wrap: nowrap;
        /* Prevent wrap on mobile, scroll instead */
    }
}

/* =========================================
   FIX MOBILE MENU "MENU" TEXT ON TRANSLATION
   ========================================= */
/* .ct-label.ct-hidden-sm.ct-hidden-md.ct-hidden-lg {
    display: none !important;
} */

@media (max-width: 767px) {
    .footer-slogan {
        font-size: 12px !important;
    }
}