/*
Theme Name:   Madbox
Theme URI:    https://madbox.vn
Description:  Madbox Studio - Hệ thống giao diện thương mại & giải pháp website chuyên nghiệp, tối ưu 100% cho Madbox Builder và WooCommerce.
Author:       Madbox System
Author URI:   https://madbox.vn
Template:     flatsome
Version: 1.0.4
Text Domain:  flatsome-child-travel
*/

/* Tùy chỉnh bổ sung được nạp từ assets/css/travel.css */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

#wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
}


/* ==========================================================================
 * BNI TRUST CHAPTER — OFFICIAL HEADER & NAVIGATION DESIGN SYSTEM
 * 1. Topbar: Nền đỏ #CF2030, BNI International + Account Login (Căn phải)
 * 2. Main Header: Nền trắng, Logo BNI | BNI TRUST CHAPTER (Trái)
 * 3. Menu: GIỚI THIỆU | NHẬN LỜI MỜI | DANH SÁCH THÀNH VIÊN | CỘNG ĐỒNG | TIN TỨC | THANH TOÁN | LIÊN HỆ
 * ========================================================================== */

.bni-topbar,
#top-bar.bni-topbar {
    background-color: #CF2030 !important;
    background: #CF2030 !important;
    color: #ffffff !important;
    min-height: 28px !important;
    padding: 5px 0 !important;
    font-size: 12.5px !important;
    border-bottom: none !important;
}

.bni-topbar a,
.bni-top-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    opacity: 0.95 !important;
    transition: opacity 0.2s ease !important;
}

.bni-topbar a:hover,
.bni-top-link:hover {
    opacity: 0.8 !important;
    color: #ffffff !important;
}

/* --- Main Header BNI --- */
.bni-header-main,
#masthead.header-main {
    min-height: 72px !important;
    height: 72px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    position: relative !important;
    z-index: 99 !important;
}

html body #masthead.header-main .header-inner,
html body .header-main .header-inner,
.header-main .header-inner {
    min-height: 72px !important;
    height: 72px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.bni-brand-cluster,
.header-main #logo,
#logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
}

.bni-main-logo,
#logo img.bni-main-logo,
#logo img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.bni-logo-divider {
    display: inline-block !important;
    width: 1px !important;
    height: 28px !important;
    background: #c4c4c4 !important;
    margin: 0 14px !important;
    opacity: 0.9 !important;
}

.bni-chapter-title {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #525252 !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

/* --- Menu items separated by | --- */
.bni-header-nav,
.header-main .header-nav-main,
.header-nav.header-nav-main,
.header-main .bni-header-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100% !important;
}

@media (max-width: 849px) {
    .bni-menu-wrap,
    .bni-header-nav {
        display: none !important;
    }
    .bni-logo-divider {
        display: none !important;
    }
    .bni-chapter-title {
        font-size: 13.5px !important;
    }
    .bni-topbar,
    #top-bar.bni-topbar {
        display: none !important;
    }
}

.bni-header-nav > li.menu-item,
.header-main .header-nav-main > li,
.header-nav-main > li {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.bni-header-nav > li.menu-item > a.nav-top-link,
.bni-header-nav > li.menu-item > a,
.header-main .header-nav-main > li > a.nav-top-link,
.header-main .header-nav-main > li > a,
.header-nav-main > li > a {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.15s ease !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

.bni-header-nav > li.menu-item:hover > a,
.header-main .header-nav-main > li:hover > a,
.header-main .header-nav-main > li.active > a,
.header-main .header-nav-main > li.current-menu-item > a {
    color: #CF2030 !important;
}

/* Dấu gạch đứng | ngăn cách giữa các mục menu */
.bni-header-nav > li.menu-item:not(:last-child)::after,
.header-main .header-nav-main > li.menu-item:not(:last-child)::after,
.header-nav-main > li.menu-item:not(:last-child)::after {
    content: "|" !important;
    display: inline-block !important;
    margin: 0 11px !important;
    color: #6B7280 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
}

/* Ẩn mọi huy hiệu, badge hoặc dropdown thừa */
.bni-header-nav .hsa-promo-badge,
.bni-header-nav .hsa-hot-badge,
.bni-header-nav .hsa-crown-badge,
.bni-header-nav .icon-angle-down,
.header-nav-main .hsa-promo-badge,
.header-nav-main .hsa-hot-badge,
.header-nav-main .hsa-crown-badge,
.header-nav-main .icon-angle-down {
    display: none !important;
}

#logo img,
.header_logo,
.header-logo,
.sh-brand-logo img,
.hsa-brand-logo img,
.trv-brand-logo img {
    max-height: 40px !important;
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* --- Cụm 2: Cụm Navigation ở giữa --- */
.header-main .header-col-center,
.header-main .hsa-primary-nav-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 12px !important;
    padding: 0 !important;
}

.header-main .header-nav-main,
.header-nav-main,
.header-nav.header-nav-main,
.header-main .header-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 14px !important; /* Khoảng cách đồng đều 14px giữa tất cả các tab */
    height: 100% !important;
}

/* --- LI items: flex + center để text luôn ở giữa chiều dọc --- */
.header-main .header-nav-main > li,
.header-nav-main > li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    position: relative !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 40px !important;
}

/* --- Link text: font tiếng Việt chuẩn, line-height & vertical alignment đồng nhất 100% --- */
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register) > a.nav-top-link,
.header-nav-main > li:not(.header-button-login):not(.header-button-register) > a.nav-top-link,
.header-nav.header-nav-main > li:not(.header-button-login):not(.header-button-register) > a.nav-top-link,
.nav-line-bottom > li:not(.header-button-login):not(.header-button-register) > a.nav-top-link {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    position: relative !important;
    height: 40px !important;
    line-height: 20px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    font-family: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;     /* Giữ nguyên chữ hoa/thường chuẩn tiếng Việt */
    color: #0F172A !important;           /* Màu chữ đen chuẩn, độ tương phản sắc nét */
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: color 0.18s ease !important;
}

/* Trạng thái Hover / Active */
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register):hover > a,
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register).active > a,
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register).current-menu-item > a,
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register).current-menu-parent > a {
    color: #E11D48 !important;           /* Màu đỏ Ruby thương hiệu Sao Hôm */
}

/* --- Container bọc text: neo vị trí cho các badge ở phía trên --- */
.hsa-menu-title {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
}

/* --- Bỏ hoàn toàn dấu mũi tên ở bên cạnh cụm chữ Tin tức & Tuyển sinh và Tiện ích --- */
.header-nav-main > li > a i.icon-angle-down,
.header-nav-main > li > a .icon-angle-down,
.header-main .header-nav-main > li > a i.icon-angle-down,
.header-main .header-nav-main > li > a .icon-angle-down,
.header-nav-main > li.has-dropdown > a i.icon-angle-down,
.header-nav-main > li.menu-item-has-children > a i.icon-angle-down {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
 * HEADER MENU — TOÀN BỘ CÁC TAB ĐỒNG BỘ CHỮ MÀU ĐEN CHUẨN NHƯ KHÓA HỌC & VỀ SAO HÔM
 * Perfect baseline alignment, không viền hộp lúc tĩnh, thanh lịch và sắc nét
 * ========================================================================== */

.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register) > a.nav-top-link,
.header-nav-main > li:not(.header-button-login):not(.header-button-register) > a.nav-top-link,
.header-nav.header-nav-main > li:not(.header-button-login):not(.header-button-register) > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-thi-thu > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-tai-lieu > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-tin-tuc > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-cong-dong > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-my-class > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-khoa-hoc > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-gioi-thieu > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-ve-saohom > a.nav-top-link,
.header-main .header-nav-main > li > a.nav-top-link[href*="/de-thi"],
.header-main .header-nav-main > li > a.nav-top-link[href*="/tai-lieu"],
.header-main .header-nav-main > li > a.nav-top-link[href*="/tin-tuc"],
.header-main .header-nav-main > li > a.nav-top-link[href*="/cong-dong"],
.header-main .header-nav-main > li > a.nav-top-link[href*="/khoa-hoc-cua-toi"] {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    position: relative !important;
    height: 40px !important;
    line-height: 20px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    font-family: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #0F172A !important;           /* Màu chữ đen chuẩn, độ tương phản sắc nét */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: color 0.18s ease !important;
    transform: none !important;
}

/* Trạng thái Hover / Active cho tất cả các tab */
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register):hover > a.nav-top-link,
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register).active > a.nav-top-link,
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register).current-menu-item > a.nav-top-link,
.header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register).current-menu-parent > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-thi-thu:hover > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-tai-lieu:hover > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-tin-tuc:hover > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-cong-dong:hover > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-my-class:hover > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-khoa-hoc:hover > a.nav-top-link,
.header-main .header-nav-main > li.sh-tab-gioi-thieu:hover > a.nav-top-link {
    color: #E11D48 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}



/* ==========================================================================
 * CÁC BADGE ĐỎ Ở PHÍA TRÊN: KHUYẾN MÃI (SALE), HOT, VƯƠNG MIỆN (CROWN)
 * Tất cả icon đều màu đỏ thương hiệu và đặt ở phía trên tên tab
 * ========================================================================== */

/* 1. Huy hiệu "Khuyến mãi" (SALE) trên tab "Khóa học" - MÀU ĐỎ */
.hsa-promo-badge,
.sh-promo-badge-brand {
    position: absolute !important;
    top: -11px !important;               /* Nằm phía trên chữ Khóa học */
    right: -2px !important;              /* Neo gọn gàng ở góc trên chữ, không lấn sang khoảng trống giữa các tab */
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #FF1E56 0%, #E11D48 100%) !important;
    color: #ffffff !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    height: 14px !important;
    padding: 0 5px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.45) !important;
    border: 1px solid #ffffff !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 5 !important;
    animation: hsaHotBadgePulse 2.4s ease-in-out infinite !important;
}

/* 2. Huy hiệu "HOT" trên tab "Thi thử" - MÀU ĐỎ */
.hsa-hot-badge,
.sh-hot-badge-brand {
    position: absolute !important;
    top: -11px !important;               /* Nằm phía trên chữ Thi thử */
    right: -2px !important;              /* Neo gọn gàng ở góc trên chữ, không lấn sang khoảng trống giữa các tab */
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #FF1E56 0%, #E11D48 100%) !important;
    color: #ffffff !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    height: 14px !important;
    padding: 0 5px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.45) !important;
    border: 1px solid #ffffff !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 5 !important;
    animation: hsaHotBadgePulse 2.4s ease-in-out infinite !important;
}

@keyframes hsaHotBadgePulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* 3. Huy hiệu "Vương miện" (Crown Badge) trên tab "My Class" - MÀU ĐỎ */
.hsa-crown-badge,
.sh-crown-badge-brand {
    position: absolute !important;
    top: -11px !important;              /* Nằm phía trên chữ My Class */
    right: -3px !important;             /* Neo gọn gàng ở góc trên chữ, không lấn sang khoảng trống giữa các tab */
    left: auto !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #FF1E56 0%, #E11D48 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.45) !important;
    border: 1.2px solid rgba(255, 255, 255, 0.95) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    animation: hsaCrownFloat 3s ease-in-out infinite !important;
}

.hsa-crown-badge svg.hsa-crown-svg,
.hsa-crown-badge svg {
    width: 10px !important;
    height: 10px !important;
    color: #ffffff !important;
    display: block !important;
}

@keyframes hsaCrownFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-2px) rotate(4deg);
    }
}

/* Khoảng cách đệm cân đối thẩm mỹ cho các tab có badge phía trên */
.header-nav.header-nav-main > li:has(.hsa-promo-badge),
.header-nav.header-nav-main > li.sh-tab-khoa-hoc,
.header-nav.header-nav-main > li:has(.hsa-hot-badge),
.header-nav.header-nav-main > li.sh-tab-thi-thu,
.header-nav.header-nav-main > li#menu-item-954,
.header-nav.header-nav-main > li#menu-item-793,
.header-nav.header-nav-main > li:has(.hsa-crown-badge),
.header-nav.header-nav-main > li.sh-tab-my-class,
.header-nav.header-nav-main > li#menu-item-962,
.header-nav.header-nav-main > li#menu-item-804 {
    margin-right: 0 !important;
}

/* ==========================================================================
 * CỤM 3 (BÊN PHẢI): 2 NÚT ĐĂNG NHẬP & ĐĂNG KÝ (DỄ NHÌN, NỔI BẬT, CÂN ĐỐI)
 * ========================================================================== */
.header-main .header-col-right,
.header-main .header-auth-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    z-index: 10 !important;
}

.header-main .header-nav-auth {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.header-main .header-nav-auth > li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-main .header-button-login,
.header-button-login {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    height: 40px !important;
}

.header-main .header-button-login a.header-btn-login,
.header-btn-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 99px !important;
    color: #0F172A !important;
    font-family: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.header-main .header-button-login a.header-btn-login span,
.header-btn-login span {
    color: #0F172A !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

.header-main .header-button-login a.header-btn-login:hover,
.header-btn-login:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
    color: #E11D48 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1) !important;
}

.header-main .header-button-login a.header-btn-login:hover span,
.header-btn-login:hover span {
    color: #E11D48 !important;
}

.header-main .header-button-register,
.header-button-register {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 6px !important;
    height: 40px !important;
}

.header-main .header-button-register a.header-btn-register,
.header-btn-register {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 20px !important;
    background: linear-gradient(135deg, #FF1E56 0%, #E11D48 100%) !important;
    border: none !important;
    border-radius: 99px !important;
    color: #FFFFFF !important;
    font-family: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 12px rgba(225, 29, 72, 0.38) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.header-main .header-button-login a.header-btn-login span,
.header-btn-login span {
    color: #0F172A !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

.header-main .header-button-register a.header-btn-register span,
.header-btn-register span {
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}

.header-main .header-button-register a.header-btn-register:hover,
.header-btn-register:hover {
    background: linear-gradient(135deg, #FF0D49 0%, #D0113B 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(225, 29, 72, 0.5) !important;
}

.header-main .header-button-register a.header-btn-register:hover span,
.header-btn-register:hover span {
    color: #FFFFFF !important;
}

/* --- Responsive: thu nhỏ trên màn hình vừa --- */
@media (max-width: 1300px) and (min-width: 850px) {
    .header-main .header-nav-main {
        gap: 10px !important;
    }
    .header-main .header-nav-main > li:not(.header-button-login):not(.header-button-register) > a,
    .header-nav-main > li:not(.header-button-login):not(.header-button-register) > a {
        font-size: 13px !important;
        padding: 0 2px !important;
    }
}

/* ==========================================================================
 * GHIM THANH MENU ĐỨNG YÊN KHI CUỘN LÊN VÀ XUỐNG (STICKY / FIXED NAVIGATION)
 * Chỉ ghim duy nhất thanh menu, không tạo thanh trắng thừa hoặc chồng chéo
 * ========================================================================== */
#header {
    position: relative;
    z-index: 1000;
    background: transparent;
    overflow: visible;
}

#header .header-wrapper {
    position: relative;
    z-index: 1000;
    background: #ffffff;
    overflow: visible !important;
    width: 100%;
}

#header .header-wrapper.stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.admin-bar #header .header-wrapper.stuck {
    top: 32px !important;
}

@media (max-width: 782px) {
    .admin-bar #header .header-wrapper.stuck {
        top: 46px !important;
    }
}

/* ==========================================================================
 * DROPDOWN MENU TIN TỨC & TUYỂN SINH (CHUẨN 100% THEO HÌNH ẢNH ĐÍNH KÈM)
 * Card trắng viền tinh tế, đường phân cách mỏng, chữ đen đều, không thụt lề
 * ========================================================================== */
.nav-dropdown-has-arrow li.has-dropdown:after,
.nav-dropdown-has-arrow li.has-dropdown:before,
.header-nav li.has-dropdown:after,
.header-nav li.has-dropdown:before,
.header-main .header-nav-main > li:after,
.header-main .header-nav-main > li:before {
    display: none !important;
    content: none !important;
}

.header-nav-main .nav-dropdown,
.header-nav .nav-dropdown,
.header-main .header-nav-main .nav-dropdown,
.header-nav-main ul.sub-menu,
.header-main .header-nav-main ul.sub-menu {
    background: #ffffff !important;
    min-width: 240px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    left: 0 !important;
    top: 100% !important;
    right: auto !important;
    list-style: none !important;
    z-index: 9999 !important;
}

.header-nav-main .nav-dropdown > li,
.header-nav .nav-dropdown > li,
.header-main .header-nav-main .nav-dropdown > li,
.header-nav-main ul.sub-menu > li,
.header-main .header-nav-main ul.sub-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    text-align: left !important;
}

.header-nav-main .nav-dropdown > li:last-child,
.header-nav .nav-dropdown > li:last-child,
.header-main .header-nav-main .nav-dropdown > li:last-child,
.header-nav-main ul.sub-menu > li:last-child,
.header-main .header-nav-main ul.sub-menu > li:last-child {
    border-bottom: none !important;
}

.header-nav-main .nav-dropdown li a,
.header-nav .nav-dropdown li a,
.header-main .header-nav-main .nav-dropdown li a,
.header-nav-main ul.sub-menu li a,
.header-main .header-nav-main ul.sub-menu li a,
.header-nav-main li.has-dropdown .nav-dropdown a,
.header-nav-main li.sh-tab-tin-tuc .nav-dropdown a,
.header-nav-main li.sh-tab-tin-tuc ul.sub-menu a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 20px !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;       /* Chữ thanh mảnh vừa vặn, KHÔNG in đậm */
    color: #1e293b !important;
    text-align: left !important;        /* Căn lề trái tuyệt đối, KHÔNG căn giữa */
    justify-content: flex-start !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.header-nav-main .nav-dropdown li a:hover,
.header-nav .nav-dropdown li a:hover,
.header-main .header-nav-main .nav-dropdown li a:hover,
.header-nav-main ul.sub-menu li a:hover,
.header-main .header-nav-main ul.sub-menu li a:hover,
.header-nav-main li.has-dropdown .nav-dropdown a:hover,
.header-nav-main li.sh-tab-tin-tuc .nav-dropdown a:hover,
.header-nav-main li.sh-tab-tin-tuc ul.sub-menu a:hover {
    background-color: #f8fafc !important;
    color: #e11d48 !important;
    padding-left: 20px !important;
}

.header-main .header-inner {
    max-width: 1400px !important;
}

/* Desktop Navigation styling */
@media (min-width: 850px) {
    .header-main .header-col-center,
    .hsa-primary-nav-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
}

.ux-timer {
    position: relative;
    z-index: 0;
    max-width: 100%;
}

.header-wrapper {
    overflow: visible !important;
}

/* ==========================================================================
 * CARD DỊCH VỤ THIẾT KẾ - IN ẤN
 * ========================================================================== */
.trv-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
}

.trv-service-card:hover .trv-service-img {
    transform: scale(1.055);
}

.trv-service-card .button:hover {
    background: #1b873f !important;
    color: #ffffff !important;
}

/* ==========================================================================
 * MOBILE MENU SCROLL & UI OPTIMIZATION (<= 849px)
 * Giữ logo nguyên bên trái, danh mục menu cuộn/gạt ngang sang trái/phải mượt mà
 * ========================================================================== */
@media (max-width: 849px) {
    .header-main, .header-main .header-inner {
        min-height: 60px !important;
        height: auto !important;
    }

    .header-main .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 10px !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .header-main .header-col-left,
    #logo, .logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 130px !important;
        display: flex !important;
        align-items: center !important;
        z-index: 5 !important;
    }

    #logo img, .header_logo, .header-logo, .trv-brand-logo img, .sh-brand-logo img {
        max-height: 38px !important;
        height: 38px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .header-main .header-col-center,
    .trv-primary-nav-wrap,
    .hsa-primary-nav-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important; /* Firefox */
        display: flex !important;
        align-items: center !important;
    }

    .hsa-primary-nav-wrap::-webkit-scrollbar,
    .trv-primary-nav-wrap::-webkit-scrollbar {
        display: none !important; /* Chrome / Safari */
    }

    .header-main .header-nav-main {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 4px 0 !important;
    }

    .header-main .header-nav-main > li {
        flex: 0 0 auto !important;
    }

    .header-main .header-nav-main > li > a {
        font-size: 13px !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
    }

    .header-main .header-col-right,
    .header-main .header-auth-wrap {
        display: none !important;
    }

    /* Ẩn dropdown ở thanh trượt ngang mobile để không vỡ swipe */
    .header-nav-main .nav-dropdown,
    .header-nav-main ul.sub-menu {
        display: none !important;
    }

    /* Căn giữa các nút xem tất cả trên mobile */
    .col-inner.text-right:has(> a[href*="/tour/"], > a[href*="/du-an-thuc-hien/"], > a[href*="/tin-tuc/"]),
    .col-inner.text-right > a.button.primary.is-outline,
    .row .col.medium-4.small-12 .col-inner.text-right {
        text-align: center !important;
    }

    .row .col.medium-4.small-12 .col-inner.text-right > a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================================
 * RESPONSIVE HERO SLIDER / BANNER POSTER TRÊN MOBILE
 * Giữ đúng tỉ lệ ảnh poster 16:9, không bị ép thành hình vuông / cắt mất chữ
 * ========================================================================== */
@media (max-width: 849px) {
    .content-area > .row > .col > .section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .content-area > .row > .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .trv-hero-slider .banner {
        padding-top: 56.25% !important; /* Tỉ lệ chuẩn 16:9 (720 / 1280) */
        min-height: auto !important;
    }
    .trv-hero-slider .banner-bg img {
        object-fit: cover !important;
        object-position: center center !important;
    }
    .trv-hero-slider .text-box {
        width: 92% !important;
    }
    .trv-hero-slider .text-box h1 {
        font-size: 1.35em !important;
        margin-bottom: 6px !important;
    }
    .trv-hero-slider .text-box p {
        font-size: 0.85em !important;
        margin-bottom: 10px !important;
        line-height: 1.35 !important;
    }
}

/* ==========================================================================
 * CĂN GIỮA TIÊU ĐỀ TOUR & CẨM NANG TRÊN MOBILE
 * ĐỔI MÀU SỐ HOTLINE TƯ VẤN 24/7 SANG TRẮNG (PC & MOBILE)
 * ========================================================================== */
/* Màu số hotline tư vấn 24/7 trên cả desktop lẫn mobile */
.trv-consultation-section strong[style*="color:#E51924"],
.trv-consultation-section strong[style*="color: #E51924"],
.trv-consultation-section strong[style*="rgb(229, 25, 36)"] {
    color: #ffffff !important;
}

@media (max-width: 849px) {
    /* Căn giữa các tiêu đề section trên mobile */
    .content-area .section-title:has(.section-title-main) {
        justify-content: center !important;
        text-align: center !important;
    }
    .content-area .section-title:has(.section-title-main) > b {
        display: block !important;
    }
}

/* ==========================================================================
 * TOPBAR RESPONSIVE & MOBILE LANGUAGE SWITCHER (<= 849px)
 * Đảm bảo Hotline và Nút chuyển đổi ngôn ngữ (VI/EN) hiển thị song song trên mobile
 * ========================================================================== */
@media (max-width: 849px) {
    #top-bar {
        padding: 5px 0 !important;
    }

    #top-bar .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #top-bar .flex-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #top-bar .header-social-icons {
        font-size: 11.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }

    #top-bar .flex-right {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #top-bar .topbar-lang-wrapper {
        margin-left: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #top-bar .trv-language-switcher {
        padding: 2px 4px !important;
        gap: 2px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    #top-bar .trv-language-button {
        min-width: 36px !important;
        min-height: 24px !important;
        padding: 2px 5px !important;
        font-size: 10.5px !important;
        gap: 3px !important;
    }

    #top-bar .trv-language-button svg {
        width: 15px !important;
        height: 10px !important;
    }
}

/* ==========================================================================
   LONG GIANG VINA - WOOCOMMERCE & SERVICE CARD MODERN STYLING
   ========================================================================== */

.lgv-product-card,
.product-small.col {
    transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

.lgv-product-card .box,
.product-small .box {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lgv-product-card .box:hover,
.product-small .box:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12) !important;
    border-color: #cbd5e1 !important;
}

.lgv-product-card .box-image,
.product-small .box-image {
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f8fafc !important;
}

.lgv-product-card .box-image img,
.product-small .box-image img {
    transition: transform 0.5s ease !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
}

.lgv-product-card .box:hover .box-image img,
.product-small .box:hover .box-image img {
    transform: scale(1.06) !important;
}

/* Flatsome Native Category Styling */
.product-small .box-text .category {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #1b873f !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.product-small .box-text .category a {
    color: #1b873f !important;
    text-decoration: none !important;
}

.lgv-loop-category {
    display: none !important;
}
/* deprecated old */
.lgv-loop-category-old {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1b873f !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.product-small .box-text {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.product-small .product-title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    min-height: 44px !important;
}

.product-small .product-title a {
    color: #0f172a !important;
    transition: color 0.2s ease !important;
}

.product-small .product-title a:hover {
    color: #1b873f !important;
}

/* Loop Specs Box */
.lgv-loop-specs-box {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    margin-bottom: 12px !important;
    font-size: 12px !important;
    color: #475569 !important;
}

.lgv-loop-specs-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 2px 0 !important;
}

.lgv-loop-specs-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.lgv-spec-icon {
    font-size: 12px !important;
}

.lgv-spec-code {
    font-weight: 600 !important;
    color: #1e293b !important;
}

.lgv-spec-trust {
    color: #166534 !important;
    font-weight: 600 !important;
}

/* Loop Action Buttons */
.lgv-loop-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

.lgv-btn-view-product {
    flex: 1 !important;
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    display: inline-block !important;
}

.lgv-btn-view-product:hover {
    background: #1b873f !important;
    color: #ffffff !important;
}

.lgv-btn-quote {
    background: #1b873f !important;
    color: #ffffff !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.lgv-btn-quote:hover {
    background: #146c31 !important;
    color: #ffffff !important;
}

/* Modern Card UX Builder Styles - Clean, Minimalist & Clickable */
.lgv-service-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    height: 100%;
}

.lgv-service-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.lgv-service-card-link:hover .lgv-service-card {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
    border-color: #1b873f;
}

.lgv-service-card-thumb {
    position: relative;
    overflow: hidden;
    height: 200px;
    background: #f8fafc;
}

.lgv-service-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.lgv-service-card-link:hover .lgv-service-card-thumb img {
    transform: scale(1.07);
}

.lgv-service-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(27, 135, 63, 0.92);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 2;
}

.lgv-card-hover-hint {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 3;
}

.lgv-card-hover-hint span {
    background: #1b873f;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 99px;
    transform: translateY(6px);
    transition: transform 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.lgv-service-card-link:hover .lgv-card-hover-hint {
    opacity: 1;
}

.lgv-service-card-link:hover .lgv-card-hover-hint span {
    transform: translateY(0);
}

.lgv-service-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.lgv-service-card-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.lgv-service-card-link:hover .lgv-service-card-title {
    color: #1b873f;
}

.lgv-service-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.lgv-service-card-price {
    font-size: 13px;
    font-weight: 700;
    color: #1b873f;
}

.lgv-service-card-action {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    transition: color 0.2s ease, transform 0.2s ease;
}

.lgv-service-card-link:hover .lgv-service-card-action {
    color: #1b873f;
    transform: translateX(3px);
}

/* Single Service Page & Product Illustration Gallery */
.lgv-gallery-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 10px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
}

.lgv-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
    border-color: #cbd5e1;
}

.lgv-gallery-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: 220px;
    background: #f1f5f9;
}

.lgv-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.lgv-gallery-card:hover .lgv-gallery-thumb img {
    transform: scale(1.05);
}

/* ==========================================================================
   MODERN NEON BUTTONS & DUAL GRADIENT TYPOGRAPHY (INSPIRED BY NGUYENTRUNGHAO.COM)
   ========================================================================== */

/* 1. Neon Modern Button Style:
   - Bo góc bo tròn tinh tế (10px - 12px)
   - Nền màu tím điện / xanh coban hiện đại (electric indigo / violet blue: #4f46e5 -> #6366f1)
   - Ánh sáng tỏa neon mềm (soft outer glow: rgba(99, 102, 241, 0.4))
   - Hiệu ứng nổi bật khi hover nhấc nhẹ và tăng độ tỏa sáng
   - Mũi tên và text hiển thị rõ ràng, hiện đại
*/
.lgv-btn-neon,
.button.lgv-btn-neon,
a.button.lgv-btn-neon {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    padding: 11px 22px !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.lgv-btn-neon::after,
.button.lgv-btn-neon::after,
a.button.lgv-btn-neon::after {
    content: "→";
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.25s ease;
    display: inline-block;
}

.lgv-btn-neon:hover,
.button.lgv-btn-neon:hover,
a.button.lgv-btn-neon:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2.5px) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.55), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.lgv-btn-neon:hover::after,
.button.lgv-btn-neon:hover::after,
a.button.lgv-btn-neon:hover::after {
    transform: translateX(4px);
}

.lgv-btn-neon:active,
.button.lgv-btn-neon:active,
a.button.lgv-btn-neon:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.4) !important;
}

/* Áp dụng mở rộng cho các nút xem chi tiết trong card sản phẩm */
.lgv-service-card-action {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff !important;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
    transition: all 0.25s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lgv-service-card-link:hover .lgv-service-card-action {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px) translateX(2px);
    color: #ffffff !important;
}

/* 2. Tiêu đề nửa đen nửa màu Gradient hiện đại (Dual Tone Gradient Typography) */
.lgv-dual-title {
    color: #0f172a !important;
}

.lgv-dual-title span,
.lgv-card-heading span,
.lgv-text-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 900;
}

.lgv-card-heading {
    color: #0f172a !important;
}

.lgv-card-heading span {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Tinh chỉnh cột card trong Section 03 để có khoảng cách padding và viền bo tròn thẩm mỹ */
[section*="03. Danh Mục Dịch Vụ"] .col-inner {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.12) !important;
    transform: translateY(-4px);
}

[section*="03. Danh Mục Dịch Vụ"] .ux-text {
    margin-bottom: 0;
}

/* Dual title on dark sections */
[bg_color*="#0f172a"] .lgv-dual-title,
[bg_color*="#1b873f"] .lgv-dual-title,
.trv-dark-curve-section .lgv-dual-title {
    color: #ffffff !important;
}

[bg_color*="#0f172a"] .lgv-dual-title span,
[bg_color*="#1b873f"] .lgv-dual-title span,
.trv-dark-curve-section .lgv-dual-title span {
    background: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

/* ==========================================================================
   COMPACT NEON BUTTONS & CLEAN CARD HEADINGS
   ========================================================================== */

/* Nút Neon gọn gàng, thanh thoát (không bị to bè) */
html body .lgv-btn-neon,
html body .button.lgv-btn-neon,
html body a.button.lgv-btn-neon,
html body a.button.primary.lgv-btn-neon,
html body .button.primary.lgv-btn-neon {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    background-color: #4f46e5 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    min-height: unset !important;
    line-height: 1.4 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    width: auto !important;
    max-width: fit-content !important;
    margin-top: 10px !important;
}

html body .lgv-btn-neon span,
html body .button.lgv-btn-neon span,
html body a.button.lgv-btn-neon span {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 !important;
}

html body .lgv-btn-neon::after,
html body .button.lgv-btn-neon::after,
html body a.button.lgv-btn-neon::after {
    content: "→" !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
    color: #ffffff !important;
}

html body .lgv-btn-neon:hover,
html body .button.lgv-btn-neon:hover,
html body a.button.lgv-btn-neon:hover,
html body a.button.primary.lgv-btn-neon:hover,
html body .button.primary.lgv-btn-neon:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
    background-color: #4338ca !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45) !important;
}

html body .lgv-btn-neon:hover::after,
html body .button.lgv-btn-neon:hover::after,
html body a.button.lgv-btn-neon:hover::after {
    transform: translateX(3px) !important;
}

/* Tiêu đề sản phẩm trong card: Màu đen đồng nhất 100%, không bị 2 màu */
[section*="03. Danh Mục Dịch Vụ"] h3,
[section*="03. Danh Mục Dịch Vụ"] h3 span,
.lgv-card-heading,
.lgv-card-heading span {
    color: #0f172a !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 1.15em !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
}

/* Card trong Section 03: Padding gọn gàng, viền bo nhẹ */
[section*="03. Danh Mục Dịch Vụ"] .col-inner {
    padding: 16px 16px 18px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner:hover {
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.1) !important;
    transform: translateY(-3px) !important;
}

/* ==========================================================================
   CENTERED & UNIFORM CARD BUTTONS & HERO BANNER ENHANCEMENTS
   ========================================================================== */

/* 1. Căn giữa các nút bấm trong card sản phẩm Section 03 */
[section*="03. Danh Mục Dịch Vụ"] .col-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: space-between !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner .ux-text,
[section*="03. Danh Mục Dịch Vụ"] .col-inner .img {
    width: 100% !important;
    text-align: center !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner h3 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Các nút trong card: Kích thước đều nhau, cân đối, căn chính giữa */
[section*="03. Danh Mục Dịch Vụ"] .button.lgv-btn-neon,
[section*="03. Danh Mục Dịch Vụ"] a.button.lgv-btn-neon,
html body [section*="03. Danh Mục Dịch Vụ"] .lgv-btn-neon {
    margin: 14px auto 0 auto !important;
    min-width: 180px !important;
    max-width: 200px !important;
    height: 38px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
}

/* 3. Hero banner chữ trắng rõ nét trên nền ảnh xưởng in */
.trv-hero-print-section .lgv-dual-title {
    color: #ffffff !important;
}

.trv-hero-print-section .lgv-dual-title span {
    background: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   CLEAN LUXURY TYPOGRAPHY & NATURAL LEFT-ALIGNED CARD DESIGN
   ========================================================================== */

/* 1. Reset Section 03: Căn trái tự nhiên, thẳng hàng, thanh lịch */
[section*="03. Danh Mục Dịch Vụ"] .col-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: space-between !important;
    padding: 16px 16px 20px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner:hover {
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.1) !important;
    transform: translateY(-3px) !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner .ux-text {
    width: 100% !important;
    text-align: left !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner h3 {
    text-align: left !important;
    color: #0f172a !important;
    font-size: 1.18em !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.35 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #0f172a !important;
}

[section*="03. Danh Mục Dịch Vụ"] .col-inner p {
    text-align: left !important;
    color: #64748b !important;
    font-size: 0.92em !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

/* 2. Button trong card: Căn trái tự nhiên, gọn gàng, vừa vặn */
[section*="03. Danh Mục Dịch Vụ"] .button.lgv-btn-neon,
[section*="03. Danh Mục Dịch Vụ"] a.button.lgv-btn-neon,
html body [section*="03. Danh Mục Dịch Vụ"] .lgv-btn-neon {
    margin: 4px 0 0 0 !important;
    min-width: unset !important;
    max-width: fit-content !important;
    height: 36px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

/* 3. Hero Section sáng, sang trọng, đẳng cấp chuẩn studio */
.trv-hero-print-section {
    background: #ffffff !important;
}

.trv-hero-print-section h1 {
    color: #0f172a !important;
}

/* 4. Cân đối kích thước 2 nút Hero Banner (Khám Phá Dịch Vụ In & Nhận Báo Giá Nhanh) */
.trv-hero-print-section .button.lgv-btn-neon,
.trv-hero-print-section a.button.lgv-btn-neon,
.trv-hero-print-section .button.trv-btn-bold,
.trv-hero-print-section a.button.trv-btn-bold,
[section*="Hero"] .button.lgv-btn-neon,
[section*="Hero"] a.button.lgv-btn-neon,
[section*="Hero"] .button.trv-btn-bold,
[section*="Hero"] a.button.trv-btn-bold {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 99px !important;
    margin: 4px 6px 4px 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.trv-hero-print-section .button.lgv-btn-neon span,
.trv-hero-print-section a.button.lgv-btn-neon span,
.trv-hero-print-section .button.trv-btn-bold span,
.trv-hero-print-section a.button.trv-btn-bold span,
[section*="Hero"] .button.lgv-btn-neon span,
[section*="Hero"] a.button.lgv-btn-neon span,
[section*="Hero"] .button.trv-btn-bold span,
[section*="Hero"] a.button.trv-btn-bold span {
    font-size: 15px !important;
    font-weight: 700 !important;
}


/* ==========================================================================
 * SAO HÔM - PHẦN CẢM NHẬN HỌC VIÊN & BẢNG VÀNG THÀNH TÍCH CHUẨN
 * ========================================================================== */

.sh-testimonial-slider-wrap {
	position: relative;
	width: 100%;
	padding: 10px 10px 20px 10px;
	box-sizing: border-box;
}

/* ==========================================================================
 * SAO HÔM - SLIDER CẢM NHẬN HỌC VIÊN HIỆN ĐẠI & TINH TẾ (MADBOX BUILDER)
 * ========================================================================== */

.sh-modern-feedback-slider {
	position: relative !important;
	width: 100% !important;
	margin-bottom: 25px !important;
}

.sh-modern-feedback-slider .slider {
	width: 100% !important;
}

.sh-modern-feedback-slider .flickity-viewport {
	overflow: hidden !important;
	padding: 15px 0 35px 0 !important;
	width: 100% !important;
}

/* Mỗi hàng là 1 slide chiếm 100% chiều rộng */
.sh-modern-feedback-slider .row.sh-feedback-slide-row {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

/* Thẻ học viên bên trong cột */
.sh-modern-feedback-slider .sh-feedback-slide-row > .col {
	display: flex !important;
	padding: 0 12px 20px 12px !important;
	box-sizing: border-box !important;
}

.sh-modern-feedback-slider .sh-feedback-slide-row > .col > .col-inner {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 20px !important;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
	padding: 28px 24px 22px 24px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	width: 100% !important;
	height: 100% !important;
	box-sizing: border-box !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative !important;
}

.sh-modern-feedback-slider .sh-feedback-slide-row > .col > .col-inner:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 36px rgba(30, 64, 175, 0.12) !important;
	border-color: #3B82F6 !important;
}

/* Cấu trúc phần nội dung Testimonial bên trong */
.sh-modern-feedback-slider .testimonial-box {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	justify-content: space-between !important;
	text-align: center !important;
	padding: 0 !important;
	margin: 0 !important;
}

.sh-modern-feedback-slider .testimonial-image {
	margin: 0 auto 12px auto !important;
	width: 72px !important;
	height: 72px !important;
}

.sh-modern-feedback-slider .testimonial-image img {
	width: 72px !important;
	height: 72px !important;
	border-radius: 50% !important;
	border: 3px solid #EFF6FF !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1) !important;
	object-fit: cover !important;
	aspect-ratio: 1 / 1 !important;
	display: block !important;
	margin: 0 auto !important;
}

.sh-modern-feedback-slider .icon-box-text {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	justify-content: space-between !important;
	padding: 0 !important;
	margin: 0 !important;
}

.sh-modern-feedback-slider .star-rating {
	margin: 0 auto 10px auto !important;
	font-size: 15px !important;
	letter-spacing: 3px !important;
	line-height: 1 !important;
	height: auto !important;
	width: auto !important;
	display: inline-block !important;
}

.sh-modern-feedback-slider .star-rating:before {
	content: "★★★★★" !important;
	color: #E2E8F0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	position: static !important;
	display: none !important;
}

.sh-modern-feedback-slider .star-rating span {
	position: static !important;
	overflow: visible !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	float: none !important;
}

.sh-modern-feedback-slider .star-rating span:before {
	content: "★★★★★" !important;
	color: #F59E0B !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	position: static !important;
}

.sh-modern-feedback-slider .testimonial-text {
	position: relative !important;
	font-size: 13.5px !important;
	line-height: 1.7 !important;
	color: #475569 !important;
	font-style: italic !important;
	margin: 0 0 16px 0 !important;
	flex-grow: 1 !important;
	display: flex !important;
	align-items: center !important;
	min-height: 96px !important;
}

.sh-modern-feedback-slider .testimonial-text p {
	font-size: 13.5px !important;
	line-height: 1.7 !important;
	color: #475569 !important;
	margin-bottom: 0 !important;
	width: 100% !important;
}

.sh-modern-feedback-slider .testimonial-meta {
	padding-top: 14px !important;
	border-top: 1px dashed #E2E8F0 !important;
	margin-top: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 5px !important;
}

.sh-modern-feedback-slider .testimonial-name {
	display: block !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #0F172A !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}

.sh-modern-feedback-slider .testimonial-name-divider {
	display: none !important;
}

.sh-modern-feedback-slider .testimonial-company {
	display: inline-block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #E11D48 !important;
	background: #FFF1F2 !important;
	padding: 3px 12px !important;
	border-radius: 99px !important;
	border: 1px solid #FFE4E6 !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	max-width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Nút mũi tên chuyển slide */
.sh-modern-feedback-slider .flickity-prev-next-button {
	width: 44px !important;
	height: 44px !important;
	background: #FFFFFF !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1) !important;
	color: #0F172A !important;
	transition: all 0.25s ease !important;
	opacity: 1 !important;
	z-index: 20 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.sh-modern-feedback-slider .flickity-prev-next-button:hover {
	background: #E11D48 !important;
	color: #FFFFFF !important;
	border-color: #E11D48 !important;
	box-shadow: 0 8px 22px rgba(225, 29, 72, 0.35) !important;
	transform: translateY(-50%) scale(1.08) !important;
}

.sh-modern-feedback-slider .flickity-prev-next-button svg {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor !important;
}

.sh-modern-feedback-slider .flickity-prev-next-button.previous {
	left: -18px !important;
}

.sh-modern-feedback-slider .flickity-prev-next-button.next {
	right: -18px !important;
}

@media (max-width: 849px) {
	.sh-modern-feedback-slider .flickity-prev-next-button.previous {
		left: 0px !important;
	}
	.sh-modern-feedback-slider .flickity-prev-next-button.next {
		right: 0px !important;
	}
}

/* Dots chuyển slide */
.sh-modern-feedback-slider .flickity-page-dots {
	bottom: -15px !important;
}

.sh-modern-feedback-slider .flickity-page-dots .dot {
	background: #CBD5E1 !important;
	width: 10px !important;
	height: 10px !important;
	margin: 0 5px !important;
	opacity: 1 !important;
	transition: all 0.3s ease !important;
}

.sh-modern-feedback-slider .flickity-page-dots .dot.is-selected {
	background: #E11D48 !important;
	width: 26px !important;
	border-radius: 8px !important;
}

/* Khung ảnh ghép học viên phong cách trẻ trung, sáng tạo */
.sh-collage-box {
	background: #FFFFFF !important;
	border-radius: 24px !important;
	padding: 38px 28px 30px 28px !important;
	box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07) !important;
	border: 1px solid #E2E8F0 !important;
	position: relative !important;
	margin-top: 45px !important;
	box-sizing: border-box !important;
}

.sh-collage-img-wrap {
	position: relative !important;
	text-align: center !important;
	margin: 25px auto 30px auto !important;
	max-width: 960px !important;
}

.sh-collage-main-img {
	width: 100% !important;
	max-width: 940px !important;
	height: auto !important;
	border-radius: 20px !important;
	box-shadow: 0 12px 35px rgba(15, 23, 42, 0.12) !important;
	border: 4px solid #FFFFFF !important;
	display: block !important;
	margin: 0 auto !important;
	transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.sh-collage-main-img:hover {
	transform: scale(1.012) !important;
	box-shadow: 0 18px 45px rgba(30, 64, 175, 0.18) !important;
}

.sh-sticky-note-tr {
	position: absolute;
	top: -15px;
	right: -10px;
	background: #FEF3C7;
	border: 2px dashed #F59E0B;
	border-radius: 16px;
	padding: 10px 16px;
	box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
	transform: rotate(3deg);
	z-index: 10;
	text-align: left;
	max-width: 230px;
	animation: shFloat 3.5s ease-in-out infinite alternate;
}

@keyframes shFloat {
	0% { transform: rotate(3deg) translateY(0); }
	100% { transform: rotate(3deg) translateY(-8px); }
}

.sh-sticky-note-tr .note-text {
	font-size: 13.5px;
	font-weight: 800;
	color: #92400E;
	line-height: 1.35;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sh-sticky-note-tr .note-sub {
	font-size: 11px;
	color: #B45309;
	margin-top: 3px;
	font-weight: 600;
}

.sh-collage-badges-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 25px;
}

.sh-pill-badge {
	background: #EFF6FF;
	border: 1px solid #BFDBFE;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 700;
	color: #1E40AF;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 2px 8px rgba(30, 64, 175, 0.06);
}

@media (max-width: 640px) {
	.sh-sticky-note-tr {
		position: static;
		transform: none;
		margin: 0 auto 15px auto;
		max-width: 90%;
		text-align: center;
		animation: none;
	}
	.sh-sticky-note-tr .note-text {
		justify-content: center;
	}
}

/* ==============================================================================
   TIN TỨC & TUYỂN SINH - BỐ CỤC TẠP CHÍ & BÀI VIẾT GỢI Ý (SAO HÔM)
   Màu thương hiệu: Đỏ (#E11D48), Xanh lá (#059669), Trắng ánh kim (#FFFFFF, #F8FAFC)
   ============================================================================== */

.sh-news-featured-card {
	background: #FFFFFF;
	border: 1.5px solid #E2E8F0;
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
	text-decoration: none !important;
}

.sh-news-featured-card:hover {
	transform: translateY(-4px);
	border-color: #CBD5E1;
	box-shadow: 0 16px 32px rgba(225, 29, 72, 0.1);
}

.sh-news-featured-thumb {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #0F172A;
}

.sh-news-featured-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.sh-news-featured-card:hover .sh-news-featured-thumb img {
	transform: scale(1.04);
}

.sh-news-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.sh-news-badge-red {
	background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
}

.sh-news-badge-green {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.sh-news-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.sh-news-title-link {
	color: #0F172A;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.sh-news-featured-card:hover .sh-news-title-link,
.sh-news-grid-card:hover .sh-news-title-link,
.sh-suggested-item:hover .sh-news-title-link {
	color: #E11D48;
}

/* Thẻ tin tức 3 cột hàng dưới */
.sh-news-grid-card {
	background: #FFFFFF;
	border: 1.5px solid #E2E8F0;
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all 0.28s ease;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
	margin-bottom: 16px;
}

.sh-news-grid-card:hover {
	transform: translateY(-4px);
	border-color: #FECDD3;
	box-shadow: 0 12px 28px rgba(225, 29, 72, 0.09);
}

.sh-news-grid-thumb {
	position: relative;
	width: 100%;
	height: 155px;
	overflow: hidden;
	background: #0F172A;
}

.sh-news-grid-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.sh-news-grid-card:hover .sh-news-grid-thumb img {
	transform: scale(1.05);
}

.sh-news-grid-body {
	padding: 14px 12px 14px 12px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Cột phải: Danh sách bài viết gợi ý liên quan */
.sh-suggested-sidebar {
	background: #FFFFFF;
	border: 1.5px solid #E2E8F0;
	border-radius: 18px;
	padding: 20px 18px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
	position: sticky;
	top: 85px;
}

.sh-suggested-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 11px 0;
	border-bottom: 1px dashed #E2E8F0;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.sh-suggested-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sh-suggested-item:hover {
	background: rgba(255, 241, 242, 0.35);
	border-radius: 10px;
	padding-left: 6px;
	padding-right: 6px;
}

.sh-suggested-rank {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
	flex-shrink: 0;
}

.sh-rank-1 {
	background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
}

.sh-rank-2 {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.sh-rank-3 {
	background: linear-gradient(135deg, #BE123C 0%, #9F1239 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(190, 18, 60, 0.25);
}

.sh-rank-default {
	background: #F1F5F9;
	color: #64748B;
	border: 1px solid #CBD5E1;
}

.sh-suggested-thumb {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: #E2E8F0;
}

.sh-suggested-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sh-suggested-item:hover .sh-suggested-thumb img {
	transform: scale(1.08);
}

.sh-suggested-info {
	flex-grow: 1;
	min-width: 0;
}

.sh-tag-pill {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 99px;
	text-decoration: none;
	transition: all 0.2s ease;
	margin: 3px 2px;
}

.sh-tag-pill:hover {
	transform: translateY(-2px);
}

.sh-header-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	max-width: fit-content !important;
	background: #FFF1F2 !important;
	border: 1px solid #FDA4AF !important;
	padding: 6px 16px !important;
	border-radius: 99px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #E11D48 !important;
	box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08) !important;
}









/* Topbar fix for admin-bar */
body.admin-bar #top-bar {
    position: relative;
    z-index: 10;
}

/* ==========================================================================
 * BNI TRUST CHAPTER — MASTER RED-WHITE-SILVER RHYTHMIC DESIGN SYSTEM
 * 1. Multi-shade Red Gradients (Radiant Red #CF2030, Crimson #7F1D1D, Wine #450A0A)
 * 2. Giant Offset Circles (Cropped at edge with radial sheen)
 * 3. Asymmetric Organic Shapes & Large Convex/Concave Curves
 * 4. Flowing Grand Silk Ribbon Transitions (No repetitive small waves)
 * 5. Metallic Platinum / Silver Sheen Transitions (#FFFFFF, #F8FAFC, #EDF2F7)
 * 6. Specular Metallic Light Flares
 * 7. Concise 2-Column Form Sections (Text Left, Form Right)
 * ========================================================================== */

/* Hero Red Gradient Section with Multi-shade Red & Depth */
.bni-hero-section,
.empire-hero-section {
    position: relative !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.24) 0%, transparent 42%),
                radial-gradient(circle at 12% 82%, rgba(225, 29, 72, 0.38) 0%, transparent 50%),
                radial-gradient(ellipse at 60% 45%, rgba(185, 28, 28, 0.92) 0%, rgba(127, 29, 29, 0.98) 65%, #450A0A 100%),
                linear-gradient(135deg, #CF2030 0%, #B91C1C 32%, #7F1D1D 68%, #450A0A 100%) !important;
    color: #FFFFFF !important;
    padding-top: 65px !important;
    padding-bottom: 0px !important;
}

.bni-hero-section .section-content,
.empire-hero-section .section-content {
    padding-bottom: 80px !important;
}

.bni-hero-title {
    color: #FFFFFF !important;
    font-size: clamp(1.75rem, 2.45vw, 2.35rem) !important;
    line-height: 1.25 !important;
    text-wrap: balance !important;
    word-break: normal !important;
}

.bni-hero-title-highlight {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F5 45%, #FECDD3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

.bni-hero-badge,
.bni-form-badge {
    display: inline-block !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    padding: 6px 16px !important;
    border-radius: 99px !important;
    margin-bottom: 18px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.bni-form-section-title {
    color: #FFFFFF !important;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
    line-height: 1.22 !important;
    word-break: break-word !important;
}

/* Giant Offset Circles (Cắt một phần khỏi khung hình) */
.bni-giant-circle-offset {
    position: absolute !important;
    width: 720px !important;
    height: 720px !important;
    border-radius: 50% !important;
    right: -240px !important;
    top: -180px !important;
    background: radial-gradient(circle at 35% 35%, 
        rgba(255, 255, 255, 0.22) 0%, 
        rgba(207, 32, 48, 0.18) 45%, 
        rgba(127, 29, 29, 0.08) 70%, 
        transparent 85%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.bni-giant-circle-left {
    position: absolute !important;
    width: 620px !important;
    height: 620px !important;
    border-radius: 50% !important;
    left: -220px !important;
    bottom: -160px !important;
    background: radial-gradient(circle at 65% 65%, 
        rgba(255, 255, 255, 0.16) 0%, 
        rgba(207, 32, 48, 0.12) 40%, 
        transparent 75%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Asymmetric Organic Blobs (Hình khối hữu cơ bất đối xứng) */
.bni-organic-blob-large {
    position: absolute !important;
    width: 820px !important;
    height: 640px !important;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55% !important;
    top: 10% !important;
    left: -220px !important;
    background: radial-gradient(circle at 60% 40%, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(153, 27, 27, 0.22) 50%, 
        transparent 75%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transform: rotate(-12deg) !important;
}

.bni-organic-blob-convex {
    position: absolute !important;
    width: 900px !important;
    height: 520px !important;
    border-radius: 50% 50% 40% 60% / 60% 50% 50% 40% !important;
    bottom: -180px !important;
    right: 5% !important;
    background: radial-gradient(ellipse at 50% 50%, 
        rgba(207, 32, 48, 0.22) 0%, 
        rgba(69, 10, 10, 0.3) 55%, 
        transparent 75%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Metallic Specular Flares (Điểm sáng nhẹ kim loại) */
.bni-metallic-flare {
    position: absolute !important;
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.35) 25%, 
        rgba(255, 255, 255, 0.06) 55%, 
        transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    filter: blur(2px) !important;
}

/* Grand Silk Ribbon Transitions (Dải lụa lớn uốn lượn) */
.bni-silk-divider-wrap {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    line-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.bni-silk-divider-bottom {
    bottom: -1px !important;
}

.bni-silk-divider-top {
    top: -1px !important;
}

.bni-silk-divider-wrap svg {
    display: block !important;
    width: 100% !important;
    height: 95px !important;
}

@media (max-width: 767px) {
    .bni-silk-divider-wrap svg {
        height: 55px !important;
    }
}

/* Metallic Platinum Surface (Vùng trắng bạc chuyển tiếp) */
.bni-platinum-section,
.bni-light-red-shapes-section {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 45%, #EDF2F7 80%, #F8FAFC 100%) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

/* Deep Red Section (Bảng Vàng Vinh Danh - Section 06) */
.bni-deep-red-section {
    position: relative !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.14) 0%, transparent 50%),
                radial-gradient(circle at 92% 85%, rgba(207, 32, 48, 0.35) 0%, transparent 60%),
                linear-gradient(145deg, #380303 0%, #520808 35%, #7F1D1D 75%, #4C0519 100%) !important;
    color: #FFFFFF !important;
    padding-bottom: 0px !important;
}

.bni-deep-red-section .section-content {
    padding-bottom: 80px !important;
}

/* Stats Section (Thống kê - Section 05) */
.bni-stats-section {
    position: relative !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 45%),
                linear-gradient(135deg, #450A0A 0%, #7F1D1D 45%, #991B1B 80%, #B91C1C 100%) !important;
    color: #FFFFFF !important;
}

/* Dedicated Form Box at Bottom (Section 11) */
.bni-consult-grand-section {
    position: relative !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    padding: 60px 0 85px 0 !important;
}

.bni-form-grand-box {
    position: relative !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
                radial-gradient(circle at 10% 85%, rgba(225, 29, 72, 0.35) 0%, transparent 50%),
                linear-gradient(145deg, #450A0A 0%, #7F1D1D 35%, #B91C1C 75%, #CF2030 100%) !important;
    border-radius: 36px !important;
    padding: 55px 45px !important;
    box-shadow: 0 25px 60px -15px rgba(69, 10, 10, 0.55), 0 10px 25px -5px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

@media (max-width: 767px) {
    .bni-form-grand-box {
        padding: 30px 20px !important;
        border-radius: 24px !important;
    }
    .bni-hero-section .row,
    .bni-consult-grand-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .bni-hero-section .col,
    .bni-consult-grand-section .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .bni-hero-section .col-inner,
    .bni-consult-grand-section .col-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .bni-hero-title {
        font-size: clamp(1.2rem, 5.2vw, 1.35rem) !important;
        line-height: 1.3 !important;
        text-wrap: balance !important;
    }
    .bni-hero-badge,
    .bni-form-badge {
        font-size: 10.5px !important;
        padding: 5px 12px !important;
        white-space: normal !important;
        display: inline-block !important;
        line-height: 1.4 !important;
    }
    .bni-callout-pill-row {
        flex-direction: column !important;
        border-radius: 24px !important;
        padding: 22px 18px !important;
        text-align: center !important;
    }
    .bni-callout-pill-row > div:first-of-type {
        flex-direction: column !important;
        text-align: center !important;
    }
}

.bni-hero-pill-item,
.bni-form-pill-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 7px 16px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.bni-pill-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

/* White Form Card High-Contrast & Metallic Polish */
.bni-card-white,
#form-tu-van.bni-card-white {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 50px -10px rgba(0, 0, 0, 0.38), 0 8px 18px -4px rgba(0, 0, 0, 0.18) !important;
    position: relative !important;
    z-index: 2 !important;
}

.bni-card-white input,
.bni-card-white select {
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    color: #1E293B !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease !important;
}

.bni-card-white input:focus,
.bni-card-white select:focus {
    background: #FFFFFF !important;
    border-color: #CF2030 !important;
    box-shadow: 0 0 0 3px rgba(207, 32, 48, 0.15) !important;
    outline: none !important;
}

.bni-card-white button[type="submit"] {
    background: linear-gradient(135deg, #CF2030 0%, #B91C1C 50%, #991B1B 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(207, 32, 48, 0.35) !important;
    border: none !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #FFFFFF !important;
    transition: all 0.25s ease !important;
}

.bni-card-white button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(207, 32, 48, 0.45) !important;
}

/* ==========================================================================
 * BNI TRUST SUBPAGES ENHANCEMENTS
 * ========================================================================== */
.bni-stats-grid-2x2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.bni-7-values-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.bni-7-values-item {
    flex: 1 1 130px !important;
    max-width: 160px !important;
    min-width: 120px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 14px 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.bni-stats-bar-4col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .bni-stats-bar-4col {
        grid-template-columns: 1fr 1fr !important;
    }
}

.bni-form-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

@media (max-width: 600px) {
    .bni-form-grid-2col {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
 * BNI TRUST — BULLETPROOF MAGAZINE GRID (EXACT MATCH TO ATTACHED SCREENSHOT)
 * ========================================================================== */

.bni-magazine-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: start !important;
}

@media (max-width: 1024px) {
    .bni-magazine-layout {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }
}

/* Left Zone: 2 Columns (~58% Col 1, ~42% Col 2) */
.bni-mag-left-zone {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

@media (max-width: 768px) {
    .bni-mag-left-zone {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* Sub Grid in Col 1: 2 Columns side-by-side */
.bni-mag-sub-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 14px !important;
}

@media (max-width: 540px) {
    .bni-mag-sub-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Main Large Card */
.bni-mag-main-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.25s ease !important;
}
.bni-mag-main-card:hover {
    transform: translateY(-3px) !important;
    border-color: #FECDD3 !important;
    box-shadow: 0 12px 28px rgba(207, 32, 48, 0.1) !important;
}
.bni-mag-main-thumb {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
    background: #0F172A !important;
}
.bni-mag-main-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}
.bni-mag-main-card:hover .bni-mag-main-thumb img {
    transform: scale(1.04) !important;
}

/* Sub Cards */
.bni-mag-sub-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.25s ease !important;
}
.bni-mag-sub-card:hover {
    transform: translateY(-3px) !important;
    border-color: #FECDD3 !important;
    box-shadow: 0 8px 20px rgba(207, 32, 48, 0.08) !important;
}
.bni-mag-sub-thumb {
    position: relative !important;
    width: 100% !important;
    height: 135px !important;
    overflow: hidden !important;
    background: #0F172A !important;
}
.bni-mag-sub-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}
.bni-mag-sub-card:hover .bni-mag-sub-thumb img {
    transform: scale(1.05) !important;
}

/* Middle Top Card */
.bni-mag-mid-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    margin-bottom: 14px !important;
    transition: all 0.25s ease !important;
}
.bni-mag-mid-card:hover {
    transform: translateY(-3px) !important;
    border-color: #FECDD3 !important;
    box-shadow: 0 8px 20px rgba(207, 32, 48, 0.08) !important;
}
.bni-mag-mid-thumb {
    position: relative !important;
    width: 100% !important;
    height: 165px !important;
    overflow: hidden !important;
    background: #0F172A !important;
}
.bni-mag-mid-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}
.bni-mag-mid-card:hover .bni-mag-mid-thumb img {
    transform: scale(1.05) !important;
}

/* 4 List Items below Middle Top Card */
.bni-mag-list-box {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
}
.bni-mag-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.bni-mag-list-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.bni-mag-list-item:first-child {
    padding-top: 0 !important;
}
.bni-mag-list-item:hover {
    transform: translateX(3px) !important;
}
.bni-mag-list-thumb {
    width: 82px !important;
    height: 56px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #E2E8F0 !important;
}
.bni-mag-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}
.bni-mag-list-item:hover .bni-mag-list-thumb img {
    transform: scale(1.08) !important;
}
.bni-mag-list-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.36 !important;
    color: #0F172A !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}
.bni-mag-list-item:hover .bni-mag-list-title {
    color: #CF2030 !important;
}

/* Sidebar Styling */
.bni-mag-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}
.bni-sidebar-related-box {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
}
.bni-related-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 9px 0 !important;
    border-bottom: 1px dashed #E2E8F0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.bni-related-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.bni-related-item:hover {
    background: #FFF5F5 !important;
    border-radius: 8px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.bni-related-rank {
    width: 22px !important;
    height: 22px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
}
.bni-related-thumb {
    width: 64px !important;
    height: 48px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #E2E8F0 !important;
}
.bni-related-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.bni-related-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.34 !important;
    color: #0F172A !important;
    margin: 0 0 3px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}
.bni-related-item:hover .bni-related-title {
    color: #CF2030 !important;
}

.bni-sidebar-reg-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F8 100%) !important;
    border: 1.5px solid #FECDD3 !important;
    border-top: 4px solid #CF2030 !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
    box-shadow: 0 8px 24px rgba(207, 32, 48, 0.08) !important;
}
.bni-reg-input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1.5px solid #CBD5E1 !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    color: #0F172A !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    margin-bottom: 9px !important;
    transition: border-color 0.2s ease !important;
}
.bni-reg-input:focus {
    outline: none !important;
    border-color: #CF2030 !important;
    box-shadow: 0 0 0 3px rgba(207, 32, 48, 0.15) !important;
}
.bni-reg-select {
    width: 100% !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1.5px solid #CBD5E1 !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    color: #0F172A !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
}
.bni-reg-btn {
    width: 100% !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #CF2030 0%, #B91C1C 100%) !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 6px 18px rgba(207, 32, 48, 0.35) !important;
    transition: all 0.25s ease !important;
}
.bni-reg-btn:hover {
    background: linear-gradient(135deg, #E11D48 0%, #CF2030 100%) !important;
    box-shadow: 0 8px 24px rgba(207, 32, 48, 0.45) !important;
    transform: translateY(-2px) !important;
}

#bni-event-success-alert,
#bni-trial-success-box {
    display: none !important;
}

/* ==========================================================================
 * BNI.VN STYLE ABOUT PAGE & PYRAMID ORG CHART (RED & WHITE TONE)
 * ========================================================================== */

/* Tiêu đề mục phong cách BNI.VN */
.bni-heading-vn {
    color: #CF2030 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
    text-transform: none !important;
}

.bni-heading-line {
    width: 60px !important;
    height: 3px !important;
    background-color: #CF2030 !important;
    margin: 0 auto 32px auto !important;
}

/* Khối ảnh lồng khung đỏ BNI */
.bni-photo-wrap-red {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 20px auto !important;
}

.bni-photo-wrap-red::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    left: -14px !important;
    width: 100% !important;
    height: 100% !important;
    background: #CF2030 !important;
    border-radius: 8px !important;
    z-index: 0 !important;
}

.bni-photo-wrap-red img {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Thống kê 4 cột phong cách BNI Global Stats */
.bni-vn-stats-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 8px !important;
    padding: 30px 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    margin: 30px 0 !important;
}

.bni-vn-stat-item {
    flex: 1 1 25% !important;
    text-align: center !important;
    padding: 10px 15px !important;
    border-right: 1px solid #CF2030 !important;
    box-sizing: border-box !important;
}

.bni-vn-stat-item:last-child {
    border-right: none !important;
}

.bni-vn-stat-num {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #CF2030 !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
}

.bni-vn-stat-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
}

@media (max-width: 768px) {
    .bni-vn-stats-row {
        flex-wrap: wrap !important;
    }
    .bni-vn-stat-item {
        flex: 1 1 50% !important;
        margin-bottom: 20px !important;
    }
    .bni-vn-stat-item:nth-child(2) {
        border-right: none !important;
    }
}

/* 7 Giá trị cốt lõi phong cách BNI.VN góc vuông đỏ */
.bni-val-box {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}

.bni-val-numb {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-top: 3px solid #CF2030 !important;
    border-left: 3px solid #CF2030 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #CF2030 !important;
    box-sizing: border-box !important;
    padding-top: 2px !important;
    padding-left: 2px !important;
}

.bni-val-content {
    flex: 1 1 auto !important;
}

.bni-val-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
}

.bni-val-desc {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* SƠ ĐỒ BỘ MÁY KIM TỰ THÁP (PYRAMID ORG CHART) */
.bni-pyramid-wrap {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
}

/* Tầng 1: Đỉnh Kim Tự Tháp (Chủ tịch) */
.bni-pyramid-tier-1 {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.bni-pyramid-card-apex {
    width: 100% !important;
    max-width: 380px !important;
    background: #FFFFFF !important;
    border: 2px solid #CF2030 !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(207, 32, 48, 0.12) !important;
    position: relative !important;
}

/* Đường nối dọc đỏ */
.bni-pyramid-line-v {
    width: 2px !important;
    height: 32px !important;
    background: #CF2030 !important;
    margin: 0 auto !important;
}

/* Tầng 2: Thân Kim Tự Tháp (Phó chủ tịch) */
.bni-pyramid-tier-2 {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.bni-pyramid-card-mid {
    width: 100% !important;
    max-width: 380px !important;
    background: #FFFFFF !important;
    border: 2px solid #CF2030 !important;
    border-radius: 12px !important;
    padding: 22px 20px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    position: relative !important;
}

/* Nhánh rẽ chân đế Kim Tự Tháp */
.bni-pyramid-branch-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.bni-pyramid-branch-bar {
    width: 88% !important;
    height: 2px !important;
    background: #CF2030 !important;
    margin: 0 auto !important;
}

.bni-pyramid-branch-drop {
    display: flex !important;
    justify-content: space-around !important;
    width: 88% !important;
    margin: 0 auto !important;
}

.bni-pyramid-drop-stem {
    width: 2px !important;
    height: 20px !important;
    background: #CF2030 !important;
}

/* Tầng 3: Đáy Kim Tự Tháp (6 Trưởng ban LT) */
.bni-pyramid-tier-3 {
    width: 100% !important;
    margin: 0 auto !important;
}

.bni-pyramid-card-base {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-top: 3.5px solid #CF2030 !important;
    border-radius: 10px !important;
    padding: 20px 14px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.bni-pyramid-card-base:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(207, 32, 48, 0.1) !important;
    border-color: #CF2030 !important;
}

/* Avatar chuẩn doanh nhân */
.bni-avatar-leader {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #CF2030 !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.bni-avatar-lt {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2.5px solid #CF2030 !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Nhãn chức danh */
.bni-position-tag {
    display: inline-block !important;
    background: #FFF5F5 !important;
    border: 1px solid #FCA5A5 !important;
    color: #CF2030 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.bni-person-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.bni-company-name {
    font-size: 12px !important;
    color: #64748B !important;
    font-weight: 600 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
}

.bni-role-desc {
    font-size: 12.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    border-top: 1px dashed #E2E8F0 !important;
    padding-top: 8px !important;
    width: 100% !important;
}

/* Agenda 20 steps card */
.bni-agenda-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-top: 4px solid #CF2030 !important;
    border-radius: 12px !important;
    padding: 30px 26px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.bni-agenda-item {
    padding: 12px 16px !important;
    border-left: 3.5px solid #CF2030 !important;
    background: #F8FAFC !important;
    border-radius: 0 8px 8px 0 !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

.bni-agenda-item:last-child {
    margin-bottom: 0 !important;
}

.bni-agenda-item:hover {
    background: #FFF5F5 !important;
    border-left-color: #991B1B !important;
    transform: translateX(4px) !important;
}

.bni-agenda-time {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.35 !important;
}

.bni-agenda-desc {
    font-size: 13px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 4px 0 0 0 !important;
}

/* Feature check items */
.bni-feature-check-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.bni-feature-check-icon {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #FFF1F2 !important;
    border: 1.5px solid #FDA4AF !important;
    color: #CF2030 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    margin-top: 1px !important;
}

.bni-feature-check-text {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.55 !important;
}

/* Step cards */
.bni-step-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 28px 22px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.bni-step-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(207, 32, 48, 0.1) !important;
}

.bni-step-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    margin-bottom: 16px !important;
}

.bni-step-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
}

.bni-step-desc {
    font-size: 13.5px !important;
    color: #64748B !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Bảng Vàng Cards - Tối ưu hiển thị Tone Đỏ - Trắng & Chữ Rõ Nét */
.bni-deep-red-section .bni-card-white h4,
.bni-deep-red-section .bni-card-white h4 span {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.bni-deep-red-section .bni-card-white .bni-card-sub,
.bni-deep-red-section .bni-card-white div[style*="color:#FFE4E6"] {
    color: #FFE4E6 !important;
}

.bni-deep-red-section .bni-card-white div[style*="color:#CF2030"] {
    color: #CF2030 !important;
}

.bni-deep-red-section .bni-card-white div[style*="color:#0F172A"] {
    color: #0F172A !important;
}

.bni-deep-red-section .bni-card-white p[style*="color:#334155"] {
    color: #334155 !important;
}

/* Fix wpautop line breaks & optimize button/pill alignment on BNI pages */
.bni-intro-sec-agenda span br,
.bni-intro-sec-process span br,
.bni-intro-sec-1 a br,
.bni-invite-section button br,
.bni-invite-section a br,
.bni-step-badge br,
.bni-step-title br {
    display: none !important;
}

#bni-trial-register-form button[type="submit"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 13px 20px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.bni-step-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.bni-intro-sec-1 div[style*="background:#CF2030"] h4,
.bni-intro-sec-1 div[style*="background:#CF2030"] h4 span {
    color: #FFFFFF !important;
}