/* ========================================================
   SANTE HOSPITAL - QUIET LUXURY HEALTHCARE DESIGN SYSTEM
   Brand Identity: Navy (#211261), Mint Teal (#00CE7C), Soft Gold (#DFBA73)
   ======================================================== */

html, body, #wrapper, #main, .content {
    overflow-x: clip !important;
    max-width: 100vw !important;
}

body.canhcam {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #1E293B;
    background-color: #FAFCFB;
    padding-top: 0 !important;
    margin: 0 !important;
    -webkit-font-smoothing: antialiased;
}

/* ========================================================
   1. GLOBAL HEADER & QUIET LUXURY TOPBAR
   ======================================================== */
body.canhcam .global-header,
.homepage .global-header,
.subpage .global-header,
.global-header {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 25px rgba(33, 18, 97, 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    margin: 0 !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* KHI CUỘN XUỐNG: ADAPTIVE SMART COMPACT HEADER */
body.canhcam .global-header.sante-header-scrolled,
.global-header.sante-header-scrolled {
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 30px rgba(33, 18, 97, 0.1) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.canhcam .global-header .header-top,
.global-header .header-top {
    transition: padding 0.3s ease;
}

body.canhcam .global-header.sante-header-scrolled .header-top,
.global-header.sante-header-scrolled .header-top {
    padding: 2px 0 !important;
}

body.canhcam .global-header .header-logo-col .sante-brand-logo img,
.global-header .header-logo-col .sante-brand-logo img {
    transition: height 0.3s ease, transform 0.3s ease;
}

body.canhcam .global-header.sante-header-scrolled .header-logo-col .sante-brand-logo img,
.global-header.sante-header-scrolled .header-logo-col .sante-brand-logo img {
    height: 52px !important;
    transform: scale(0.96);
}

body.canhcam .global-header .sante-search-capsule,
.global-header .sante-search-capsule {
    transition: height 0.3s ease, padding 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}

body.canhcam .global-header.sante-header-scrolled .sante-search-capsule,
.global-header.sante-header-scrolled .sante-search-capsule {
    height: 36px !important;
    padding: 0 12px !important;
}

body.canhcam .global-header .sante-hotline-badge,
.global-header .sante-hotline-badge {
    transition: padding 0.3s ease, background 0.25s ease;
}

body.canhcam .global-header.sante-header-scrolled .sante-hotline-badge,
.global-header.sante-header-scrolled .sante-hotline-badge {
    padding: 4px 14px 4px 6px !important;
}

body.canhcam .global-header.sante-header-scrolled .sante-hotline-badge .hotline-icon-wrap,
.global-header.sante-header-scrolled .sante-hotline-badge .hotline-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    font-size: 13.5px !important;
}

body.canhcam .global-header.sante-header-scrolled .sante-hotline-badge .hotline-num,
.global-header.sante-header-scrolled .sante-hotline-badge .hotline-num {
    font-size: 13.5px !important;
}

body.canhcam .global-header .sante-btn-booking,
.global-header .sante-btn-booking {
    transition: padding 0.3s ease, font-size 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

body.canhcam .global-header.sante-header-scrolled .sante-btn-booking,
.global-header.sante-header-scrolled .sante-btn-booking {
    padding: 7px 16px !important;
    min-height: 38px !important;
    font-size: 13px !important;
}

body.canhcam .global-header .sante-lang-pill,
.global-header .sante-lang-pill {
    transition: padding 0.3s ease, font-size 0.3s ease, background 0.25s ease;
}

body.canhcam .global-header.sante-header-scrolled .sante-lang-pill,
.global-header.sante-header-scrolled .sante-lang-pill {
    padding: 5px 10px !important;
    min-height: 34px !important;
    font-size: 12px !important;
}

body.canhcam .global-header .header-bottom,
.global-header .header-bottom {
    transition: padding 0.3s ease;
}

body.canhcam .global-header.sante-header-scrolled .header-bottom,
.global-header.sante-header-scrolled .header-bottom {
    padding: 0 !important;
}

body.canhcam .global-header .sante-main-navigation ul li a,
.global-header .sante-main-navigation ul li a {
    transition: padding 0.3s ease, font-size 0.3s ease, color 0.25s ease;
}

body.canhcam .global-header.sante-header-scrolled .sante-main-navigation ul li a,
.global-header.sante-header-scrolled .sante-main-navigation ul li a {
    padding: 6px 14px !important;
    font-size: 14.5px !important;
}

#main {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.global-header .container {
    max-width: 1240px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.global-header .header-top {
    padding: 5px 0;
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
}

.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header-logo-col .sante-brand-logo img {
    height: 70px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-logo-col .sante-brand-logo:hover img {
    transform: scale(1.02);
}

/* 1.2 Search Capsule (Gọn gàng 280px, không lệch layout) */
.header-search-col {
    flex: 0 0 320px;
    max-width: 320px;
}

.sante-search-capsule {
    position: relative;
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 999px;
    padding: 2px 14px;
    height: 42px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sante-search-capsule:focus-within {
    background: #FFFFFF;
    border-color: #00CE7C;
    box-shadow: 0 0 0 3.5px rgba(0, 206, 124, 0.15);
}

.sante-search-capsule .search-icon {
    color: #00CE7C;
    font-size: 14px;
    margin-right: 8px;
    transition: color 0.2s ease;
}

.sante-search-capsule:focus-within .search-icon {
    color: #211261;
}

.sante-search-capsule .search-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    width: 100%;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit;
}

.sante-search-capsule .search-input::placeholder {
    color: #94A3B8;
    font-size: 13px;
}

/* 1.2.1 Sante Master Live Search Dropdown */
.sante-live-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 420px;
    max-width: 92vw;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
    border: 1px solid #E2E8F0;
    overflow: hidden;
    z-index: 999999;
    display: none;
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
    animation: santeSearchFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes santeSearchFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sante-search-header {
    padding: 10px 16px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748B;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
}

.sante-search-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 6px 0;
    margin: 0;
    list-style: none;
}

.sante-search-list::-webkit-scrollbar {
    width: 5px;
}
.sante-search-list::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.sante-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    text-decoration: none !important;
    color: #1E293B !important;
    transition: background 0.15s ease, border-left-color 0.15s ease;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.sante-search-item:hover,
.sante-search-item.is-selected {
    background: #F0FDF4;
    border-left-color: #00A651;
}

.sante-search-thumb-wrap {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E8F0;
}

.sante-search-thumb-wrap.placeholder {
    font-size: 18px;
    background: #F8FAFC;
}

.sante-search-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sante-search-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sante-search-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sante-search-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.sante-search-badge.badge-doctor {
    background: #E0F2FE;
    color: #0369A1;
}

.sante-search-badge.badge-specialty {
    background: #FEF3C7;
    color: #92400E;
}

.sante-search-badge.badge-post {
    background: #F1F5F9;
    color: #475569;
}

.sante-search-badge.badge-page {
    background: #EDE9FE;
    color: #6D28D9;
}

.sante-search-subtitle {
    font-size: 11.5px;
    color: #64748B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sante-search-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sante-search-item:hover .sante-search-title,
.sante-search-item.is-selected .sante-search-title {
    color: #007A3D;
}

.sante-search-highlight {
    font-weight: 700;
    color: #00A651;
    background: transparent;
}

.sante-search-arrow {
    color: #94A3B8;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.sante-search-item:hover .sante-search-arrow,
.sante-search-item.is-selected .sante-search-arrow {
    transform: translateX(3px);
    color: #00A651;
}

.sante-search-footer {
    display: block;
    padding: 10px 16px;
    background: #F8FAFC;
    color: #00A651 !important;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    border-top: 1px solid #F1F5F9;
    transition: background 0.15s ease, color 0.15s ease;
}

.sante-search-footer:hover {
    background: #F0FDF4;
    color: #006837 !important;
}

.sante-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    font-size: 13px;
    color: #64748B;
}

.sante-search-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #E2E8F0;
    border-top-color: #00A651;
    border-radius: 50%;
    animation: santeSearchSpin 0.65s linear infinite;
    display: inline-block;
}

@keyframes santeSearchSpin {
    to {
        transform: rotate(360deg);
    }
}

.sante-search-empty {
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    color: #64748B;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .sante-live-search-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        width: 100%;
        min-width: 290px;
        max-width: 92vw;
    }
}

/* 1.3 Actions & Utilities */
.header-actions-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

/* Hotline Badge Card (Tạo chiều sâu 3D & Hiệu ứng nổi bật) */
.sante-hotline-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    padding: 6px 18px 6px 8px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 14px rgba(33, 18, 97, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.sante-hotline-badge:hover {
    background: #FFFFFF;
    border-color: #00CE7C;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 206, 124, 0.18), 0 2px 6px rgba(33, 18, 97, 0.08);
}

.sante-hotline-badge .hotline-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #211261 0%, #150B42 100%);
    color: #00CE7C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(33, 18, 97, 0.3);
    transition: transform 0.3s ease;
}

.sante-hotline-badge:hover .hotline-icon-wrap {
    transform: scale(1.08) rotate(-10deg);
}

.sante-hotline-badge .hotline-text-wrap {
    display: flex;
    flex-direction: column;
}

.sante-hotline-badge .hotline-sub {
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.06em;
    line-height: 1.1;
    margin-bottom: 2px;
}

.sante-hotline-badge .hotline-num {
    font-size: 15px;
    font-weight: 800;
    color: #211261;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Luxury Primary CTA Booking Button (Chiều sâu 3D & Ánh kim tinh tế) */
.sante-btn-booking {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%);
    color: #FFFFFF !important;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    letter-spacing: 0.03em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 18px rgba(0, 206, 124, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sante-btn-booking::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s ease;
}

.sante-btn-booking:hover::before {
    left: 100%;
}

.sante-btn-booking:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 206, 124, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, #00E58A 0%, #00CE7C 100%);
}

.sante-btn-booking .btn-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
}

/* Language Dropdown Selector (VN / EN / JA with Flags) */
.sante-lang-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.sante-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    min-height: 38px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1E293B;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    outline: none;
    line-height: 1;
}

.sante-lang-pill .lang-flag-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.sante-lang-pill .sante-flag {
    display: inline-block;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}

.sante-lang-pill .icon-chevron {
    font-size: 10px;
    color: #64748B;
    transition: transform 0.25s ease;
    margin-left: 2px;
}

.sante-lang-dropdown-wrapper.is-open .sante-lang-pill {
    color: #211261 !important;
    border-color: #00CE7C;
    box-shadow: 0 4px 14px rgba(0, 206, 124, 0.16);
}

.sante-lang-dropdown-wrapper.is-open .icon-chevron {
    transform: rotate(180deg);
    color: #00CE7C;
}

.sante-lang-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 170px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(33, 18, 97, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 6px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Invisible hover bridge to prevent menu from disappearing */
.sante-lang-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.sante-lang-dropdown-wrapper.is-open .sante-lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Desktop Hover Bridge (Only on screen >= 992px with true mouse hover support) */
@media (hover: hover) and (min-width: 992px) {
    .sante-lang-dropdown-wrapper:hover .sante-lang-pill {
        color: #211261 !important;
        border-color: #00CE7C;
        box-shadow: 0 4px 14px rgba(0, 206, 124, 0.16);
    }
    .sante-lang-dropdown-wrapper:hover .icon-chevron {
        transform: rotate(180deg);
        color: #00CE7C;
    }
    .sante-lang-dropdown-wrapper:hover .sante-lang-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.sante-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.18s ease;
}

.sante-lang-option .lang-option-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.sante-lang-option .sante-flag {
    display: inline-block;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.sante-lang-option .lang-option-label {
    flex: 1;
    white-space: nowrap;
}

.sante-lang-option .lang-option-check {
    font-size: 11px;
    color: #00CE7C;
    margin-left: auto;
}

.sante-lang-option:hover {
    background: #F8FAFC;
    color: #211261 !important;
}

.sante-lang-option.is-active {
    background: #F0FDF4;
    color: #00CE7C !important;
    font-weight: 700;
}

/* ========================================================
   1.5 MOBILE RESPONSIVE & OFF-CANVAS DRAWER
   ======================================================== */
.mobile-toggles {
    display: none;
    align-items: center;
    gap: 8px;
}

.mobile-toggles .btn-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #211261;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mobile-toggles .btn-toggle:hover,
.mobile-toggles .btn-toggle.is-active {
    background: #00CE7C;
    color: #FFFFFF;
}

/* ========================================================
   1.6 MOBILE SEARCH BAR & DRAWER SEARCH
   ======================================================== */
.search-wrapper,
.sante-mobile-search-wrapper {
    display: none;
}

@media (max-width: 991px) {
    .search-wrapper.sante-mobile-search-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0 12px 28px rgba(33, 18, 97, 0.12);
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        border-bottom: 1px solid #E2E8F0;
        padding: 10px 0;
        z-index: 1005;
        box-sizing: border-box;
    }
    .search-wrapper.sante-mobile-search-wrapper .container {
        padding: 0 16px;
    }
    .mobile-search-form {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        background: #F8FAFC;
        border: 1.5px solid #00CE7C;
        border-radius: 99px;
        padding: 0 10px 0 16px;
        box-shadow: 0 2px 8px rgba(0, 206, 124, 0.12);
        transition: all 0.2s ease;
        box-sizing: border-box;
        margin: 0;
    }
    .mobile-search-form:focus-within {
        background: #FFFFFF;
        border-color: #00A651;
        box-shadow: 0 4px 14px rgba(0, 206, 124, 0.22);
    }
    .mobile-search-form .search-icon {
        font-size: 16px;
        color: #00CE7C;
        margin-right: 10px;
        flex-shrink: 0;
    }
    .mobile-search-form .search-input {
        width: 100%;
        height: 42px;
        border: none !important;
        background: transparent !important;
        font-size: 14px;
        font-weight: 500;
        color: #211261;
        outline: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .mobile-search-form .search-input::placeholder {
        color: #94A3B8;
        font-weight: 400;
    }
    .mobile-search-form .mobile-search-close {
        border: none;
        background: transparent;
        color: #94A3B8;
        font-size: 18px;
        cursor: pointer;
        padding: 4px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: color 0.2s ease;
    }
    .mobile-search-form .mobile-search-close:hover {
        color: #E11D48;
    }
    .mobile-search-form .sante-live-search-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16) !important;
        border-radius: 14px !important;
    }
}

@media (min-width: 992px) {
    .search-wrapper,
    .sante-mobile-search-wrapper {
        display: none !important;
    }
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.mobile-menu.is-open .mobile-menu-overlay {
    opacity: 1;
}

.mobile-menu-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 310px;
    max-width: 85vw;
    height: 100%;
    background: #FFFFFF;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 2; /* Nâng cao hơn lớp overlay để không bị overlay chặn click */
    pointer-events: auto !important; /* Ghi đè triệt để pointer-events: none từ main.min.css cũ */
}

.mobile-menu-body,
.mobile-menu-footer,
.mobile-menu-footer .sante-btn-booking {
    pointer-events: auto !important;
}

.mobile-menu.is-open .mobile-menu-wrapper {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
    background: #FAFCFE;
}

.mobile-menu-header .logo-w img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.mobile-menu-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-menu-close:hover {
    background: #211261;
    color: #FFFFFF;
}

.mobile-menu-body {
    padding: 15px 20px;
    flex: 1;
}

.mobile-menu-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-nav ul li {
    border-bottom: 1px solid #F1F5F9;
}

.mobile-menu-nav ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1E293B;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-menu-nav ul li a em {
    font-size: 16px;
    color: #00CE7C;
    width: 20px;
}

.mobile-menu-nav ul li.active a,
.mobile-menu-nav ul li a:hover {
    color: #211261;
    font-weight: 700;
}

.mobile-menu-footer {
    padding: 20px;
    border-top: 1px solid #F1F5F9;
    background: #FAFCFE;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sante-drawer-lang-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px dashed #E2E8F0;
    margin-bottom: 4px;
}

.sante-drawer-lang-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.sante-drawer-lang-options {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sante-drawer-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.sante-drawer-lang-pill.is-active {
    background: #F0FDF4;
    border-color: #00CE7C;
    color: #00CE7C !important;
}

.sante-drawer-lang-pill:hover {
    color: #211261 !important;
    border-color: #00CE7C;
}

.sante-drawer-lang-pill .sante-flag {
    display: inline-block;
    border-radius: 2px;
}

.mobile-menu-footer .sante-btn-booking {
    width: 100%;
    justify-content: center;
}

.mobile-menu-footer .sante-hotline-badge {
    width: 100%;
    justify-content: center;
}

/* Responsive Breakpoints (< 992px) */
@media (max-width: 991px) {
    .global-header .header-top {
        padding: 8px 0;
    }
    .header-search-col {
        display: none;
    }
    .header-actions-col .sante-hotline-badge,
    .header-actions-col .sante-btn-booking {
        display: none;
    }
    .mobile-toggles {
        display: flex;
    }
    .header-logo-col .sante-brand-logo img {
        height: 38px;
    }
}

/* ========================================================
   1.4 MAIN NAVIGATION BAR (CĂN GIỮA HOÀN HẢO)
   ======================================================== */
.global-header .header-bottom {
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
    position: relative;
    padding: 2px 0;
}

.header-bottom-container {
    display: flex;
    justify-content: center !important;
    align-items: center;
}

.sante-main-navigation {
    display: flex;
    justify-content: center;
    width: 100%;
}

.sante-main-navigation ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 6px !important;
    width: auto !important;
}

.sante-main-navigation ul li {
    position: relative;
    margin: 0;
}

.sante-main-navigation ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: #334155;
    text-decoration: none !important;
    border-radius: 8px;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sante-main-navigation ul li a em.fa-home {
    font-size: 19px;
}

.sante-main-navigation ul li a:hover {
    color: #211261;
    background: #F1F5F9;
}

/* Active Indicator */
.sante-main-navigation ul li.active a {
    color: #211261;
    font-weight: 800;
    background: #EEF5F7;
}

.sante-main-navigation ul li.active a em {
    color: #211261;
}

.sante-main-navigation ul li.active a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 16px;
    right: 16px;
    height: 3px;
    background: #00CE7C;
    border-radius: 3px 3px 0 0;
}

/* ========================================================
   2. HERO SLIDER & BANNER (FLUID 100% - ASPECT RATIO 1920 / 720)
   ======================================================== */
.home-banner {
    position: relative;
    background: #F8FAFC;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    display: block;
    clear: both;
}

.home-banner .home-banner-slider-wrapper,
.home-banner .Module,
.home-banner .ModuleContent,
.home-banner .home-banner-slider,
.home-banner .swiper-container,
.home-banner .swiper-wrapper,
.home-banner .swiper-slide,
.home-banner .banner-item,
.home-banner .banner-item .banner-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.home-banner .banner-item .banner-img figure {
    width: 100% !important;
    aspect-ratio: 1920 / 720 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative;
    display: block !important;
    background: #F8FAFC;
}

.home-banner .banner-item .banner-img figure a {
    display: block;
    width: 100%;
    height: 100%;
}

.home-banner .banner-item .banner-img figure img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none !important;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .home-banner .banner-item .banner-img figure {
        aspect-ratio: 1920 / 720 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .home-banner .banner-item .banner-img figure img {
        object-fit: contain !important;
    }
}

.home-banner .banner-item .banner-img figure::after {
    display: none !important;
}

.home-banner .swiper-pagination-wrap,
.home-banner .swiper-pagination,
.home-banner .swiper-navigation,
.home-banner .swiper-btn,
.home-banner .swiper-button-prev,
.home-banner .swiper-button-next {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ========================================================
   QUICK-ACCESS ACTION STRIP (TỰ ĐỘNG ẨN KHI TRƯỢT TRÊN MỌI MÀN HÌNH)
   ======================================================== */
.sante-quick-strip-section {
    position: relative !important;
    width: 100% !important;
    padding: 20px 0 12px 0 !important;
    background: #F8FAFC !important;
    margin: 0 !important;
    display: block !important;
    z-index: 10 !important;
    clear: both;
    border-bottom: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                margin 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s;
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    will-change: opacity, transform, max-height;
}

/* KHI NGƯỜI DÙNG TRƯỢT 1 CÁI -> BIẾN MẤT HOÀN TOÀN TRÊN MỌI MÀN HÌNH */
body.sante-scrolled .sante-quick-strip-section,
.sante-quick-strip-section.is-scrolled-hidden {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* TỰ ĐỘNG ẨN TRÊN CÁC MÀN HÌNH CAO / VUÔNG KHI SECTION 2 ĐÃ HIỂN THỊ RÕ RÀNG */
@media (max-aspect-ratio: 17/10) and (min-height: 800px) {
    .sante-quick-strip-section {
        display: none !important;
    }
}

.sante-quick-strip-section .container {
    max-width: clamp(1180px, 92vw, 1560px) !important;
    padding: 0 16px !important;
}

/* Nâng độ cao cụm nút tròn Widget để không bao giờ chạm vào Quick Bar */
.fixed-stuff {
    position: fixed !important;
    bottom: 85px !important;
    right: 18px !important;
    z-index: 1000 !important;
}

.sante-quick-bar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 0.9vw, 18px);
    align-items: stretch;
}

.quick-pill-item {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 14px);
    padding: clamp(9px, 0.75vw, 13px) clamp(12px, 1.1vw, 20px);
    background: #FFFFFF;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    border-radius: clamp(10px, 0.9vw, 16px);
    text-decoration: none !important;
    color: #1E293B !important;
    box-shadow: 0 4px 16px rgba(33, 18, 97, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.quick-pill-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-radius: 3px 0 0 3px;
    transition: width 0.2s ease;
}

.quick-pill-icon {
    width: clamp(34px, 2.4vw, 44px);
    height: clamp(34px, 2.4vw, 44px);
    min-width: clamp(34px, 2.4vw, 44px);
    border-radius: clamp(8px, 0.6vw, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(15px, 1.1vw, 19px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-pill-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.quick-pill-title {
    font-size: clamp(12.5px, 0.85vw, 15px);
    font-weight: 800;
    color: #211261;
    line-height: 1.25;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.quick-pill-sub {
    font-size: clamp(10.5px, 0.7vw, 12.5px);
    font-weight: 600;
    color: #64748B;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-pill-arrow {
    font-size: clamp(11.5px, 0.8vw, 14px);
    color: #94A3B8;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(0);
}

/* Hover States per Tone */
.quick-pill-item:hover {
    transform: translateY(-4px);
    background: #FFFFFF;
    box-shadow: 0 22px 50px rgba(33, 18, 97, 0.24), 0 6px 16px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 1);
}

.quick-pill-item:hover .quick-pill-arrow {
    transform: translateX(4px);
}

.quick-pill-item:hover .quick-pill-icon {
    transform: scale(1.08);
}

/* Azure */
.quick-pill-item.tone-azure::before { background: #0088FF; }
.quick-pill-item.tone-azure .quick-pill-icon { background: rgba(0, 136, 255, 0.12); color: #0070D2; }
.quick-pill-item.tone-azure:hover { border-color: rgba(0, 136, 255, 0.4); }
.quick-pill-item.tone-azure:hover .quick-pill-icon { background: #0088FF; color: #FFFFFF; }
.quick-pill-item.tone-azure:hover .quick-pill-title { color: #0070D2; }
.quick-pill-item.tone-azure:hover .quick-pill-arrow { color: #0070D2; }

/* Mint */
.quick-pill-item.tone-mint::before { background: #00CE7C; }
.quick-pill-item.tone-mint .quick-pill-icon { background: rgba(0, 206, 124, 0.12); color: #00965B; }
.quick-pill-item.tone-mint:hover { border-color: rgba(0, 206, 124, 0.4); }
.quick-pill-item.tone-mint:hover .quick-pill-icon { background: #00CE7C; color: #FFFFFF; }
.quick-pill-item.tone-mint:hover .quick-pill-title { color: #00965B; }
.quick-pill-item.tone-mint:hover .quick-pill-arrow { color: #00965B; }

/* Purple */
.quick-pill-item.tone-purple::before { background: #6366F1; }
.quick-pill-item.tone-purple .quick-pill-icon { background: rgba(99, 102, 241, 0.12); color: #4F46E5; }
.quick-pill-item.tone-purple:hover { border-color: rgba(99, 102, 241, 0.4); }
.quick-pill-item.tone-purple:hover .quick-pill-icon { background: #6366F1; color: #FFFFFF; }
.quick-pill-item.tone-purple:hover .quick-pill-title { color: #4F46E5; }
.quick-pill-item.tone-purple:hover .quick-pill-arrow { color: #4F46E5; }

/* Gold */
.quick-pill-item.tone-gold::before { background: #F59E0B; }
.quick-pill-item.tone-gold .quick-pill-icon { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.quick-pill-item.tone-gold:hover { border-color: rgba(245, 158, 11, 0.4); }
.quick-pill-item.tone-gold:hover .quick-pill-icon { background: #F59E0B; color: #FFFFFF; }
.quick-pill-item.tone-gold:hover .quick-pill-title { color: #D97706; }
.quick-pill-item.tone-gold:hover .quick-pill-arrow { color: #D97706; }

/* ========================================================
   MULTI-VIEWPORT RESPONSIVE SYSTEM (1280px - 1920px+)
   ======================================================== */

/* Màn hình Laptop Lớn (1440px - 1680px) */
@media (max-width: 1680px) {
    .sante-main-navigation ul li a {
        padding: 7.5px 14px;
        font-size: 15px;
    }
    .header-logo-col .sante-brand-logo img {
        height: 66px;
    }
}

@media (max-width: 1440px) {
    .sante-main-navigation ul li a {
        padding: 7px 12px;
        font-size: 14px;
    }
    .header-logo-col .sante-brand-logo img {
        height: 62px;
    }
    .header-search-col {
        flex: 0 0 260px;
        max-width: 260px;
    }
    .sante-hotline-badge {
        padding: 4.5px 12px 4.5px 6px;
        gap: 7px;
    }
    .sante-hotline-badge .hotline-title {
        font-size: 12px;
    }
    .sante-btn-booking {
        padding: 7px 14px;
        font-size: 12px;
    }
}

/* Màn hình Laptop Phổ thông (1280px, 1360px, 1366px) */
@media (max-width: 1366px) {
    .sante-main-navigation ul li a {
        padding: 6px 9px;
        font-size: 13.5px;
        gap: 4px;
    }
    .sante-main-navigation ul li a em.fa-home {
        font-size: 16px;
    }
    .header-logo-col .sante-brand-logo img {
        height: 56px;
    }
    .header-search-col {
        flex: 0 0 220px;
        max-width: 220px;
    }
    .sante-search-capsule {
        height: 38px;
        padding: 2px 10px;
    }
    .sante-search-capsule .search-input {
        font-size: 12px !important;
    }
    .sante-hotline-badge {
        padding: 4px 10px 4px 5px;
        gap: 6px;
    }
    .sante-hotline-badge .hotline-title {
        font-size: 11.5px;
    }
    .sante-hotline-badge .hotline-sub {
        font-size: 9px;
    }
    .sante-btn-booking {
        padding: 6.5px 12px;
        font-size: 11.5px;
    }
}

/* Màn hình Tablet & Dưới 1200px */
@media (max-width: 1199px) {
    .sante-banner-quick-bar {
        display: none !important;
    }
    .sante-main-navigation ul li a {
        padding: 6px 8px;
        font-size: 12.5px;
        gap: 3px;
    }
    .header-logo-col .sante-brand-logo img {
        height: 50px;
    }
    .header-search-col {
        flex: 0 0 190px;
        max-width: 190px;
    }
    .sante-btn-booking {
        padding: 6px 10px;
        font-size: 11px;
    }
}

@media (max-width: 991px) {
    .sante-banner-quick-bar {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .sante-quick-bar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .quick-pill-item {
        padding: 6px 8px;
    }
    .quick-pill-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 11px;
    }
    .quick-pill-title {
        font-size: 10.5px;
    }
    .sante-banner-quick-bar {
        padding-bottom: 4px;
    }
}

/* ========================================================
   3. SECTION 2: INTRO & 4 MEDICAL PORTALS (FV / HOAN MY LUXURY TONES)
   ======================================================== */
.home-intro-section {
    padding: 85px 0 95px 0;
    background: #F4F8FA;
    position: relative;
    overflow: visible;
    border-top: none !important;
    border-bottom: 1px solid #E2E8F0;
}

.home-intro-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -100px;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(0, 206, 124, 0.09) 0%, rgba(244, 248, 250, 0) 70%);
    pointer-events: none;
}

.home-intro-section::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(33, 18, 97, 0.05) 0%, rgba(244, 248, 250, 0) 70%);
    pointer-events: none;
}

.sante-intro-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Cột Trái: Storytelling Thanh Lịch */
.sante-story-col {
    padding-right: 25px;
    position: relative;
    z-index: 2;
}

.sante-story-content-wrap {
    position: relative;
    z-index: 2;
}

.sante-story-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #009E5E;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    border: 1.5px solid rgba(0, 206, 124, 0.3);
    box-shadow: 0 4px 12px rgba(0, 206, 124, 0.08);
}

.sante-story-title {
    font-size: 40px;
    font-weight: 800;
    color: #211261;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 0 0 16px 0;
}

.sante-story-subtitle {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #00CE7C;
    letter-spacing: 0.05em;
    margin-top: 6px;
    text-transform: uppercase;
}

.sante-story-desc {
    font-size: 15.5px;
    color: #475569;
    line-height: 1.75;
    margin: 0 0 28px 0;
    text-align: justify;
}

/* Typographic Trust Metrics Song Hành (100% & 24/7 Chuẩn Apple/Mayo Clinic) */
.sante-story-metrics {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 32px;
    padding: 0;
    border: none;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    text-align: left;
}

.metric-number {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
    margin-bottom: 4px;
}

.metric-number .num-highlight {
    font-size: 34px;
    font-weight: 900;
    color: #211261;
    letter-spacing: -0.03em;
}

.metric-number .num-unit {
    font-size: 20px;
    font-weight: 800;
    color: #00CE7C;
}

.metric-number .num-unit-text {
    font-size: 10px;
    font-weight: 800;
    color: #009E5E;
    letter-spacing: 0.04em;
    background: rgba(0, 206, 124, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 2px;
    vertical-align: middle;
}

.metric-label {
    display: flex;
    flex-direction: column;
}

.metric-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #1E293B;
    line-height: 1.3;
    margin-bottom: 2px;
}

.metric-desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.3;
}

.metric-divider {
    width: 1.5px;
    height: 48px;
    background: #E2E8F0;
    flex-shrink: 0;
}

/* Nút Mint Luxury cao cấp */
.sante-btn-mint-luxury {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%);
    color: #FFFFFF !important;
    padding: 10px 14px 10px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 20px rgba(0, 206, 124, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sante-btn-mint-luxury .btn-circle-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #FFFFFF;
    transition: all 0.3s ease;
}

.sante-btn-mint-luxury:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #00E58A 0%, #00CE7C 100%);
    box-shadow: 0 10px 26px rgba(0, 206, 124, 0.45);
}

.sante-btn-mint-luxury:hover .btn-circle-arrow {
    background: #211261;
    color: #00CE7C;
    transform: translateX(3px);
}

/* Cột Phải: 4 Cổng Tra Cứu Y Khoa 2x2 Bento Grid */
.sante-portals-col {
    position: relative;
    z-index: 2;
}

.sante-portals-wrapper-relative {
    position: relative;
    width: 100%;
}

/* Hào quang Trái tim decor2.png Lớn Đẳng Cấp & Không Bị Cắt Bởi Banner */
.sante-portals-heart-aura {
    position: absolute;
    top: 56%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(8deg);
    width: 800px;
    max-width: 160%;
    height: auto;
    opacity: 0.44;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 20px 50px rgba(0, 206, 124, 0.4));
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sante-portals-wrapper-relative:hover .sante-portals-heart-aura {
    opacity: 0.56;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.03);
    filter: drop-shadow(0 25px 60px rgba(0, 206, 124, 0.55));
}

.sante-portals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    position: relative;
    z-index: 3;
}

.sante-portal-card {
    border-radius: 20px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: #1E293B !important;
    box-shadow: 0 8px 24px rgba(33, 18, 97, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sante-portal-card:hover {
    transform: translateY(-6px);
}

.portal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.portal-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.35s ease;
}

.portal-badge {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
}

.portal-title {
    font-size: 16.5px;
    font-weight: 800;
    color: #211261;
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.portal-desc {
    font-size: 13px;
    color: #334155 !important;
    line-height: 1.5;
    margin: 0 0 18px 0;
    flex: 1;
}

.portal-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.portal-card-footer em {
    transition: transform 0.25s ease;
    font-size: 14px;
}

.sante-portal-card:hover .portal-card-footer em {
    transform: translateX(5px);
}

/* ========================================================
   HỆ MÀU SANTE BRAND MONOCHROMATIC (ĐỒNG BỘ 100% NHẬN DIỆN)
   ======================================================== */

/* Tone 1: Tra Bệnh Lý (Ice Medical Blue) */
.sante-portal-card.tone-azure {
    background: linear-gradient(145deg, #FFFFFF 0%, #F1F6FB 100%);
    border: 1.5px solid #D6E4F0;
}
.sante-portal-card.tone-azure .portal-icon {
    background: #E4EFF9;
    color: #211261;
    box-shadow: 0 3px 10px rgba(33, 18, 97, 0.08);
}
.sante-portal-card.tone-azure .portal-badge {
    background: #E4EFF9;
    color: #211261;
    border: 1px solid #D6E4F0;
}
.sante-portal-card.tone-azure .portal-card-footer {
    color: #211261;
}
.sante-portal-card.tone-azure:hover {
    border-color: #3B82F6;
    box-shadow: 0 16px 36px rgba(59, 130, 246, 0.12);
}
.sante-portal-card.tone-azure:hover .portal-icon {
    background: #DBEAFE;
    color: #1D4ED8;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.18);
}

/* Tone 2: Tra Bác Sĩ (Signature Sante Mint) */
.sante-portal-card.tone-mint {
    background: linear-gradient(145deg, #FFFFFF 0%, #F0FAF5 100%);
    border: 1.5px solid #C4EED9;
}
.sante-portal-card.tone-mint .portal-icon {
    background: #DCF5EA;
    color: #009E5E;
    box-shadow: 0 3px 10px rgba(0, 206, 124, 0.12);
}
.sante-portal-card.tone-mint .portal-badge {
    background: #DCF5EA;
    color: #009E5E;
    border: 1px solid #C4EED9;
}
.sante-portal-card.tone-mint .portal-card-footer {
    color: #009E5E;
}
.sante-portal-card.tone-mint:hover {
    border-color: #00CE7C;
    box-shadow: 0 16px 36px rgba(0, 206, 124, 0.15);
}
.sante-portal-card.tone-mint:hover .portal-icon {
    background: #D1FAE5;
    color: #047857;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 6px 16px rgba(4, 120, 87, 0.2);
}

/* Tone 3: Tra Chuyên Khoa (Royal Navy Ice) */
.sante-portal-card.tone-purple {
    background: linear-gradient(145deg, #FFFFFF 0%, #F4F3FB 100%);
    border: 1.5px solid #DDD9F3;
}
.sante-portal-card.tone-purple .portal-icon {
    background: #EBE8F8;
    color: #211261;
    box-shadow: 0 3px 10px rgba(33, 18, 97, 0.1);
}
.sante-portal-card.tone-purple .portal-badge {
    background: #EBE8F8;
    color: #211261;
    border: 1px solid #DDD9F3;
}
.sante-portal-card.tone-purple .portal-card-footer {
    color: #211261;
}
.sante-portal-card.tone-purple:hover {
    border-color: #8B5CF6;
    box-shadow: 0 16px 36px rgba(139, 92, 246, 0.12);
}
.sante-portal-card.tone-purple:hover .portal-icon {
    background: #EDE9FE;
    color: #6D28D9;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 6px 16px rgba(109, 40, 217, 0.2);
}

/* Tone 4: Tìm Đường (Soft Champagne Gold) */
.sante-portal-card.tone-gold {
    background: linear-gradient(145deg, #FFFFFF 0%, #FDFBF6 100%);
    border: 1.5px solid #F0E7D4;
}
.sante-portal-card.tone-gold .portal-icon {
    background: #F8F2E4;
    color: #8C6A1E;
    box-shadow: 0 3px 10px rgba(223, 186, 115, 0.15);
}
.sante-portal-card.tone-gold .portal-badge {
    background: #F8F2E4;
    color: #8C6A1E;
    border: 1px solid #F0E7D4;
}
.sante-portal-card.tone-gold .portal-card-footer {
    color: #8C6A1E;
}
.sante-portal-card.tone-gold:hover {
    border-color: #DFBA73;
    box-shadow: 0 16px 36px rgba(223, 186, 115, 0.18);
}
.sante-portal-card.tone-gold:hover .portal-icon {
    background: #FEF3C7;
    color: #B45309;
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 6px 16px rgba(180, 83, 9, 0.2);
}

/* Responsive Breakpoints cho Section 2: Intro & 4 Portal Cards */
@media (max-width: 1440px) {
    .sante-intro-bento-grid {
        gap: 36px;
    }
    .sante-story-title {
        font-size: 34px;
    }
    .sante-story-subtitle {
        font-size: 18px;
    }
    .sante-portal-card {
        padding: 20px 18px;
    }
    .portal-title {
        font-size: 15px;
    }
}

@media (max-width: 1199px) {
    .home-intro-section {
        padding: 65px 0 75px 0;
    }
    .sante-intro-bento-grid {
        grid-template-columns: 1fr 1.15fr;
        gap: 24px;
    }
    .sante-story-title {
        font-size: 28px;
    }
    .sante-story-subtitle {
        font-size: 16px;
    }
    .sante-story-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .metric-number .num-highlight {
        font-size: 28px;
    }
    .metric-title {
        font-size: 13px;
    }
    .sante-portals-grid {
        gap: 14px;
    }
    .sante-portal-card {
        padding: 16px 14px;
        border-radius: 16px;
    }
    .portal-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .portal-title {
        font-size: 14px;
    }
    .portal-desc {
        font-size: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 991px) {
    .home-intro-section {
        padding: 55px 0 65px 0;
    }
    .sante-intro-bento-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .sante-story-col {
        padding-right: 0;
        text-align: center;
    }
    .sante-story-desc {
        text-align: center;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }
    .sante-story-metrics {
        justify-content: center;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    .sante-btn-mint-luxury {
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .home-intro-section {
        padding: 45px 0 50px 0;
    }
    .sante-portals-heart-aura {
        opacity: 0.15 !important;
        transform: translate(-50%, -50%) scale(0.8) !important;
    }
    .sante-portals-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .sante-portal-card {
        background: #FFFFFF !important;
        padding: 14px 16px !important;
        border-radius: 18px !important;
        border-width: 1.5px !important;
        box-shadow: 0 8px 24px rgba(33, 18, 97, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: 
            "icon title badge"
            "icon desc arrow" !important;
        align-items: center !important;
        column-gap: 14px !important;
        row-gap: 2px !important;
        animation: portalSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
        -webkit-tap-highlight-color: transparent;
    }
    .sante-portal-card:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(33, 18, 97, 0.08) !important;
    }
    .sante-portals-grid .sante-portal-card:nth-child(1) { animation-delay: 0.04s; }
    .sante-portals-grid .sante-portal-card:nth-child(2) { animation-delay: 0.10s; }
    .sante-portals-grid .sante-portal-card:nth-child(3) { animation-delay: 0.16s; }
    .sante-portals-grid .sante-portal-card:nth-child(4) { animation-delay: 0.22s; }

    @keyframes portalSlideIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .sante-portal-card.tone-azure {
        border-color: #BFDBFE !important;
        background: #FFFFFF !important;
    }
    .sante-portal-card.tone-azure .portal-icon {
        background: #EFF6FF !important;
        color: #1D4ED8 !important;
    }
    .sante-portal-card.tone-azure .portal-badge {
        background: #EFF6FF !important;
        color: #1D4ED8 !important;
        border-color: #BFDBFE !important;
    }
    .sante-portal-card.tone-mint {
        border-color: #A7F3D0 !important;
        background: #FFFFFF !important;
    }
    .sante-portal-card.tone-mint .portal-icon {
        background: #ECFDF5 !important;
        color: #047857 !important;
    }
    .sante-portal-card.tone-mint .portal-badge {
        background: #ECFDF5 !important;
        color: #047857 !important;
        border-color: #A7F3D0 !important;
    }
    .sante-portal-card.tone-purple {
        border-color: #DDD6FE !important;
        background: #FFFFFF !important;
    }
    .sante-portal-card.tone-purple .portal-icon {
        background: #F5F3FF !important;
        color: #5B21B6 !important;
    }
    .sante-portal-card.tone-purple .portal-badge {
        background: #F5F3FF !important;
        color: #5B21B6 !important;
        border-color: #DDD6FE !important;
    }
    .sante-portal-card.tone-gold {
        border-color: #FDE68A !important;
        background: #FFFFFF !important;
    }
    .sante-portal-card.tone-gold .portal-icon {
        background: #FFFBEB !important;
        color: #B45309 !important;
    }
    .sante-portal-card.tone-gold .portal-badge {
        background: #FFFBEB !important;
        color: #B45309 !important;
        border-color: #FDE68A !important;
    }
    .portal-card-header {
        display: contents !important;
        margin-bottom: 0 !important;
    }
    .portal-icon {
        grid-area: icon !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    .portal-badge {
        grid-area: badge !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        padding: 3px 8px !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }
    .portal-card-body {
        display: contents !important;
    }
    .portal-title {
        grid-area: title !important;
        font-size: 14.5px !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }
    .portal-desc {
        grid-area: desc !important;
        font-size: 12px !important;
        margin: 0 !important;
        line-height: 1.35 !important;
        color: #334155 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .portal-card-footer {
        grid-area: arrow !important;
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        justify-content: flex-end !important;
    }
    .portal-card-footer span {
        display: none !important;
    }
    .portal-card-footer em {
        font-size: 14px !important;
        color: #00CE7C !important;
    }
    .sante-story-title {
        font-size: 24px;
    }
    .sante-story-subtitle {
        font-size: 14px;
    }
    .sante-story-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1px 1fr !important;
        align-items: center !important;
        gap: 14px !important;
        max-width: 340px !important;
        margin: 0 auto 28px auto !important;
    }
    .metric-item {
        text-align: center !important;
        align-items: center !important;
    }
    .metric-number {
        justify-content: center !important;
    }
    .metric-number .num-highlight {
        font-size: 26px !important;
    }
    .metric-number .num-unit {
        font-size: 16px !important;
    }
    .metric-number .num-unit-text {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
    .metric-title {
        font-size: 13px !important;
    }
    .metric-desc {
        font-size: 11px !important;
    }
    .metric-divider {
        width: 1px !important;
        height: 54px !important;
    }
}

/* ========================================================
   4. SECTION 3: CINEMATIC HORIZON ACCORDION (FROSTED GLASS & BOTTOM ALIGNED)
   ======================================================== */
.sante-cinematic-accordion-section {
    padding: 85px 0 95px 0;
    background: #FFFFFF;
    position: relative;
}

.sante-cinematic-header {
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.sante-cinematic-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(33, 18, 97, 0.06);
    color: #211261;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    border: 1px solid rgba(33, 18, 97, 0.15);
}

.sante-cinematic-title {
    font-size: 38px;
    font-weight: 800;
    color: #211261;
    line-height: 1.22;
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
}

.sante-cinematic-subtitle {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: #00CE7C;
    letter-spacing: 0.05em;
    margin-top: 6px;
    text-transform: uppercase;
}

.sante-cinematic-desc {
    font-size: 15.5px;
    color: #64748B;
    line-height: 1.65;
    margin: 0;
}

/* ========================================================
   BENTO STAGE SHOWCASE (Ý TƯỞNG 2 - CLINICAL THEATRE)
   ======================================================== */
.sante-bento-stage-section {
    padding: 70px 0 80px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 100%);
    position: relative;
    overflow: hidden;
}

.sante-stage-bento-layout {
    display: grid;
    grid-template-columns: 1.22fr 1fr;
    gap: 28px;
    margin-top: 40px;
    margin-bottom: 40px;
    align-items: stretch;
}

/* Cột Trái: Sân Khấu Stage Theatre */
.sante-stage-theatre {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #0B132B;
    box-shadow: 0 24px 60px rgba(33, 18, 97, 0.18);
    border: 1.5px solid #E2EDF8;
    min-height: 560px;
    height: 100%;
}

.stage-slide-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(1.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 36px 36px 36px;
    z-index: 1;
}

.stage-slide-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    z-index: 2;
}

/* Ảnh gốc sắc nét tuyệt đối */
.stage-crisp-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 30%;
    z-index: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-slide-panel.is-active .stage-crisp-bg {
    transform: scale(1.03);
}

/* Cinematic Scrim Fade: Gradient điện ảnh chuyển mượt từ 0% đáy lên, không che khuất nửa trên */
.stage-vignette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg, 
        rgba(11, 19, 43, 0) 0%, 
        rgba(11, 19, 43, 0) 35%, 
        rgba(11, 19, 43, 0.25) 55%, 
        rgba(11, 19, 43, 0.72) 78%, 
        rgba(11, 19, 43, 0.94) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Floating Header Badge */
.stage-floating-badge {
    position: relative;
    z-index: 3;
    align-self: flex-start;
}

.stage-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 999px;
    background: rgba(11, 19, 43, 0.55);
    color: #00FF99;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid rgba(0, 255, 153, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.stage-badge-pill em {
    font-size: 12px;
    color: #00FF99;
}

/* Bottom Cinematic Text Info: Không dùng khung hộp cứng nhắc, để text thở tự nhiên */
.stage-bottom-info {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 640px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.stage-item-title {
    font-size: 32px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.stage-item-title a.stage-title-link {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.stage-item-title a.stage-title-link:hover {
    color: #00CE7C !important;
    text-decoration: none !important;
}

.stage-item-desc {
    font-size: 14.5px;
    color: #E2E8F0;
    line-height: 1.55;
    margin: 0 0 16px 0;
    max-width: 580px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Tag Năng Lực Dạng Pill Kính Mờ Tinh Tế */
.stage-capability-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px 0;
    flex-wrap: wrap;
}

.stage-cap-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
}

.stage-cap-tag em {
    color: #00FF99;
    font-size: 12px;
}

.stage-action-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.stage-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: all 0.25s ease;
}

.stage-ghost-btn:hover {
    background: #FFFFFF;
    color: #211261 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
    background: #FFFFFF;
    color: #211261 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Cột Phải: Navigation Pills */
.sante-stage-nav-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sante-stage-pills-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: -10px;
}

a.stage-nav-pill-item,
.stage-nav-pill-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1.5px solid #E2EDF8;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(33, 18, 97, 0.02);
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
}

a.stage-nav-pill-item:hover,
a.stage-nav-pill-item:focus,
a.stage-nav-pill-item:active,
a.stage-nav-pill-item:visited {
    text-decoration: none !important;
    color: inherit !important;
}

.stage-nav-pill-item:hover {
    border-color: #A7F3D0;
    background: #F8FAFC;
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(33, 18, 97, 0.07);
}

.stage-nav-pill-item.is-active {
    background: #FFFFFF;
    border: 1.5px solid #00CE7C;
    box-shadow: 0 6px 20px rgba(0, 206, 124, 0.15);
    transform: translateX(4px);
}

.stage-nav-pill-item.is-active::before {
    display: none;
}

/* Key Service Special Pill Styling - Làm nổi bật chuyên khoa mũi nhọn đẳng cấp */
.stage-nav-pill-item.is-key-service {
    position: relative;
    overflow: visible;
    border-color: #86EFAC;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%);
    box-shadow: 0 4px 16px rgba(0, 206, 124, 0.10);
}

.stage-nav-pill-item.is-key-service .pill-left-icon {
    background: #DCF5EA;
    color: #009E5E;
    border-color: #00CE7C;
}

.stage-nav-pill-item.is-key-service.is-active {
    background: #FFFFFF;
    border-color: #00CE7C;
    box-shadow: 0 10px 28px rgba(0, 206, 124, 0.22);
}

.stage-nav-pill-item.is-key-service.is-active .pill-left-icon {
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%);
    color: #FFFFFF;
    border-color: #00CE7C;
    box-shadow: 0 4px 12px rgba(0, 206, 124, 0.35);
}

/* Floating Badge: ★ MŨI NHỌN (Đặt nổi trên viền trên thẻ, tuyệt đối không che text tiêu đề) */
.pill-badge-key {
    position: absolute;
    top: -9px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.35);
    z-index: 10;
    pointer-events: none;
    line-height: 1.35;
    white-space: nowrap;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.stage-nav-pill-item.is-key-service:hover .pill-badge-key,
.stage-nav-pill-item.is-key-service.is-active .pill-badge-key {
    background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45);
    transform: translateY(-1px);
}

.pill-left-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F1F6FB;
    color: #211261;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    border: 1px solid #D9E7F4;
    transition: all 0.25s ease;
}

.pill-left-icon em,
.pill-left-icon i {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    display: inline-block;
}

.stage-nav-pill-item:hover .pill-left-icon {
    background: #DCF5EA;
    color: #009E5E;
    border-color: #00CE7C;
}

.stage-nav-pill-item.is-active .pill-left-icon {
    background: #00CE7C;
    color: #FFFFFF;
    border-color: #00CE7C;
    box-shadow: 0 4px 14px rgba(0, 206, 124, 0.35);
}

.pill-center-content {
    flex: 1;
    min-width: 0;
}

.pill-header-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px;
    min-width: 0;
}

.pill-number {
    font-size: 11.5px;
    font-weight: 800;
    color: #64748B;
    background: #F1F5F9;
    padding: 1px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}

.stage-nav-pill-item.is-active .pill-number {
    color: #009E5E;
    background: #DCF5EA;
}

.pill-title {
    font-size: 14px;
    font-weight: 700;
    color: #211261;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    transition: color 0.25s ease;
    flex: 1;
    min-width: 0;
}

.stage-nav-pill-item:hover .pill-title,
.stage-nav-pill-item.is-active .pill-title {
    color: #007844 !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .pill-title {
        font-size: 13px;
        letter-spacing: -0.015em;
    }
}

.pill-subtext {
    font-size: 12px;
    color: #64748B;
    display: block;
    line-height: 1.35;
}

.pill-right-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
    font-size: 14px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stage-nav-pill-item:hover .pill-right-arrow,
.stage-nav-pill-item.is-active .pill-right-arrow {
    color: #00CE7C;
    transform: translateX(3px);
}

@media (max-width: 991px) {
    .sante-stage-bento-layout {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 20px;
    }
    .sante-stage-theatre {
        min-height: 420px;
    }
    .stage-slide-panel {
        padding: 24px;
    }
    .stage-item-title {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .sante-cinematic-header {
        margin-bottom: 24px !important;
        padding: 0 10px !important;
    }
    .sante-cinematic-badge {
        font-size: 11px !important;
        padding: 4px 12px !important;
        margin-bottom: 10px !important;
    }
    .sante-cinematic-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.015em !important;
        margin: 0 0 8px 0 !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
    .sante-cinematic-desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #64748B !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .sante-stage-bento-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 18px !important;
        margin-bottom: 24px !important;
    }
    .sante-stage-theatre {
        min-height: 280px !important;
        height: 280px !important;
        border-radius: 18px !important;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-y pinch-zoom;
    }
    .stage-slide-panel {
        padding: 16px 18px 18px 18px !important;
        justify-content: flex-end !important;
    }
    /* Ẩn badge nổi trên cùng trên mobile để bức ảnh thoáng đãng tối đa */
    .stage-floating-badge {
        display: none !important;
    }
    .stage-item-title {
        font-size: clamp(17px, 4.8vw, 20px) !important;
        margin-bottom: 4px !important;
    }
    .stage-item-desc {
        font-size: clamp(11.5px, 3.2vw, 12.5px) !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    /* Ẩn bớt 3 tag năng lực rườm rà và toàn bộ nút CTA trùng lặp trong slide trên mobile để ảnh thoáng đãng tối đa */
    .stage-capability-tags {
        display: none !important;
    }
    .stage-ghost-btn {
        display: none !important;
    }
    .stage-action-buttons,
    .stage-bottom-info .stage-action-buttons,
    .sante-stage-theatre .sante-btn-mint-luxury,
    .sante-stage-theatre .stage-ghost-btn {
        display: none !important;
    }

    /* Ẩn thanh cuộn pill rườm rà trên mobile, chỉ giữ lại nút bấm chính Xem tất cả 11 chuyên khoa */
    .sante-stage-nav-column {
        display: none !important;
    }
    .sante-stage-footer-action {
        display: flex !important;
        justify-content: center !important;
        margin-top: 16px !important;
        padding: 0 16px !important;
    }
    .sante-glass-pill-btn {
        width: auto !important;
        max-width: 100% !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 20px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        background: #FFFFFF !important;
        border: 1.5px solid #00CE7C !important;
        color: #211261 !important;
        box-shadow: 0 4px 14px rgba(0, 206, 124, 0.18) !important;
    }
    .sante-glass-pill-btn .pill-btn-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 11.5px !important;
        background: #DCF5EA !important;
        color: #009E5E !important;
    }
    .sante-glass-pill-btn .pill-btn-text {
        white-space: nowrap !important;
        letter-spacing: -0.01em !important;
    }
    .sante-glass-pill-btn .pill-btn-arrow {
        font-size: 13px !important;
        color: #00CE7C !important;
    }
    .sante-news-showcase {
        width: 100% !important;
        position: relative !important;
    }
    /* PHƯƠNG ÁN 1: MINIMALIST EDITORIAL UNDERLINE (Quiet Luxury 2026) */
    .sante-news-showcase .news-tab-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 0 10px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    .sante-news-showcase .tab-nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }
    .sante-news-showcase .tab-nav li {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }
    .sante-news-showcase .tab-nav li .sante-news-filter-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 8px 4px 12px 4px !important;
        min-height: auto !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2.5px solid transparent !important;
        color: #64748B !important;
        box-shadow: none !important;
        margin-bottom: -1px !important;
        transition: all 0.25s ease !important;
    }
    .sante-news-showcase .tab-nav li .sante-news-filter-btn.is-active,
    .sante-news-showcase .tab-nav li .sante-news-filter-btn:hover {
        background: transparent !important;
        background-color: transparent !important;
        color: #0F172A !important;
        font-weight: 800 !important;
        border-bottom: 2.5px solid #00CE7C !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    .sante-news-showcase .tab-nav li .sante-news-filter-btn:not(.is-active) {
        background: transparent !important;
        background-color: transparent !important;
        color: #64748B !important;
        border-bottom: 2.5px solid transparent !important;
        box-shadow: none !important;
    }
    .sante-news-showcase .tab-nav li .sante-news-filter-btn.is-active em,
    .sante-news-showcase .tab-nav li .sante-news-filter-btn:hover em {
        color: #00CE7C !important;
    }
    .sante-news-showcase .tab-nav li .sante-news-filter-btn em {
        font-size: 13px !important;
        color: #94A3B8 !important;
    }
    .home-news {
        padding: 40px 0 50px 0;
    }
    .home-news .sante-cinematic-header .sante-cinematic-title {
        font-size: 24px !important;
        color: #0F172A !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
        line-height: 1.3 !important;
        letter-spacing: -0.015em !important;
        margin: 0 0 10px 0 !important;
    }
    .home-news .sante-cinematic-header .sante-cinematic-title .d-block {
        display: block !important;
    }
    .sante-cinematic-title {
        font-size: 24px;
    }
    .sante-cinematic-desc {
        font-size: 13.5px;
    }
}

/* Apple Glassmorphic Pill Action Button */
.sante-stage-footer-action {
    margin-top: 36px;
    display: flex;
    justify-content: center;
}

.sante-glass-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 206, 124, 0.35);
    color: #211261;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(33, 18, 97, 0.06), 0 2px 6px rgba(0, 206, 124, 0.08);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sante-glass-pill-btn .pill-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 206, 124, 0.12);
    color: #00A862;
    font-size: 13px;
    transition: all 0.3s ease;
}

.sante-glass-pill-btn .pill-btn-text {
    letter-spacing: -0.01em;
}

.sante-glass-pill-btn .pill-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #00CE7C;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.sante-glass-pill-btn:hover {
    background: #FFFFFF;
    border-color: #00CE7C;
    color: #00A862;
    box-shadow: 0 12px 32px rgba(0, 206, 124, 0.2), 0 4px 12px rgba(33, 18, 97, 0.08);
    transform: translateY(-2px);
}

.sante-glass-pill-btn:hover .pill-btn-icon {
    background: #00CE7C;
    color: #FFFFFF;
}

.sante-glass-pill-btn:hover .pill-btn-arrow {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .sante-glass-pill-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }
}



/* ========================================================
   4.5. SECTION 3.5: BAN LÃNH ĐẠO & CỐ VẤN Y KHOA (COUNCIL SHOWCASE)
   ======================================================== */
.home-council-section {
    padding: 70px 0 80px 0;
    background: linear-gradient(180deg, #F4F8FC 0%, #FFFFFF 100%);
    position: relative;
    overflow: hidden;
}

.home-council-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg, rgba(33, 18, 97, 0) 0%, rgba(33, 18, 97, 0.08) 50%, rgba(33, 18, 97, 0) 100%);
}

.home-council-grid-container {
    margin-top: 36px;
    position: relative;
    z-index: 2;
}

.home-council-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.home-council-grid .doctor-profile-card {
    height: 100% !important;
    margin: 0 !important;
}

@media (max-width: 1199px) {
    .home-council-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .home-council-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ========================================================
   5. SECTION 4: NEWS & Y HỌC THƯỜNG THỨC (QUIET LUXURY COMPACT EDITORIAL)
   ======================================================== */
.home-news {
    padding: 60px 0 75px 0;
    background: #F8FAFC;
    position: relative;
}

.home-news::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg, rgba(33, 18, 97, 0) 0%, rgba(33, 18, 97, 0.08) 50%, rgba(33, 18, 97, 0) 100%);
}

.home-news .sante-cinematic-header {
    margin-bottom: 24px !important;
}

.home-news .sante-cinematic-header .sante-cinematic-badge {
    margin-bottom: 10px !important;
}

.home-news .sante-cinematic-header .sante-cinematic-title {
    font-size: 30px !important;
    margin-bottom: 8px !important;
}

.home-news .sante-cinematic-header .sante-cinematic-desc {
    max-width: 680px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 0 auto !important;
}

.sante-news-showcase {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.sante-news-showcase .news-tab-wrapper {
    margin: 0 auto 28px auto !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.sante-news-showcase .tab-nav {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 32px !important;
    width: auto !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.sante-news-showcase .tab-nav li {
    margin: 0 !important;
    padding: 0 !important;
}

.sante-news-showcase .tab-nav li .sante-news-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 6px 14px 6px;
    min-height: auto;
    border-radius: 0;
    background: transparent !important;
    border: none;
    border-bottom: 2.5px solid transparent !important;
    outline: none;
    cursor: pointer;
    color: #64748B !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: -1px;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sante-news-showcase .tab-nav li .sante-news-filter-btn em {
    font-size: 14px;
    opacity: 0.8;
    color: #94A3B8;
}

.sante-news-showcase .tab-nav li .sante-news-filter-btn.is-active,
.sante-news-showcase .tab-nav li .sante-news-filter-btn:hover {
    background: transparent !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    border-bottom: 2.5px solid #00CE7C !important;
    box-shadow: none !important;
}

.sante-news-showcase .tab-nav li .sante-news-filter-btn.is-active em,
.sante-news-showcase .tab-nav li .sante-news-filter-btn:hover em {
    color: #00CE7C !important;
    opacity: 1;
}

.sante-news-content-box {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: block !important;
}

.home-news .sante-news-tab-pane {
    display: none;
    width: 100% !important;
    animation: santeNewsFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-news .sante-news-tab-pane.is-active {
    display: block !important;
}

@keyframes santeNewsFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-news .news-slider {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
}

.home-news .swiper-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    padding: 10px 4px 20px 4px !important;
}

.home-news .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
}

.home-news .swiper-slide {
    height: auto !important;
    display: flex !important;
    box-sizing: border-box !important;
}

.home-news .news-item {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: auto !important;
    text-decoration: none !important;
    position: static !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

.home-news .news-card-link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
}

.home-news .news-item:hover {
    transform: translateY(-6px) !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 16px 32px rgba(33, 18, 97, 0.08), 0 4px 12px rgba(0, 206, 124, 0.06) !important;
}

.home-news .news-item .news-img {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1000 / 600 !important;
    height: auto !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid rgba(33, 18, 97, 0.06) !important;
}

.home-news .news-item .news-img figure {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.home-news .news-item .news-img figure img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.home-news .news-item:hover .news-img figure img {
    transform: scale(1.06) !important;
}

.home-news .news-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 60%, rgba(15, 23, 42, 0.25) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.home-news .news-cate-tag {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #F0FDF4 !important;
    border: 1px solid rgba(0, 206, 124, 0.25) !important;
    color: #047857 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.home-news .news-cate-tag em {
    font-size: 5px !important;
    color: #00CE7C !important;
}

.home-news .news-item .news-caption {
    position: static !important;
    padding: 14px 18px 16px 18px !important;
    background: #FFFFFF !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    text-align: left !important;
}

.home-news .news-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    font-size: 11.5px !important;
    color: #64748B !important;
    font-weight: 500 !important;
    gap: 8px !important;
}

.home-news .news-meta-row .news-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4.5px !important;
    color: #64748B !important;
    font-size: 11.5px !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}

.home-news .news-meta-row .news-date em {
    color: #00CE7C !important;
    font-size: 11.5px !important;
}

.home-news .news-item .news-title {
    color: #0F172A !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: 42px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: pretty !important;
    transition: color 0.25s ease !important;
}

.home-news .news-item:hover .news-title {
    color: #211261 !important;
}

.home-news .news-excerpt {
    color: #64748B !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 12px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-weight: 400 !important;
}

.home-news .news-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 12px !important;
    border-top: 1px solid #F1F5F9 !important;
    margin-top: auto !important;
    width: 100% !important;
}

.home-news .news-card-footer .news-views {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #94A3B8 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.home-news .news-card-footer .news-views em {
    color: #64748B !important;
    font-size: 11px !important;
}

/* Nút Đọc bài viết phong cách Quiet Luxury Button */
.home-news .news-cta-luxury {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #211261;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-news .news-cta-luxury .cta-arrow-bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #211261;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.home-news .news-item:hover .news-cta-luxury {
    background: #211261;
    border-color: #211261;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(33, 18, 97, 0.22);
    transform: translateY(-1px);
}

.home-news .news-item:hover .news-cta-luxury .cta-arrow-bubble {
    background: #00CE7C;
    color: #FFFFFF;
    transform: translateX(3px);
}

/* Fix Swiper Navigation Buttons (Compact & Closer to Card) */
.home-news .swiper-navigation {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 14px !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
}

.home-news .swiper-navigation .swiper-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    font-size: 12px !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .home-news .swiper-navigation {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 12px !important;
        position: static !important;
    }
    .home-news .swiper-navigation .swiper-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
        display: inline-flex !important;
        position: static !important;
        transform: none !important;
    }
    .home-news .swiper-container {
        overflow: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .home-news .swiper-slide {
        width: 100% !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    .home-news .news-item {
        width: 100% !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    }
    .home-news .news-item .news-caption {
        padding: 16px !important;
        padding-right: 48px !important; /* Tránh bị che bởi floating dock trên màn hình nhỏ */
    }
    .home-news .news-item .news-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        min-height: auto !important;
        max-height: none !important;
        color: #0F172A !important;
        margin-bottom: 8px !important;
    }
    .home-news .news-excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #64748B !important;
        margin-bottom: 12px !important;
    }
    .home-news .news-card-footer {
        padding-top: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .home-news .news-card-footer .news-cta-luxury {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

.home-news .swiper-navigation .swiper-btn em {
    font-size: 14px;
    transition: transform 0.25s ease;
}

.home-news .swiper-navigation .swiper-btn.swiper-prev:hover em {
    transform: translateX(-2px);
}

.home-news .swiper-navigation .swiper-btn.swiper-next:hover em {
    transform: translateX(2px);
}

.home-news .swiper-navigation .swiper-btn:hover {
    background: #211261;
    border-color: #211261;
    color: #00CE7C;
    box-shadow: 0 6px 18px rgba(33, 18, 97, 0.2);
    transform: translateY(-1px);
}

/* ========================================================
   6. SANTE ROYAL MEDICAL FOOTER (EXACT BENHVIENSANTE.COM ARCHITECTURE)
   ======================================================== */
/* ========================================================
   MASTER SANTE ROYAL FOOTER (MONOLITHIC ARCHITECTURAL ANCHOR 2026)
   Standard: Mayo Clinic & International 5-Star Hospital Anchor
   ======================================================== */
.sante-royal-footer.sante-hospital-anchor {
    background: radial-gradient(circle at 15% 20%, rgba(0, 206, 124, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(33, 18, 97, 0.3) 0%, transparent 50%),
                linear-gradient(180deg, #111C30 0%, #0A1220 100%) !important;
    color: #94A3B8 !important;
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
    overflow: hidden;
    padding-top: 52px;
}

/* 1. MAIN DIRECTORY BODY */
.sante-hospital-anchor .footer-main-wrap {
    padding: 0 0 48px 0;
}

.sante-hospital-anchor .footer-grid-row {
    row-gap: 36px;
}

.sante-hospital-anchor .footer-col-title {
    color: #F8FAFC !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 18px 0 !important;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CỘT 1: BRAND IDENTITY & GPS PORTAL */
.sante-hospital-anchor .footer-col-brand .brand-identity-box {
    display: flex;
    flex-direction: column;
}

.sante-hospital-anchor .footer-brand-logo {
    display: inline-block;
    margin-bottom: 18px;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: fit-content;
    box-shadow: none !important;
    transition: transform 0.25s ease;
}

.sante-hospital-anchor .footer-brand-logo:hover {
    transform: translateY(-2px);
}

.sante-hospital-anchor .footer-logo-img {
    height: 58px;
    max-width: 240px;
    width: auto;
    object-fit: contain;
    display: block;
}

.sante-hospital-anchor .footer-brand-desc {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.65;
    margin: 0 0 20px 0;
}

/* Dual-Gate GPS Portal */
.sante-hospital-anchor .footer-gps-portal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.sante-hospital-anchor .gps-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    transition: all 0.25s ease;
}

.sante-hospital-anchor .gps-item:hover {
    background: rgba(0, 206, 124, 0.06);
    border-color: rgba(0, 206, 124, 0.3);
    transform: translateY(-1px);
}

.sante-hospital-anchor .gps-icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(0, 206, 124, 0.15);
    color: #00CE7C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.sante-hospital-anchor .gps-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sante-hospital-anchor .gps-title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.sante-hospital-anchor .gps-name {
    font-weight: 800;
    color: #F8FAFC;
    font-size: 13px;
}

.sante-hospital-anchor .gps-map-link {
    font-size: 10.5px;
    font-weight: 700;
    color: #00CE7C !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 206, 124, 0.12);
    border: 1px solid rgba(0, 206, 124, 0.25);
    padding: 2px 7px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sante-hospital-anchor .gps-map-link:hover {
    background: #00CE7C;
    border-color: #00CE7C;
    color: #0D1626 !important;
}

.sante-hospital-anchor .gps-addr {
    color: #94A3B8;
    font-size: 11.5px;
    line-height: 1.4;
}

/* Social Icons */
.sante-hospital-anchor .footer-social-connect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sante-hospital-anchor .social-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #94A3B8;
}

.sante-hospital-anchor .social-icons-group {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sante-hospital-anchor .s-link {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #CBD5E1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.sante-hospital-anchor .s-link .zalo-txt {
    font-size: 9.5px;
    font-weight: 900;
}

.sante-hospital-anchor .s-link:hover {
    transform: translateY(-2px);
}

.sante-hospital-anchor .s-link.s-fb:hover {
    background: #1877F2;
    border-color: #1877F2;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.4);
}

.sante-hospital-anchor .s-link.s-zalo:hover {
    background: #0068FF;
    border-color: #0068FF;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(0, 104, 255, 0.4);
}

.sante-hospital-anchor .s-link.s-yt:hover {
    background: #FF0000;
    border-color: #FF0000;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.4);
}

.sante-hospital-anchor .s-link.s-tiktok:hover {
    background: #1E293B;
    border-color: #38BDF8;
    color: #38BDF8 !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3);
}

/* CỘT 2: THỜI GIAN LÀM VIỆC & CẤP CỨU */
.sante-hospital-anchor .live-status-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 13px 14px;
    margin-bottom: 14px;
}

.sante-hospital-anchor .live-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 206, 124, 0.12);
    border: 1px solid rgba(0, 206, 124, 0.3);
    color: #00CE7C;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.sante-hospital-anchor .live-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00CE7C;
    box-shadow: 0 0 6px #00CE7C;
    animation: livePulse 1.6s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #00CE7C; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.sante-hospital-anchor .schedule-label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: #F8FAFC;
    margin-bottom: 4px;
}

.sante-hospital-anchor .schedule-shifts {
    font-size: 11px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sante-hospital-anchor .schedule-shifts strong {
    color: #00CE7C;
}

.sante-hospital-anchor .schedule-shifts .sep {
    color: rgba(255, 255, 255, 0.2);
}

.sante-hospital-anchor .emergency-247-card {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 13px 14px;
}

.sante-hospital-anchor .em-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #EF4444;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

.sante-hospital-anchor .em-desc {
    font-size: 11px;
    color: #94A3B8;
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.sante-hospital-anchor .btn-emergency-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    color: #FFFFFF !important;
    font-size: 11.5px;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    transition: all 0.2s ease;
}

.sante-hospital-anchor .btn-emergency-call:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.45);
    color: #FFFFFF !important;
}

/* CỘT 3: KHÁM & ĐIỀU TRỊ */
.sante-hospital-anchor .footer-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sante-hospital-anchor .footer-menu-links li a {
    color: #94A3B8 !important;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 0 !important;
    transition: all 0.2s ease;
}

.sante-hospital-anchor .footer-menu-links li a em {
    font-size: 8.5px;
    color: #00CE7C;
    transition: transform 0.2s ease;
}

.sante-hospital-anchor .footer-menu-links li a:hover {
    color: #00CE7C !important;
    transform: translateX(4px);
}

.sante-hospital-anchor .footer-menu-links li a:hover em {
    transform: translateX(2px);
}

/* CỘT 4: TỔNG ĐÀI VIP, NEWSLETTER & ACCREDITATIONS */
.sante-hospital-anchor .hotline-vip-display {
    background: rgba(223, 186, 115, 0.08);
    border: 1px solid rgba(223, 186, 115, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.sante-hospital-anchor .hotline-vip-label {
    display: block;
    font-size: 10px;
    color: #94A3B8;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.sante-hospital-anchor .hotline-vip-number {
    font-size: 17px;
    font-weight: 900;
    color: #DFBA73 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.sante-hospital-anchor .hotline-vip-number:hover {
    color: #F59E0B !important;
}

.sante-hospital-anchor .footer-newsletter-block {
    margin-bottom: 14px;
}

.sante-hospital-anchor .nl-text {
    font-size: 11.5px;
    color: #94A3B8;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.sante-hospital-anchor .nl-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 3px 4px 3px 12px;
    transition: all 0.25s ease;
}

.sante-hospital-anchor .nl-input-group:focus-within {
    border-color: #00CE7C;
    background: rgba(0, 206, 124, 0.04);
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.18);
}

.sante-hospital-anchor .nl-input-group input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 12px !important;
    color: #FFFFFF !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
    min-width: 0;
}

.sante-hospital-anchor .nl-input-group input::placeholder {
    color: #64748B;
}

.sante-hospital-anchor .nl-input-group button {
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%);
    border: none;
    outline: none;
    color: #FFFFFF !important;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sante-hospital-anchor .nl-input-group button:hover {
    background: #DFBA73;
    color: #0A1220 !important;
}

.sante-hospital-anchor .footer-trust-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sante-hospital-anchor .trust-badge-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 6px 8px;
    border-radius: 8px;
}

.sante-hospital-anchor .trust-badge-item em {
    font-size: 13px;
    flex-shrink: 0;
}

.sante-hospital-anchor .trust-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sante-hospital-anchor .trust-meta small {
    font-size: 9px;
    color: #64748B;
}

.sante-hospital-anchor .trust-meta strong {
    font-size: 10.5px;
    color: #F8FAFC;
}

.sante-hospital-anchor .text-mint { color: #00CE7C !important; }
.sante-hospital-anchor .text-gold { color: #DFBA73 !important; }

/* 3. FOOTER BOTTOM COLOPHON SOCKET */
.sante-hospital-anchor .footer-bottom-wrap {
    background: #070D18 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 18px 0;
    position: relative;
    z-index: 2;
}

.sante-hospital-anchor .footer-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.sante-hospital-anchor .legal-info-line {
    font-size: 12px;
    color: #64748B;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sante-hospital-anchor .legal-info-line .brand-owner {
    font-weight: 700;
    color: #E2E8F0;
}

.sante-hospital-anchor .legal-info-line a {
    color: #00CE7C !important;
    text-decoration: none !important;
}

.sante-hospital-anchor .legal-links-line {
    font-size: 12px;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 0;
}

.sante-hospital-anchor .legal-links-line a {
    color: #94A3B8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.sante-hospital-anchor .legal-links-line a:hover {
    color: #00CE7C !important;
    text-decoration: underline !important;
}

.sante-hospital-anchor .dot-divider {
    color: rgba(255, 255, 255, 0.15);
}

.sante-hospital-anchor .copyright-line {
    font-size: 11px;
    color: #64748B;
}

/* RESPONSIVE OPTIMIZATION */
@media (max-width: 991px) {
    .sante-hospital-anchor .footer-grid-row {
        row-gap: 32px;
    }
}

@media (max-width: 767px) {
    .sante-hospital-anchor {
        padding-top: 36px;
        padding-bottom: 0 !important;
    }
    .sante-hospital-anchor .footer-bottom-wrap {
        padding: 16px 0 20px 0 !important;
    }
    .sante-hospital-anchor .footer-brand-logo .footer-logo-img {
        height: 76px !important;
        max-width: 280px !important;
    }
    .sante-hospital-anchor .footer-social-connect {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }
    .sante-hospital-anchor .social-icons-group {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .sante-hospital-anchor .s-link {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .sante-hospital-anchor .footer-main-wrap {
        padding-bottom: 24px;
    }
    /* Chia danh sách Khám & Điều Trị thành 2 cột gọn gàng */
    .sante-hospital-anchor .footer-menu-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 12px !important;
    }
    .sante-hospital-anchor .footer-menu-links li a {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .sante-hospital-anchor .live-status-card,
    .sante-hospital-anchor .emergency-247-card,
    .sante-hospital-anchor .hotline-vip-display {
        border-radius: 14px !important;
        padding: 12px 14px !important;
    }
    .sante-hospital-anchor .footer-trust-badges {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .sante-hospital-anchor .trust-badge-item {
        padding: 8px 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }
    .sante-hospital-anchor .legal-info-line,
    .sante-hospital-anchor .legal-links-line {
        flex-direction: column;
        gap: 4px;
    }
    .sante-hospital-anchor .dot-divider {
        display: none;
    }
}

/* ========================================================
   MASTER SANTE FLOATING ACTION DOCK (EXPANDABLE SPEED DIAL 2026)
   ======================================================== */
.sante-floating-dock {
    position: fixed;
    right: 24px;
    bottom: 48px; /* Nâng cao vị trí desktop để nổi bật và dễ bấm hơn */
    z-index: 9999;
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sante-floating-dock .dock-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    position: relative;
}

/* Sub-actions container (Ẩn gom mặc định, bung so le khi mở) */
.sante-floating-dock .dock-sub-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px) scale(0.85);
    transform-origin: bottom center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sante-floating-dock.is-expanded .dock-sub-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* SMART CONCIERGE PILL GREETING (LỜI CHÀO Y KHOA THÔNG MINH) */
.sante-concierge-pill {
    position: absolute;
    right: 68px;
    bottom: 2px;
    background: #FFFFFF;
    border: 1.5px solid rgba(0, 206, 124, 0.4);
    box-shadow: 0 10px 30px rgba(33, 18, 97, 0.16), 0 2px 8px rgba(0, 206, 124, 0.1);
    border-radius: 999px;
    padding: 8px 14px 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(20px) scale(0.92);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.sante-concierge-pill.is-showing {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.sante-concierge-pill .concierge-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00CE7C;
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.25);
    flex-shrink: 0;
    animation: livePulse 1.6s infinite;
}

.sante-concierge-pill .concierge-text-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.sante-concierge-pill .concierge-title-line {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
}

.sante-concierge-pill .concierge-greeting-txt {
    font-size: 12.5px;
    font-weight: 800;
    color: #211261;
}

.sante-concierge-pill .concierge-live-tag {
    font-size: 9px;
    font-weight: 800;
    color: #009E5E;
    background: rgba(0, 206, 124, 0.12);
    border: 1px solid rgba(0, 206, 124, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
}

.sante-concierge-pill .concierge-sub-txt {
    font-size: 11px;
    color: #64748B;
    line-height: 1.3;
}

.sante-concierge-pill .concierge-close-chip {
    background: #F1F5F9;
    border: none;
    color: #94A3B8;
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 2px;
    transition: all 0.2s ease;
    outline: none;
    line-height: 1;
}

.sante-concierge-pill .concierge-close-chip:hover {
    background: #E2E8F0;
    color: #211261;
}

.sante-floating-dock .dock-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sante-floating-dock .dock-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #211261;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(33, 18, 97, 0.35);
    border: 2px solid #FFFFFF;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sante-floating-dock .dock-btn.btn-call-emergency {
    background: #211261;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(33, 18, 97, 0.35);
}

.sante-floating-dock .dock-btn.btn-booking {
    background: #211261;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(33, 18, 97, 0.35);
}

.sante-floating-dock .dock-btn.btn-messenger {
    background: #211261;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(33, 18, 97, 0.35);
}

.sante-floating-dock .dock-btn:hover {
    background: #00CE7C !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 206, 124, 0.45);
}

/* Master Toggle Button (Nút mẹ điều khiển bung/gập) */
.sante-floating-dock .dock-master-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sante-floating-dock .dock-master-toggle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #211261;
    color: #FFFFFF !important;
    border: 2.5px solid #FFFFFF;
    box-shadow: 0 8px 26px rgba(33, 18, 97, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    animation: fabBreathe 3.5s infinite ease-in-out;
}

@keyframes fabBreathe {
    0%, 100% {
        box-shadow: 0 8px 26px rgba(33, 18, 97, 0.4), 0 0 0 0 rgba(0, 206, 124, 0.5);
    }
    50% {
        box-shadow: 0 12px 32px rgba(33, 18, 97, 0.5), 0 0 0 8px rgba(0, 206, 124, 0);
    }
}

.sante-floating-dock .dock-master-toggle:hover {
    background: #00CE7C;
    box-shadow: 0 10px 30px rgba(0, 206, 124, 0.45);
    transform: scale(1.06);
}

.sante-floating-dock .dock-master-toggle .icon-open {
    font-size: 22px;
    transition: all 0.3s ease;
    opacity: 1;
    transform: rotate(0deg) scale(1);
    display: block;
}

.sante-floating-dock .dock-master-toggle .icon-close {
    font-size: 20px;
    position: absolute;
    transition: all 0.3s ease;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    display: block;
}

/* Trạng thái khi mở Menu nổi */
.sante-floating-dock.is-expanded .dock-master-toggle {
    background: #211261 !important;
    box-shadow: 0 8px 28px rgba(33, 18, 97, 0.5);
    transform: rotate(90deg);
}

.sante-floating-dock.is-expanded .dock-master-toggle .icon-open {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.sante-floating-dock.is-expanded .dock-master-toggle .icon-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Hover Tooltip (Label mô tả chức năng chuẩn y khoa) */
.sante-floating-dock .dock-tooltip {
    position: absolute;
    right: 64px;
    white-space: nowrap;
    background: #120C3B;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.sante-floating-dock .dock-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent #120C3B;
}

.sante-floating-dock .dock-item:hover .dock-tooltip,
.sante-floating-dock .dock-master-item:hover .dock-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@media (max-width: 767px) {
    .sante-floating-dock {
        right: 16px;
        bottom: 85px !important; /* Nâng cao lên 85px: nằm đúng vùng ngón cái thoải mái (Thumb Zone), không cạ sát đáy hay bị thanh điều hướng che */
    }
    .sante-floating-dock .dock-master-toggle {
        width: 52px;
        height: 52px;
        min-width: 50px;
        min-height: 50px;
        box-shadow: 0 8px 25px rgba(33, 18, 97, 0.45);
    }
    .sante-floating-dock .dock-btn {
        width: 48px;
        height: 48px;
        min-width: 46px;
        min-height: 46px;
        font-size: 17px;
    }
    .sante-concierge-pill {
        right: 62px !important;
        bottom: 4px !important;
    }
}

/* ========================================================
   7. SANTE SUBPAGE MODERN HEALTHCARE STYLING (QUIET LUXURY)
   ======================================================== */

.middle-fullwidth {
    padding: 10px 0 80px 0;
    min-height: 60vh;
}

/* ========================================================
   7.1 SANTE SPECIALTIES PORTAL (CHUYEN KHOA ENHANCED)
   ======================================================== */
.sante-specialties-portal {
    background: #F8FAFC;
}

/* Hero & Header Filter Section */
.spec-hero-section {
    padding: 20px 0 45px 0;
    background: radial-gradient(circle at 50% 0%, rgba(0, 206, 124, 0.08) 0%, rgba(248, 250, 252, 0) 70%);
}

.spec-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 206, 124, 0.12);
    border: 1px solid rgba(0, 206, 124, 0.25);
    padding: 6px 18px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.spec-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00CE7C;
    box-shadow: 0 0 10px #00CE7C;
}

.spec-badge-txt {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #083B2E;
    text-transform: uppercase;
}

.spec-hero-title {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #211261 !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.02em;
}

.spec-title-highlight {
    background: linear-gradient(135deg, #00CE7C 0%, #083B2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spec-hero-desc {
    font-size: 15.5px;
    color: #475569;
    max-width: 780px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

/* Search Bar Box */
.spec-search-container {
    max-width: 680px;
    margin: 0 auto 24px auto;
}

.spec-search-field {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 999px;
    padding: 6px 20px 6px 18px;
    min-height: 52px;
    box-shadow: 0 8px 30px rgba(33, 18, 97, 0.06);
    transition: all 0.25s ease;
}

.spec-search-field:focus-within {
    border-color: #00A865;
    box-shadow: 0 12px 35px rgba(0, 168, 101, 0.15);
}

.spec-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.spec-search-field input {
    flex: 1;
    border: none !important;
    outline: none !important;
    font-size: 14.5px;
    color: #1E293B;
    background: transparent;
    padding: 10px 0;
    min-height: 44px;
    box-shadow: none !important;
}

.spec-search-field input::placeholder {
    color: #94A3B8;
    font-size: 14px;
}

.spec-search-clear-btn {
    background: #E2E8F0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #475569;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
}

.spec-search-clear-btn:hover {
    background: #CBD5E1;
    color: #0F172A;
}

/* Filter Tabs */
.spec-filter-wrapper {
    margin-bottom: 35px;
}

.spec-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.spec-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    padding: 12px 24px;
    min-height: 48px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.spec-tab-btn i {
    font-size: 15px;
    color: #00A865;
    transition: color 0.25s ease;
}

.spec-tab-btn:hover {
    border-color: #00CE7C;
    color: #083B2E;
    transform: translateY(-2px);
}

.spec-tab-btn.active {
    background: #083B2E;
    border-color: #083B2E;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(8, 59, 46, 0.25);
}

.spec-tab-btn.active i {
    color: #00CE7C;
}

/* Stats Quick Strip (Fluid, Non-Boxy Strip) */
.spec-stats-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 24px 10px;
    margin-top: 10px;
}

.spec-stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 20px;
}

.spec-stat-num {
    font-size: 34px;
    font-weight: 900;
    color: #00A865;
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    display: inline-block;
    transition: transform 0.3s ease;
}

.spec-stat-cell:hover .spec-stat-num {
    transform: scale(1.08);
    color: #00CE7C;
}

.spec-stat-lbl {
    font-size: 13.5px;
    font-weight: 700;
    color: #211261;
}

/* 2. RICH SPECIALTY BENTO CARDS */
.spec-listing-section {
    padding: 20px 0 60px 0;
}

.spec-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.spec-grid-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    display: block;
}

.spec-unit-rich {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    box-shadow: 0 6px 24px rgba(33, 18, 97, 0.04) !important;
}

.spec-unit-rich:hover {
    transform: translateY(-8px) !important;
    border-color: #00CE7C !important;
    box-shadow: 0 20px 48px rgba(33, 18, 97, 0.12) !important;
}

.spec-unit-badge {
    display: none !important;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: rgba(8, 59, 46, 0.88);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.spec-unit-badge.spec-badge-gold {
    background: #9A7B38;
    color: #FFFFFF;
    border-color: #DFBA73;
}

.spec-unit-badge.spec-badge-red {
    background: #DC2626;
    color: #FFFFFF;
}

.spec-unit-rich .img figure {
    margin: 0 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 190px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #F1F5F9 !important;
}

.spec-unit-rich .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.spec-unit-rich:hover .img img {
    transform: scale(1.06) !important;
}

.spec-unit-rich .caption {
    padding: 16px 20px 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.spec-unit-title {
    margin-bottom: 8px !important;
}

.spec-unit-title a {
    color: #211261 !important;
    text-decoration: none !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: auto !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}

.spec-unit-rich:hover .spec-unit-title a {
    color: #00A865 !important;
}

/* Feature tags */
.spec-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.spec-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: #083B2E;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 6px;
    padding: 4px 10px;
    line-height: 1.4;
}

.spec-tag.spec-tag-red {
    background: #FEF2F2;
    color: #991B1B;
    border-color: #FECACA;
}

.spec-unit-rich .brief {
    color: #475569 !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-align: left !important;
}

.spec-unit-rich .brief p {
    margin: 0 !important;
    text-align: left !important;
}

/* Expert mini quote */
.spec-expert-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    border-left: 3px solid #00A865;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
    font-size: 12.5px;
    color: #1E293B;
    line-height: 1.4;
}

.spec-expert-mini i {
    color: #00A865;
    font-size: 14px;
    flex-shrink: 0;
}

.spec-expert-mini.text-red {
    border-left-color: #DC2626;
    color: #991B1B;
}

.spec-expert-mini.text-red i {
    color: #DC2626;
}

/* Card Actions */
.spec-unit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}

.btn-spec-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 15px;
    min-height: 38px;
    height: 38px;
    line-height: 1;
    border: 1.5px solid #211261;
    border-radius: 999px;
    color: #211261 !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.btn-spec-detail em {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.btn-spec-detail:hover {
    background: #211261;
    color: #FFFFFF !important;
}

.btn-spec-detail:hover em {
    transform: translateX(3px);
}

.btn-spec-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #083B2E;
    color: #FFFFFF !important;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 18px;
    min-height: 38px;
    height: 38px;
    line-height: 1;
    border-radius: 999px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.btn-spec-book:hover {
    background: #00A865;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 168, 101, 0.35);
}

.btn-spec-book.btn-spec-emergency {
    background: #DC2626;
}

.btn-spec-book.btn-spec-emergency:hover {
    background: #B91C1C;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

/* No Results State */
.spec-no-results {
    text-align: center;
    background: #FFFFFF;
    border: 1px dashed #CBD5E1;
    border-radius: 20px;
    padding: 60px 20px;
    max-width: 600px;
    margin: 40px auto;
}

.spec-no-results-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.spec-no-results h3 {
    font-size: 20px;
    font-weight: 800;
    color: #211261;
    margin-bottom: 8px;
}

.spec-no-results p {
    font-size: 14px;
    color: #475569;
    margin-bottom: 20px;
}

/* 3. CLINICAL PILLARS SECTION (Asymmetric Bento Grid 60/40) */
.spec-pillars-section {
    padding: 85px 0;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    position: relative;
}

.spec-badge-sub {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: #00A865;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.spec-section-title {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #211261 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em;
}

.spec-section-subtitle {
    font-size: 15px;
    color: #475569;
    max-width: 680px;
    margin: 0 auto 44px auto;
    line-height: 1.6;
}

.spec-bento-grid {
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 16px;
    align-items: stretch;
}

.spec-bento-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 20px 24px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.03);
}

.spec-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(33, 18, 97, 0.08);
}

/* Thẻ Hero Bento chiếm trọn cột trái (row 1 to 4) */
.bento-hero-card {
    grid-row: 1 / 4;
    background: linear-gradient(145deg, #0A4537 0%, #062820 100%);
    border: 1px solid rgba(0, 206, 124, 0.25);
    color: #FFFFFF;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.bento-card-bg-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 206, 124, 0.25) 0%, rgba(0, 206, 124, 0) 70%);
    pointer-events: none;
}

.bento-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bento-pill-gold {
    font-size: 11px;
    font-weight: 800;
    color: #DFBA73;
    background: rgba(223, 186, 115, 0.15);
    border: 1px solid rgba(223, 186, 115, 0.35);
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.06em;
}

.bento-tag-sub {
    font-size: 12px;
    color: #A7F3D0;
    font-weight: 600;
}

.bento-main-title {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.bento-main-desc {
    font-size: 14.5px;
    color: #CBD5E1;
    line-height: 1.65;
    margin-bottom: 20px;
}

.bento-main-desc strong {
    color: #00CE7C;
}

.bento-expert-avatars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: auto;
}

.expert-avatar-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    transition: background 0.25s ease;
}

.expert-avatar-chip:hover {
    background: rgba(255, 255, 255, 0.12);
}

.expert-avatar-chip i {
    font-size: 20px;
    color: #00CE7C;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 206, 124, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.expert-avatar-chip div strong {
    display: block;
    font-size: 14px;
    color: #FFFFFF;
}

.expert-avatar-chip div span {
    font-size: 12px;
    color: #94A3B8;
}

/* Các thẻ Bento bên phải */
.bento-tech-card,
.bento-speed-card,
.bento-bhyt-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #FAFCFF;
    border-left: 4px solid #E2E8F0;
    padding: 18px 22px;
}

.bento-tech-card {
    border-left-color: #0284C7;
}

.bento-speed-card {
    border-left-color: #7C3AED;
}

.bento-bhyt-card {
    border-left-color: #00CE7C;
}

.bento-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.bento-card-icon.tone-mint {
    background: rgba(2, 132, 199, 0.1);
    color: #0284C7;
}

.bento-card-icon.tone-purple {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
}

.bento-card-icon.tone-azure {
    background: rgba(0, 206, 124, 0.1);
    color: #083B2E;
}

.spec-bento-card:hover .bento-card-icon {
    transform: scale(1.08);
}

.bento-mini-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.bento-sub-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}

.bento-sub-desc {
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* 4. 4-STEP PROCESS SECTION (Modern Journey Stepper / Connected Flow) */
.spec-process-section {
    padding: 85px 0;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    position: relative;
}

.spec-fluid-process {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
}

.process-flow-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

.process-flow-track::before {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(12.5% + 24px);
    right: calc(12.5% + 24px);
    height: 2px;
    background: repeating-linear-gradient(90deg, #00CE7C 0, #00CE7C 8px, transparent 8px, transparent 14px);
    z-index: 1;
    opacity: 0.8;
}

.flow-step-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 24px 20px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.flow-step-item:hover {
    transform: translateY(-6px);
    border-color: #00CE7C;
    box-shadow: 0 16px 36px rgba(0, 206, 124, 0.12);
}

.flow-node-marker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.flow-step-idx {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #F0FDF4;
    color: #00A865;
    border: 1.5px solid #BBF7D0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

.flow-step-item:hover .flow-step-idx {
    background: #00CE7C;
    color: #FFFFFF;
    border-color: #00CE7C;
    transform: scale(1.08) rotate(-4deg);
}

.flow-step-counter {
    font-size: 22px;
    font-weight: 900;
    color: #CBD5E1;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: inherit;
    transition: all 0.3s ease;
}

.flow-step-item:hover .flow-step-counter {
    color: #00A865;
    transform: scale(1.08);
}

.flow-content-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    position: relative;
    z-index: 2;
}

.flow-timing-tag {
    font-size: 11.5px;
    font-weight: 800;
    color: #047857;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.flow-step-heading {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
}

.flow-step-text {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* 5. FAQ & MEDICAL CONCIERGE BOOKING */
.spec-faq-section {
    padding: 85px 0 100px 0;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}

.spec-faq-cta-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 48px;
    align-items: flex-start;
}

.faq-main-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #211261 !important;
    margin-bottom: 24px !important;
    line-height: 1.3 !important;
}

.sante-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sante-faq-accordion .faq-item {
    background: #FAFCFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.sante-faq-accordion .faq-item.active {
    border-color: #00CE7C;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 206, 124, 0.08);
}

.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    min-height: 54px;
    background: transparent;
    border: none;
    font-size: 14.5px;
    font-weight: 700;
    color: #211261;
    text-align: left;
    cursor: pointer;
    gap: 12px;
}

.faq-q-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

.faq-q-text i {
    color: #00A865;
    font-size: 16px;
    flex-shrink: 0;
}

.faq-arrow {
    font-size: 13px;
    color: #64748B;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
    color: #00A865;
}

.faq-panel {
    display: none;
    padding: 0 20px 18px 46px;
    font-size: 13.5px;
    color: #334155;
    line-height: 1.65;
}

.faq-panel p {
    margin: 0;
}

.faq-panel strong {
    color: #083B2E;
}

/* Concierge VIP Booking Panel */
.spec-booking-panel {
    background: linear-gradient(145deg, #0A4537 0%, #062820 100%);
    border: 1px solid rgba(0, 206, 124, 0.2);
    border-radius: 24px;
    padding: 38px 34px;
    color: #FFFFFF;
    box-shadow: 0 20px 48px rgba(8, 59, 46, 0.2);
    position: relative;
    overflow: hidden;
}

.spec-booking-panel::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 206, 124, 0.25) 0%, rgba(0, 206, 124, 0) 70%);
}

.booking-badge {
    display: inline-block;
    background: rgba(223, 186, 115, 0.2);
    color: #DFBA73;
    border: 1px solid rgba(223, 186, 115, 0.4);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.booking-title {
    font-size: 23px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.booking-subtitle {
    font-size: 13.5px;
    color: #CBD5E1;
    margin-bottom: 20px;
    line-height: 1.55;
    text-wrap: balance;
}

.booking-feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bf-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bf-pill i {
    color: #00CE7C;
}

.btn-sante-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #00CE7C;
    color: #083B2E !important;
    font-size: 14px;
    font-weight: 800;
    padding: 13px 26px;
    min-height: 46px;
    border-radius: 999px;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 206, 124, 0.35);
}

.btn-sante-primary:hover {
    background: #FFFFFF;
    color: #083B2E !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
}

.btn-block {
    display: flex;
    width: 100%;
}

.booking-hotline-note {
    margin-top: 18px;
}

.booking-hotline-note span {
    display: block;
    font-size: 12.5px;
    color: #94A3B8;
    margin-bottom: 4px;
}

.booking-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 900;
    color: #00CE7C !important;
    text-decoration: none !important;
    min-height: 38px;
    transition: color 0.2s ease;
}

.booking-phone-link:hover {
    color: #DFBA73 !important;
}

/* RESPONSIVE QUERIES FOR GUIDES & PROCESSES (QUY TRINH KHAM) */
@media (max-width: 768px) {
    .middle-fullwidth h1.heading-4 {
        text-align: center !important;
        font-size: 21px !important;
        line-height: 1.35 !important;
        margin-bottom: 20px !important;
    }
    .sante-step-header {
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }
    .sante-step-badge {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
    }
    .sante-step-title {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }
    .sante-step-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }
}

/* RESPONSIVE QUERIES FOR CHUYEN KHOA */
@media (max-width: 1199px) {
    .spec-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .spec-bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-hero-card {
        grid-row: auto;
    }
    .process-flow-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .process-flow-track::before {
        display: none;
    }
    .spec-faq-cta-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 767px) {
    #ctl00_divAlt1,
    .altcontent1,
    .breadcrumb-wrapper {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }
    .sante-specialties-portal .middle-fullwidth,
    .middle-fullwidth {
        padding-top: 0 !important;
    }
    .spec-hero-section {
        padding: 12px 0 35px 0 !important;
    }
    .spec-hero-title {
        font-size: 26px !important;
    }
    .spec-stats-strip {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .spec-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .spec-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .bento-hero-card {
        padding: 28px 20px;
    }
    .bento-main-title {
        font-size: 21px !important;
    }
    /* MOBILE MEDICAL JOURNEY TIMELINE */
    .process-flow-track {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        padding-left: 56px;
    }
    .process-flow-track::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: 24px !important;
        bottom: 24px !important;
        left: 20px !important;
        width: 2px !important;
        height: auto !important;
        background: linear-gradient(180deg, #00CE7C 0%, #00A865 70%, #CBD5E1 100%) !important;
        z-index: 1 !important;
    }
    .flow-step-item {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0 0 28px 0;
        box-shadow: none;
        position: relative;
        z-index: 2;
    }
    .flow-step-item:last-child {
        padding-bottom: 0;
    }
    .flow-node-marker {
        position: absolute;
        left: -56px;
        top: 0;
        width: auto;
        margin-bottom: 0;
    }
    .flow-step-idx {
        width: 42px;
        height: 42px;
        font-size: 17px;
        border-radius: 50%;
        background: #FFFFFF;
        color: #00A865;
        border: 2px solid #00CE7C;
        box-shadow: 0 2px 10px rgba(0, 206, 124, 0.2);
    }
    .flow-step-counter {
        display: none;
    }
    .flow-content-box {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 16px !important;
        padding: 16px 18px !important;
        box-shadow: 0 4px 16px rgba(33, 18, 97, 0.04) !important;
    }
    .flow-timing-tag {
        font-size: 11px;
        margin-bottom: 8px;
    }
    .flow-step-heading {
        font-size: 15.5px !important;
        margin-bottom: 6px !important;
    }
    .flow-step-text {
        font-size: 12.5px;
        line-height: 1.55;
    }
    .spec-booking-panel {
        padding: 28px 20px;
    }
    .spec-faq-box .spec-badge-sub {
        display: block !important;
        margin: 0 auto 10px auto !important;
        text-align: center !important;
    }
    .faq-main-title {
        font-size: 23px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    .faq-panel {
        padding: 0 16px 16px 16px;
    }
}

.btn-pill {
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

.btn-border-blue {
    border: 1.5px solid #211261 !important;
    color: #211261 !important;
    background: transparent !important;
}

.btn-border-blue:hover {
    background: #211261 !important;
    color: #FFFFFF !important;
}

/* 8. SUPPORT & SIDE-NAV STYLES - Modern Quiet Luxury */
.support-side-nav {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    position: sticky !important;
    top: 90px !important;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.04) !important;
}

.support-side-nav h2 {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #211261 !important;
    border-bottom: 2px solid #00CE7C !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.01em !important;
}

.support-side-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.support-side-nav ul li {
    margin-bottom: 6px !important;
}

.support-side-nav ul li a {
    display: block !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.support-side-nav ul li a:hover {
    background: #F1F5F9 !important;
    color: #211261 !important;
    transform: translateX(4px) !important;
}

.support-side-nav ul li.active a {
    background: linear-gradient(135deg, #211261 0%, #150B42 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(33, 18, 97, 0.2) !important;
    transform: translateX(4px) !important;
}

/* Support Main Content Article Area */
.support-section .article-content {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 36px 32px !important;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.04) !important;
}

.support-section .article-content h1,
.support-section .article-content h2,
.support-section .article-content h3 {
    color: #211261 !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
}

.support-section .article-content p {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.75 !important;
    margin-bottom: 14px !important;
}

/* ========================================================
   Step Tab Buttons Styling - Clean Horizontal Stepper
   ======================================================== */
.support-content-wrap .step-tab,
.step-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 10px 4px 18px 4px !important;
    margin: 0 0 24px 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
}

.support-content-wrap .step-tab:after,
.step-tab:after {
    display: none !important;
    content: none !important;
}

.support-content-wrap .step-tab::-webkit-scrollbar,
.step-tab::-webkit-scrollbar {
    height: 5px !important;
}

.support-content-wrap .step-tab::-webkit-scrollbar-track,
.step-tab::-webkit-scrollbar-track {
    background: #F1F5F9 !important;
    border-radius: 999px !important;
}

.support-content-wrap .step-tab::-webkit-scrollbar-thumb,
.step-tab::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 999px !important;
}

.support-content-wrap .step-tab li,
.step-tab li {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.support-content-wrap .step-tab li a,
.step-tab li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 96px !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #475569 !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-align: center !important;
}

.support-content-wrap .step-tab li a:hover,
.step-tab li a:hover {
    background: #F8FAFC !important;
    color: #211261 !important;
    border-color: #00CE7C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0, 206, 124, 0.12) !important;
}

.support-content-wrap .step-tab li.active a,
.step-tab li.active a {
    background: linear-gradient(135deg, #00CE7C 0%, #00B069 100%) !important;
    color: #FFFFFF !important;
    border-color: #00CE7C !important;
    box-shadow: 0 6px 16px rgba(0, 206, 124, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* Sante Step Card Luxury Structure */
.sante-step-card {
    background: #FFFFFF !important;
    border: 1.5px solid #F1F5F9 !important;
    border-radius: 20px !important;
    padding: 28px !important;
    box-shadow: 0 10px 30px rgba(33, 18, 97, 0.04) !important;
    transition: all 0.3s ease !important;
}

.sante-step-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.sante-step-badge {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #211261 0%, #150B42 100%) !important;
    color: #00CE7C !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(33, 18, 97, 0.2) !important;
}

.sante-step-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.sante-step-body {
    font-size: 15px !important;
    color: #334155 !important;
    line-height: 1.8 !important;
}

.sante-step-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.sante-step-list li {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 12px !important;
    font-size: 15px !important;
    color: #334155 !important;
    line-height: 1.75 !important;
}

.sante-step-list li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #00CE7C !important;
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.2) !important;
}

/* Sante Alert & Note Box */
.sante-guide-alert {
    background: #F8FAFC !important;
    border-left: 4px solid #00CE7C !important;
    border-radius: 0 16px 16px 0 !important;
    padding: 20px 24px !important;
    margin-top: 24px !important;
    border-top: 1px solid #E2E8F0 !important;
    border-right: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.sante-guide-alert.alert-warning {
    border-left-color: #F59E0B !important;
    background: #FFFBEB !important;
    border-color: #FEF3C7 !important;
}

.sante-guide-alert-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sante-guide-alert.alert-warning .sante-guide-alert-title {
    color: #B45309 !important;
}

/* Medical Data Tables Modern */
.sante-table-wrap {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    margin: 20px 0 !important;
}

.sante-medical-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.sante-medical-table th {
    background: #211261 !important;
    color: #FFFFFF !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    text-align: left !important;
    border: none !important;
}

.sante-medical-table td {
    padding: 14px 20px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 14.5px !important;
    color: #334155 !important;
    vertical-align: middle !important;
}

.sante-medical-table tr:last-child td {
    border-bottom: none !important;
}

.sante-medical-table tr:hover td {
    background: #F8FAFC !important;
}

.sante-time-pill {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: rgba(0, 206, 124, 0.12) !important;
    color: #008751 !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

/* Bento Feature Cards */
.sante-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    margin: 20px 0 !important;
}

.sante-bento-card {
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    transition: all 0.25s ease !important;
}

.sante-bento-card:hover {
    background: #FFFFFF !important;
    border-color: #00CE7C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 206, 124, 0.1) !important;
}

.sante-bento-card h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sante-bento-card p {
    font-size: 14px !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* Image Showcase Frame */
.sante-image-frame {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.sante-image-frame img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* 9. NEWS & MEDICAL SUB-NAV PILLS */
.news-sub-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    gap: 10px;
}

.news-sub-nav ul li a {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    text-decoration: none;
    transition: all 0.25s ease;
}

.news-sub-nav ul li a:hover,
.news-sub-nav ul li.active a {
    background: #211261;
    color: #FFFFFF;
    border-color: #211261;
}

/* News Horizontal List (Legacy Clean Fallback) */
.news-horizontal-item-legacy {
    display: flex;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(33, 18, 97, 0.08);
    border-radius: 14px;
    padding: 14px;
}

/* Sidebar Latest News Widget (Quiet Luxury) */
.news-latest-list {
    background: #FFFFFF;
    border: 1px solid rgba(33, 18, 97, 0.08);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.03);
}

.news-latest-list .heading-5 {
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #211261 !important;
    border-bottom: 2px solid #00CE7C;
    padding-bottom: 10px;
    margin-bottom: 20px !important;
}

.news-latest-item {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(33, 18, 97, 0.08);
    align-items: center;
}

.news-latest-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.news-latest-item .img figure {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
    flex-shrink: 0;
}

.news-latest-item .img figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-latest-item:hover .img figure img {
    transform: scale(1.1);
}

.news-latest-item .caption .title a {
    font-size: 13.5px;
    font-weight: 600;
    color: #211261;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.news-latest-item .caption .title a:hover {
    color: #00CE7C;
}

.news-latest-item .caption .date {
    font-size: 11.5px;
    color: #94A3B8;
    margin-top: 4px;
}

/* Pagination Quiet Luxury */
.newspager .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    list-style: none;
    padding: 0;
}

.newspager .pagination li a,

/* ========================================================
   SANTE MODERN MEDICAL JOURNAL 2026 (EDITORIAL MAGAZINE)
   Quiet Luxury, Apple Newsroom & Mayo Clinic Health Digest
   ======================================================== */

.sante-news-page-main {
    background-color: #FAFCFB !important;
}

/* 1. MASTHEAD & HERO SPOTLIGHT */
.sante-journal-masthead {
    background: #F8FAFC !important;
    padding: 36px 0 32px 0 !important;
    border-bottom: 1px solid rgba(33, 18, 97, 0.06) !important;
}

.journal-header-block {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 24px auto !important;
}

.journal-brand-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.1) !important;
    padding: 4px 14px !important;
    border-radius: 99px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(33, 18, 97, 0.04) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.badge-dot {
    width: 7px !important;
    height: 7px !important;
    background: #00CE7C !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px rgba(0, 206, 124, 0.25) !important;
}

.badge-txt {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #211261 !important;
}

.badge-verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #008751 !important;
    padding-left: 8px !important;
    border-left: 1px solid rgba(33, 18, 97, 0.12) !important;
}

.journal-title {
    font-size: clamp(24px, 2.6vw, 32px) !important;
    font-weight: 900 !important;
    color: #211261 !important;
    line-height: 1.25 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.01em !important;
}

.journal-desc {
    font-size: 14px !important;
    color: #334155 !important;
    line-height: 1.55 !important;
    margin: 0 auto !important;
    max-width: 660px !important;
}

/* Bento Hero (60:40) */
.journal-hero-bento {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* Main Feature (Left) */
.journal-main-feature {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    box-shadow: 0 4px 18px rgba(33, 18, 97, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.journal-main-feature:hover {
    transform: translateY(-3px) !important;
    border-color: #00CE7C !important;
    box-shadow: 0 16px 36px rgba(33, 18, 97, 0.08) !important;
}

.feature-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9.5 !important;
    height: auto !important;
    max-height: 250px !important;
    overflow: hidden !important;
    background: #0F172A !important;
}

.feature-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.journal-main-feature:hover .feature-cover img {
    transform: scale(1.05) !important;
}

.feature-cover-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(33, 18, 97, 0) 60%, rgba(33, 18, 97, 0.3) 100%) !important;
    pointer-events: none !important;
}

.feature-gold-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: #DFBA73 !important;
    color: #211261 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    line-height: 1.2 !important;
}

.feature-body {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
}

.feature-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

.cat-pill {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 99px !important;
}

.cat-pill.pill-teal {
    background: rgba(0, 206, 124, 0.12) !important;
    color: #00A664 !important;
}

.cat-pill.pill-gold {
    background: rgba(223, 186, 115, 0.2) !important;
    color: #A37E1C !important;
}

.cat-pill.pill-navy {
    background: rgba(33, 18, 97, 0.08) !important;
    color: #211261 !important;
}

.meta-date, .meta-readtime {
    font-size: 11.5px !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
}

.feature-heading {
    font-size: clamp(16.5px, 1.6vw, 19px) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
    text-transform: capitalize !important;
}

.feature-heading a {
    color: #211261 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.feature-heading a:hover {
    color: #00CE7C !important;
}

.feature-summary {
    font-size: 13.5px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 0 0 16px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.feature-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(33, 18, 97, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.feature-author-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.author-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #211261 !important;
    color: #DFBA73 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.author-name {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    display: block !important;
    line-height: 1.2 !important;
}

.author-sub {
    font-size: 10px !important;
    color: #94A3B8 !important;
    display: block !important;
}

.feature-read-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(0, 206, 124, 0.1) !important;
    color: #00A664 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.feature-read-btn:hover {
    background: #00CE7C !important;
    color: #FFFFFF !important;
    transform: translateX(3px) !important;
}

/* Side Picks (Right) */
.journal-side-picks {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: 100% !important;
    justify-content: space-between !important;
}

.side-pick-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 160px 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
    flex: 1 !important;
    box-shadow: 0 3px 14px rgba(33, 18, 97, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    align-items: stretch !important;
}

.side-pick-card:hover {
    transform: translateY(-2px) !important;
    border-color: #00CE7C !important;
    box-shadow: 0 10px 24px rgba(33, 18, 97, 0.07) !important;
}

.pick-media {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    height: 100% !important;
    max-height: 130px !important;
    flex-shrink: 0 !important;
    background: #F1F5F9 !important;
}

.pick-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.side-pick-card:hover .pick-media img {
    transform: scale(1.06) !important;
}

.pick-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    height: 100% !important;
}

.pick-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-transform: capitalize !important;
}

.pick-title a {
    color: #211261 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.pick-title a:hover {
    color: #00CE7C !important;
}

.pick-desc {
    font-size: 12.5px !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.pick-foot {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(33, 18, 97, 0.08) !important;
}

.pick-views {
    font-size: 11px !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
}

.pick-link {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #00CE7C !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
}

.pick-link:hover {
    transform: translateX(3px) !important;
}

@media (max-width: 991px) {
    .journal-hero-bento {
        grid-template-columns: 1fr !important;
    }
    .feature-cover {
        aspect-ratio: 16 / 9 !important;
        max-height: 300px !important;
    }
    .side-pick-card {
        grid-template-columns: 140px 1fr !important;
    }
}

/* ========================================================
   2. TOOLBAR & 3-COLUMN MAGAZINE GRID
   ======================================================== */
.sante-journal-feed-section {
    padding: 32px 0 72px 0 !important;
}

.journal-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(33, 18, 97, 0.08) !important;
}

.filter-pills-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding: 4px 2px 8px 2px !important;
}

.filter-pills-bar::-webkit-scrollbar {
    display: none !important;
}

.filter-pill {
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.12) !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    min-height: 44px !important;
    border-radius: 99px !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.filter-pill:hover {
    background: #F1F5F9 !important;
    color: #211261 !important;
    border-color: #211261 !important;
    transform: translateY(-1px) !important;
}

.filter-pill.active {
    background: #211261 !important;
    color: #FFFFFF !important;
    border-color: #211261 !important;
    box-shadow: 0 4px 12px rgba(33, 18, 97, 0.2) !important;
}

.search-box-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.search-icon-svg {
    position: absolute !important;
    left: 14px !important;
    pointer-events: none !important;
}

.search-box-bar input {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(33, 18, 97, 0.14) !important;
    border-radius: 99px !important;
    padding: 10px 38px 10px 38px !important;
    font-size: 13px !important;
    height: 44px !important;
    min-height: 44px !important;
    width: 260px !important;
    outline: none !important;
    color: #1E293B !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.search-box-bar input:focus {
    border-color: #00CE7C !important;
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.14) !important;
    width: 300px !important;
}

.clear-search-btn {
    position: absolute !important;
    right: 12px !important;
    background: #E2E8F0 !important;
    border: none !important;
    color: #334155 !important;
    font-size: 11px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.clear-search-btn:hover {
    background: #CBD5E1 !important;
    color: #0F172A !important;
}

/* 3-Column Magazine Articles Grid (Synchronized 100% with Y Học Thường Thức) */
.journal-articles-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.journal-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 18px rgba(33, 18, 97, 0.03) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.journal-card.is-hidden {
    display: none !important;
}

.journal-card:hover {
    transform: translateY(-4px) !important;
    border-color: #00CE7C !important;
    box-shadow: 0 16px 36px rgba(33, 18, 97, 0.09) !important;
}

.journal-card .art-card-cover {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1000 / 600 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
    display: block !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid rgba(33, 18, 97, 0.06) !important;
}

.journal-card .art-card-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.journal-card:hover .art-card-cover img {
    transform: scale(1.06) !important;
}

.journal-card .art-card-body {
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
    gap: 14px !important;
    box-sizing: border-box !important;
}

.journal-card .card-badge {
    margin-bottom: 10px !important;
    align-self: flex-start !important;
}

.journal-card .art-card-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
}

.journal-card .art-card-title a {
    color: #211261 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
    min-height: 46px !important;
}

.journal-card .art-card-title a:hover {
    color: #00CE7C !important;
}

.journal-card .art-card-excerpt {
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.journal-card .art-card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
    color: #475569 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(33, 18, 97, 0.06) !important;
    font-weight: 600 !important;
}

.journal-card .art-card-meta .meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.journal-card .art-card-meta .meta-item i {
    font-size: 11px !important;
    color: #64748B !important;
}

/* Empty State */
.journal-empty-state {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1.5px dashed rgba(33, 18, 97, 0.14) !important;
    padding: 40px 20px !important;
    text-align: center !important;
    margin: 24px 0 !important;
}

.empty-icon-ring {
    width: 48px !important;
    height: 48px !important;
    background: #F1F5F9 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

.journal-empty-state h3 {
    color: #211261 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
}

.journal-empty-state p {
    color: #475569 !important;
    font-size: 13.5px !important;
    margin-bottom: 16px !important;
}

.journal-reset-btn {
    background: #211261 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 10px 24px !important;
    min-height: 44px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.journal-reset-btn:hover {
    background: #00CE7C !important;
}

/* Pagination (Matching Y Học Thường Thức Style) */
.journal-pagination-wrap {
    margin-top: 40px !important;
    display: flex !important;
    justify-content: center !important;
}

.journal-pager {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.journal-pager li button,
.journal-pager li a,
.journal-pager li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(33, 18, 97, 0.12) !important;
    color: #211261 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: 'Lexend', sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.journal-pager li span.current {
    background: #211261 !important;
    color: #FFFFFF !important;
    border-color: #211261 !important;
    box-shadow: 0 4px 14px rgba(33, 18, 97, 0.2) !important;
}

.journal-pager li button:hover,
.journal-pager li a:hover {
    background: #00CE7C !important;
    color: #FFFFFF !important;
    border-color: #00CE7C !important;
}

.journal-pager li span.dots {
    border: none !important;
    background: transparent !important;
    color: #64748B !important;
    min-width: 28px !important;
    padding: 0 !important;
}

/* ========================================================
   3. CONSULTATION ACTION STRIP (BOTTOM CTA)
   ======================================================== */
.sante-consult-strip {
    padding: 0 0 60px 0 !important;
}

.consult-strip-inner {
    background: linear-gradient(135deg, #150B42 0%, #211261 45%, #0B332E 100%) !important;
    background-color: #211261 !important;
    border-radius: 20px !important;
    padding: 36px 40px !important;
    color: #FFFFFF !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    box-shadow: 0 16px 36px rgba(21, 11, 66, 0.22) !important;
    border: 1px solid rgba(0, 206, 124, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.consult-strip-inner::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 320px !important;
    height: 320px !important;
    background: radial-gradient(circle, rgba(0, 206, 124, 0.18) 0%, rgba(0, 206, 124, 0) 70%) !important;
    pointer-events: none !important;
}

.strip-left {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 500px !important;
}

.strip-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(0, 206, 124, 0.15) !important;
    background-color: rgba(0, 206, 124, 0.15) !important;
    border: 1px solid rgba(0, 206, 124, 0.6) !important;
    color: #00E88B !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    margin-bottom: 12px !important;
}

.strip-title {
    font-size: clamp(18px, 2vw, 22px) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    background-color: transparent !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.35 !important;
}

.strip-desc {
    font-size: 13.5px !important;
    color: #E2E8F0 !important;
    background-color: transparent !important;
    margin: 0 !important;
    max-width: 620px !important;
    line-height: 1.55 !important;
}

.strip-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    z-index: 1 !important;
}

.strip-hotline-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    min-height: 48px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.strip-hotline-btn svg {
    color: #00E88B !important;
    transition: transform 0.25s ease !important;
}

.strip-hotline-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: #00CE7C !important;
    color: #00E88B !important;
    transform: translateY(-2px) !important;
}

.strip-hotline-btn:hover svg {
    transform: scale(1.1) !important;
}

.strip-btn-booking {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #00CE7C 0%, #00995D 100%) !important;
    background-color: #00CE7C !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    padding: 12px 26px !important;
    min-height: 48px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 22px rgba(0, 206, 124, 0.35) !important;
    border: none !important;
    cursor: pointer !important;
}

.strip-btn-booking:hover {
    background: linear-gradient(135deg, #00E88B 0%, #00B36B 100%) !important;
    background-color: #00E88B !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(0, 206, 124, 0.45) !important;
}

/* ========================================================
   4. Y HỌC THƯỜNG THỨC - CLINICAL EDITORIAL MAGAZINE SUITE
   ======================================================== */
.sante-med-editorial-main {
    background-color: #FAFCFB !important;
}

/* 4.1 Hero Header Section (Expanded High-Impact Luxury) */
.sante-med-hero-editorial {
    padding: 56px 0 40px 0 !important;
    background: radial-gradient(circle at 85% 15%, #E6FBF2 0%, #F2FCF7 45%, #FFFFFF 100%) !important;
    border-bottom: 1px solid rgba(0, 206, 124, 0.14) !important;
    position: relative !important;
}

.med-hero-wrapper {
    display: grid !important;
    grid-template-columns: 46% 54% !important;
    align-items: center !important;
    gap: 40px !important;
    margin-bottom: 40px !important;
}

.med-hero-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-right: 10px !important;
}

.med-hero-badge-wrap {
    margin-bottom: 14px !important;
}

.med-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #00875A !important;
    background: rgba(0, 206, 124, 0.14) !important;
    border: 1px solid rgba(0, 206, 124, 0.3) !important;
    padding: 6px 16px !important;
    border-radius: 99px !important;
    text-transform: uppercase !important;
}

.med-main-title {
    font-size: clamp(38px, 4.4vw, 56px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    color: #211261 !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: -0.03em !important;
}

.med-tagline-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.tagline-dot {
    width: 8px !important;
    height: 8px !important;
    background: #00CE7C !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 10px #00CE7C !important;
}

.med-tagline {
    font-size: clamp(16px, 1.5vw, 19px) !important;
    font-weight: 800 !important;
    color: #006847 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.med-hero-desc {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    margin: 0 0 20px 0 !important;
}

.med-hero-desc strong {
    color: #211261 !important;
}

.med-hero-trust-chips {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.trust-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    padding: 6px 14px !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    box-shadow: 0 2px 8px rgba(33, 18, 97, 0.03) !important;
}

.med-hero-right {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.med-hospital-showcase {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2560 / 1066 !important;
    height: auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(33, 18, 97, 0.16) !important;
    border: 5px solid #FFFFFF !important;
    background: #F8FAFC !important;
}

.med-building-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s ease !important;
}

.med-hospital-showcase:hover .med-building-img {
    transform: scale(1.03) !important;
}

.med-building-overlay {
    position: absolute !important;
    bottom: 16px !important;
    left: 16px !important;
    z-index: 2 !important;
}

.building-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(33, 18, 97, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    color: #FFFFFF !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 8px 18px !important;
    border-radius: 99px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Category Filter Pills Bar */
.med-cat-pills-bar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    padding-top: 10px !important;
}

.med-pill-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 12px 22px !important;
    border-radius: 99px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(33, 18, 97, 0.1) !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 3px 10px rgba(33, 18, 97, 0.04) !important;
    box-sizing: border-box !important;
}

.med-pill-item:hover {
    border-color: #00CE7C !important;
    color: #00CE7C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 206, 124, 0.16) !important;
}

.med-pill-item.active {
    background: #007A4D !important;
    border-color: #007A4D !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(0, 122, 77, 0.35) !important;
}

.med-pill-item.active .pill-icon {
    color: #FFFFFF !important;
}

.med-pill-item.pill-view-all {
    margin-left: auto !important;
    background: transparent !important;
    border-color: transparent !important;
    color: #006847 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
}

.med-pill-item.pill-view-all:hover {
    transform: translateX(4px) !important;
    color: #211261 !important;
}

.latest-art-card.is-hidden {
    display: none !important;
}

.latest-art-card.is-visible {
    animation: medFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes medFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Common Section Headers */
.med-section-header {
    margin-bottom: 22px !important;
}

.med-block-heading {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    color: #211261 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

.med-block-heading .heading-line {
    width: 4px !important;
    height: 18px !important;
    background: #00875A !important;
    border-radius: 99px !important;
}

.med-tag-badge {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: max-content !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    color: #00875A !important;
    background: #E8F7F0 !important;
    border: 1px solid rgba(0, 206, 124, 0.25) !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.med-tag-badge.mini-badge {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: max-content !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    background: #E8F7F0 !important;
    color: #00875A !important;
    border: 1px solid rgba(0, 206, 124, 0.25) !important;
    white-space: nowrap !important;
}

/* 4.2 Bento Featured Section (Option A: Minimalist Typography List - The Atlantic & Monocle Style) */
.sante-med-featured-section {
    padding: 32px 0 24px 0 !important;
    background: #FAFCFB !important;
}

.sante-typo-showcase-box {
    display: grid !important;
    grid-template-columns: 380px 1fr !important;
    gap: 36px !important;
    background: #FFFFFF !important;
    border-radius: 24px !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    padding: 24px 32px !important;
    box-shadow: 0 4px 24px rgba(33, 18, 97, 0.04) !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Left: Visual Lead Card */
.typo-lead-visual-card {
    width: 380px !important;
    max-width: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-right: 1px solid #F1F5F9 !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}

.typo-lead-cover-link {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1000 / 600 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    box-shadow: 0 4px 16px rgba(33, 18, 97, 0.06) !important;
    margin-bottom: 16px !important;
}

.typo-lead-cover-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.typo-lead-visual-card:hover .typo-lead-cover-link img {
    transform: scale(1.05) !important;
}

.typo-lead-summary {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
}

.typo-lead-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
    font-weight: 600 !important;
}

.meta-tag-flag {
    background: #FEF3C7 !important;
    color: #92400E !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    letter-spacing: 0.04em !important;
    border: 1px solid rgba(217, 119, 6, 0.2) !important;
}

.typo-lead-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
}

.typo-lead-title a {
    color: #211261 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 48px !important;
}

.typo-lead-title a:hover {
    color: #00CE7C !important;
}

.typo-lead-desc {
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.55 !important;
    margin: 0 0 14px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.typo-lead-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #00875A !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    min-height: 44px !important;
    transition: all 0.2s ease !important;
}

.typo-lead-btn:hover {
    color: #211261 !important;
    transform: translateX(3px) !important;
}

/* Right: Minimalist Numbered Typography List */
.typo-editorial-list-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.typo-list-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    margin-bottom: 6px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.typo-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.typo-header-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #00CE7C !important;
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.2) !important;
    flex-shrink: 0 !important;
}

.typo-list-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.typo-list-sub {
    font-size: 11.5px !important;
    color: #475569 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.typo-list-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    justify-content: space-between !important;
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.typo-item-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: #F8FAFC !important;
    border: 1px solid #EEF2F6 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}

.typo-item-row:hover {
    background: #FFFFFF !important;
    border-color: #00CE7C !important;
    box-shadow: 0 6px 20px rgba(33, 18, 97, 0.06) !important;
    text-decoration: none !important;
}

.typo-num-pill {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(0, 206, 124, 0.3) !important;
    color: #007A4D !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Lexend', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 206, 124, 0.08) !important;
    margin-top: 2px !important;
}

.typo-item-row:hover .typo-num-pill {
    background: #007A4D !important;
    border-color: #007A4D !important;
    color: #FFFFFF !important;
    transform: scale(1.05) !important;
}

.typo-item-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.typo-item-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    color: #64748B !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
    flex-wrap: wrap !important;
}

.typo-item-meta .meta-date-views {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #64748B !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.typo-item-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 4px 0 !important;
    color: #1E1B4B !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
    transition: color 0.2s ease !important;
}

.typo-item-row:hover .typo-item-title {
    color: #007A4D !important;
}

.typo-item-desc {
    font-size: 12.5px !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.typo-arrow-link {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #CBD5E1 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    margin-top: 2px !important;
}

.typo-item-row:hover .typo-arrow-link {
    color: #007A4D !important;
    transform: translateX(3px) !important;
}

/* 4.3 Latest Articles Section (MỚI NHẤT - 3 COLUMNS MAGAZINE) */
.sante-med-latest-section {
    padding: 40px 0 56px 0 !important;
    background: #FAFCFB !important;
}

.latest-section-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.latest-cat-subnav {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

.subnav-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #64748B !important;
    text-decoration: none !important;
    padding-bottom: 6px !important;
    border-bottom: 2.5px solid transparent !important;
    transition: all 0.2s ease !important;
}

.subnav-link:hover {
    color: #00CE7C !important;
}

.subnav-link.active {
    color: #00CE7C !important;
    border-bottom-color: #00CE7C !important;
}

/* 3 COLUMNS MAGAZINE GRID */
.latest-articles-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.latest-art-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 18px rgba(33, 18, 97, 0.03) !important;
    transition: all 0.28s ease !important;
}

.latest-art-card:hover {
    border-color: #00CE7C !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(33, 18, 97, 0.09) !important;
}

.art-card-cover {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1000 / 600 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
    display: block !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid rgba(33, 18, 97, 0.06) !important;
}

.art-card-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.latest-art-card:hover .art-card-cover img {
    transform: scale(1.06) !important;
}

.art-card-body {
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
    gap: 14px !important;
}

.art-card-body .card-badge {
    margin-bottom: 10px !important;
    align-self: flex-start !important;
}

.art-card-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
}

.art-card-title a {
    color: #211261 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.art-card-title a:hover {
    color: #00CE7C !important;
}

.art-card-excerpt {
    font-size: 13.5px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.art-card-excerpt:empty {
    display: none !important;
}

.art-card-meta,
.mini-card-meta,
.lead-card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
    color: #94A3B8 !important;
}
.art-card-meta .meta-item,
.mini-card-meta .meta-item,
.lead-card-meta .meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 600 !important;
}
.art-card-meta .meta-item i,
.mini-card-meta .meta-item i,
.lead-card-meta .meta-item i {
    font-size: 11px !important;
}
.art-card-meta .meta-dot,
.mini-card-meta .meta-dot,
.lead-card-meta .meta-dot {
    font-size: 6px !important;
    color: #CBD5E1 !important;
    line-height: 1 !important;
}

/* Robust Pagination UI */
.sante-pagination-wrapper {
    margin-top: 40px !important;
    display: flex !important;
    justify-content: center !important;
}

.sante-pagination-wrapper ul.page-numbers {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.sante-pagination-wrapper .page-numbers li a,
.sante-pagination-wrapper .page-numbers li button,
.sante-pagination-wrapper .page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(33, 18, 97, 0.12) !important;
    color: #211261 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: 'Lexend', sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.sante-pagination-wrapper .page-numbers li span.current {
    background: #211261 !important;
    color: #FFFFFF !important;
    border-color: #211261 !important;
    box-shadow: 0 4px 14px rgba(33, 18, 97, 0.2) !important;
}

.sante-pagination-wrapper .page-numbers li a:hover,
.sante-pagination-wrapper .page-numbers li button:hover {
    background: #00CE7C !important;
    color: #FFFFFF !important;
    border-color: #00CE7C !important;
}

.sante-pagination-wrapper .page-numbers li span.dots {
    border: none !important;
    background: transparent !important;
    color: #64748B !important;
    min-width: 28px !important;
    padding: 0 !important;
}

.med-no-results {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1.5px dashed rgba(33, 18, 97, 0.12) !important;
    padding: 40px 20px !important;
}

.no-res-icon {
    font-size: 36px !important;
    margin-bottom: 8px !important;
}

.no-res-title {
    color: #211261 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
}

.no-res-desc {
    color: #64748B !important;
    font-size: 13.5px !important;
    margin-bottom: 16px !important;
}

.btn-back-all {
    display: inline-block !important;
    background: #211261 !important;
    color: #FFFFFF !important;
    padding: 10px 24px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.btn-back-all:hover {
    background: #00CE7C !important;
}

/* ========================================================
   4.4 & 4.7 MASTERCLASS Y KHOA — CHÂN DUNG & CHÂM NGÔN TƯƠNG TÁC
   (OPEN CANVAS • NO HEAVY BOXES • QUIET LUXURY EDITORIAL)
   ======================================================== */
.sante-masterclass-section {
    padding: 40px 0 60px 0 !important;
    background: #FAFCFB !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.masterclass-wrapper {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Header */
.masterclass-header {
    margin-bottom: 32px !important;
}

.mc-kicker-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.mc-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2) !important;
}

.mc-kicker {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #0D9488 !important;
    text-transform: uppercase !important;
}

.mc-title {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(22px, 2.2vw, 26px) !important;
    font-weight: 700 !important;
    color: #1E1B4B !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
    text-wrap: balance !important;
}

.mc-subtitle {
    font-size: 14.5px !important;
    color: #64748B !important;
    margin: 0 !important;
    max-width: 720px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

/* Main Gallery Stage (Open 2-Column) */
.masterclass-stage {
    display: grid !important;
    grid-template-columns: 1.65fr 1fr !important;
    gap: 32px !important;
    align-items: stretch !important;
    margin-bottom: 32px !important;
}

/* Left Hero Showcase (Open Clean Layout - No Boxy Trap) */
.mc-hero-showcase {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 28px 30px 28px 24px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    display: flex !important;
    gap: 32px !important;
    align-items: center !important;
    position: relative !important;
}

.mc-portrait-holder {
    flex: 0 0 160px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.mc-portrait-img {
    width: 160px !important;
    height: 213px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    position: relative !important;
    z-index: 2 !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    background: #FFFFFF !important;
}

.mc-exp-badge {
    margin-top: 10px !important;
    background: #F0FDF4 !important;
    border: 1px solid rgba(13, 148, 136, 0.25) !important;
    color: #0D9488 !important;
    padding: 4px 14px !important;
    border-radius: 99px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 2 !important;
    white-space: nowrap !important;
}

.mc-quote-column {
    flex: 1 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.mc-philosophy-quote {
    font-size: clamp(15px, 1.25vw, 17px) !important;
    font-weight: 400 !important;
    color: #1E293B !important;
    line-height: 1.65 !important;
    font-style: italic !important;
    margin: 0 0 18px 0 !important;
    border: none !important;
    padding: 0 !important;
    transition: opacity 0.25s ease !important;
    text-wrap: pretty !important;
}

.mc-doctor-signature {
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding-top: 12px !important;
}

.mc-sig-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 3px !important;
    flex-wrap: wrap !important;
}

.mc-doc-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    margin: 0 !important;
    transition: opacity 0.25s ease !important;
}

.mc-sig-spec-pill {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #0D9488 !important;
    background: rgba(13, 148, 136, 0.08) !important;
    padding: 2px 10px !important;
    border-radius: 99px !important;
    transition: opacity 0.25s ease !important;
}

.mc-doc-position {
    font-size: 12px !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    transition: opacity 0.25s ease !important;
    white-space: normal !important;
}

/* Right Doctor Selector Rail */
.mc-selector-rail {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    justify-content: center !important;
}

.mc-rail-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

.mc-doctor-item {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) !important;
}

.mc-doctor-item:hover {
    border-color: rgba(13, 148, 136, 0.4) !important;
    transform: translateX(4px) !important;
}

.mc-doctor-item.active {
    background: #F0FDF4 !important;
    border-color: #0D9488 !important;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.12) !important;
}

.mc-item-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid rgba(13, 148, 136, 0.2) !important;
    background: #F8FAFC !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

.mc-doctor-item.active .mc-item-avatar {
    border-color: #0D9488 !important;
}

.mc-item-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: #FFFFFF !important;
}

.mc-item-meta {
    flex: 1 !important;
}

.mc-item-name {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #1E1B4B !important;
    margin: 0 0 2px 0 !important;
}

.mc-item-spec {
    font-size: 11.5px !important;
    color: #64748B !important;
    display: block !important;
}

.mc-item-arrow {
    color: #94A3B8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.mc-doctor-item.active .mc-item-arrow {
    color: #0D9488 !important;
    transform: translateX(2px) !important;
}

/* Bottom Floating Search / Question Capsule Bar */
.masterclass-action-bar {
    max-width: 820px !important;
    margin: 0 auto !important;
}

.mc-capsule-search {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(13, 148, 136, 0.3) !important;
    border-radius: 99px !important;
    padding: 6px 8px 6px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 6px 24px rgba(13, 148, 136, 0.08) !important;
    transition: all 0.25s ease !important;
}

.mc-capsule-search:focus-within {
    border-color: #0D9488 !important;
    box-shadow: 0 8px 30px rgba(13, 148, 136, 0.18) !important;
}

.mc-search-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0D9488 !important;
    white-space: nowrap !important;
}

.mc-capsule-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    outline: none !important;
    padding: 6px 0 !important;
}

.mc-capsule-submit {
    background: #0D9488 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 99px !important;
    padding: 12px 24px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    min-height: 48px !important;
    transition: all 0.2s ease !important;
}

.mc-capsule-submit:hover {
    background: #0F766E !important;
    transform: translateY(-1px) !important;
}

/* Responsive MasterClass */
@media (max-width: 991px) {
    .masterclass-stage {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .mc-hero-showcase {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 20px !important;
    }
    .mc-doctor-signature {
        text-align: center !important;
    }
}

@media (max-width: 600px) {
    .mc-capsule-search {
        flex-direction: column !important;
        border-radius: 18px !important;
        padding: 14px !important;
        gap: 10px !important;
    }
    .mc-capsule-submit {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* 4.5 Responsive Breakpoints (Medical Magazine Mobile Excellence) */
@media (max-width: 1199px) {
    .latest-articles-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 22px !important;
    }
    .sante-typo-showcase-box {
        grid-template-columns: 340px 1fr !important;
        gap: 28px !important;
        padding: 20px 24px !important;
    }
    .typo-lead-visual-card {
        width: 340px !important;
        max-width: 340px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 991px) {
    .med-hero-wrapper {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .med-hero-left {
        padding-right: 0 !important;
        text-align: center !important;
        align-items: center !important;
    }
    .med-hero-badge-wrap,
    .med-tagline-box,
    .med-hero-trust-chips {
        justify-content: center !important;
    }
    .med-hero-desc {
        text-align: center !important;
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .med-hero-right {
        max-width: 100% !important;
        width: 100% !important;
        justify-content: center !important;
    }
    .sante-typo-showcase-box {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 20px !important;
    }
    .typo-lead-visual-card {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 1px solid #F1F5F9 !important;
        padding-bottom: 20px !important;
    }
    .latest-articles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .masterclass-stage {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .mc-hero-showcase {
        padding: 24px 20px !important;
    }
}

@media (max-width: 767px) {
    .sante-med-hero-editorial {
        padding: 24px 0 20px 0 !important;
    }
    .med-hero-badge-wrap {
        margin-bottom: 10px !important;
    }
    .med-eyebrow {
        font-size: 11.5px !important;
        padding: 5px 14px !important;
        letter-spacing: 0.04em !important;
    }
    .med-main-title {
        font-size: 26px !important;
        text-align: center !important;
        line-height: 1.15 !important;
        margin: 0 0 10px 0 !important;
    }
    .med-tagline-box {
        margin-bottom: 10px !important;
    }
    .med-tagline {
        font-size: 14.5px !important;
        text-align: center !important;
    }
    .med-hero-desc {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin: 0 0 16px 0 !important;
        color: #334155 !important;
    }
    .med-hero-trust-chips {
        gap: 8px !important;
    }
    .trust-chip {
        font-size: 11.5px !important;
        padding: 6px 12px !important;
        min-height: 32px !important;
    }
    .med-hospital-showcase {
        border-radius: 18px !important;
        border-width: 3px !important;
        box-shadow: 0 12px 32px rgba(33, 18, 97, 0.1) !important;
    }
    .building-badge {
        font-size: 11.5px !important;
        padding: 6px 14px !important;
    }

    /* Horizontal swipeable category pills */
    .med-cat-pills-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 6px 4px 10px 4px !important;
        gap: 8px !important;
        margin: 0 -15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .med-cat-pills-bar::-webkit-scrollbar {
        display: none !important;
    }
    .med-pill-item {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    .med-pill-item.pill-view-all {
        margin-left: 0 !important;
        padding: 10px 12px !important;
    }

    /* Section 2: Featured Typography Bento */
    .sante-med-featured-section {
        padding: 20px 0 16px 0 !important;
    }
    .sante-typo-showcase-box {
        padding: 16px 14px !important;
        border-radius: 18px !important;
        box-shadow: 0 2px 14px rgba(33, 18, 97, 0.04) !important;
    }
    .typo-lead-cover-link {
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    .typo-lead-title {
        font-size: 16px !important;
        line-height: 1.35 !important;
        margin: 0 0 6px 0 !important;
    }
    .typo-lead-desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 0 0 12px 0 !important;
        color: #475569 !important;
    }
    .typo-lead-btn {
        min-height: 48px !important;
        padding: 12px 18px !important;
        background: #E8F7F0 !important;
        border-radius: 10px !important;
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
    }
    .typo-list-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding-bottom: 10px !important;
    }
    .typo-list-title {
        font-size: 12px !important;
    }
    .typo-list-sub {
        font-size: 10.5px !important;
    }
    .typo-list-items {
        gap: 10px !important;
    }
    .typo-item-row {
        padding: 12px 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        background: #F8FAFC !important;
        border: 1px solid #EEF2F6 !important;
        box-shadow: 0 2px 8px rgba(33, 18, 97, 0.02) !important;
    }
    .typo-num-pill {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
        margin-top: 1px !important;
    }
    .typo-item-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }
    .typo-item-meta .meta-date-views {
        font-size: 11px !important;
        color: #64748B !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    .typo-item-title {
        font-size: 14.5px !important;
        line-height: 1.4 !important;
        margin: 0 0 4px 0 !important;
        color: #1E1B4B !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }
    .typo-item-desc {
        font-size: 12px !important;
        color: #64748B !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .typo-arrow-link {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        margin-top: 2px !important;
    }

    /* Section 3: Latest Articles */
    .sante-med-latest-section {
        padding: 24px 0 32px 0 !important;
    }
    .latest-section-top {
        margin-bottom: 16px !important;
    }
    .latest-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .latest-art-card {
        border-radius: 16px !important;
    }
    .art-card-body {
        padding: 16px 14px !important;
        gap: 10px !important;
    }
    .art-card-title {
        font-size: 15.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }
    .art-card-excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #475569 !important;
    }
    .art-card-meta {
        font-size: 11.5px !important;
        color: #64748B !important;
    }

    /* Section 4: Masterclass Section */
    .sante-masterclass-section {
        padding: 28px 0 36px 0 !important;
    }
    .masterclass-header {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    .mc-kicker-wrap {
        justify-content: center !important;
    }
    .mc-title {
        text-align: center !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    .mc-subtitle {
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 0 auto !important;
        color: #475569 !important;
    }
    .mc-hero-showcase {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 16px !important;
        border-radius: 18px !important;
        gap: 16px !important;
    }
    .mc-portrait-holder {
        flex: 0 0 auto !important;
        width: 120px !important;
        margin: 0 auto !important;
    }
    .mc-portrait-img {
        width: 120px !important;
        height: 155px !important;
        border-radius: 12px !important;
    }
    .mc-exp-badge {
        font-size: 11px !important;
        padding: 3px 10px !important;
        margin-top: 8px !important;
    }
    .mc-philosophy-quote {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        color: #1E293B !important;
    }
    .mc-doctor-signature {
        text-align: center !important;
        padding-top: 10px !important;
    }
    .mc-sig-header {
        justify-content: center !important;
        gap: 6px !important;
    }
    .mc-doc-name {
        font-size: 15px !important;
    }
    .mc-sig-spec-pill {
        font-size: 10.5px !important;
        padding: 2px 8px !important;
    }
    .mc-doc-position {
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        color: #475569 !important;
    }
    .mc-selector-rail {
        gap: 8px !important;
    }
    .mc-rail-label {
        font-size: 10.5px !important;
        text-align: center !important;
    }
    .mc-doctor-item {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        min-height: 48px !important;
        gap: 10px !important;
    }
    .mc-item-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }
    .mc-item-name {
        font-size: 13px !important;
    }
    .mc-item-spec {
        font-size: 11px !important;
    }
    .masterclass-action-bar {
        margin-top: 16px !important;
    }
    .mc-capsule-search {
        flex-direction: column !important;
        border-radius: 16px !important;
        padding: 12px !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .mc-search-label {
        font-size: 12px !important;
    }
    .mc-capsule-input {
        width: 100% !important;
        text-align: left !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }
    .mc-capsule-submit {
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
        font-size: 13.5px !important;
    }

    /* Pagination Mobile */
    .sante-pagination-wrapper {
        margin-top: 24px !important;
    }
    .sante-pagination-wrapper .page-numbers li a,
    .sante-pagination-wrapper .page-numbers li span {
        min-width: 44px !important;
        height: 44px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Breadcrumb & Global Mobile Polish */
    .breadcrumb-wrapper {
        padding: 12px 0 8px 0 !important;
    }
    .breadcrumb {
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .btn-back-all {
        min-height: 44px !important;
        padding: 12px 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* News Page (Tin Tức) Mobile Optimization */
    .sante-journal-masthead {
        padding: 24px 0 20px 0 !important;
    }
    .journal-header-block {
        margin-bottom: 18px !important;
    }
    .journal-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    .journal-desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .journal-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
        padding-bottom: 14px !important;
    }
    .filter-pills-bar {
        width: 100% !important;
        overflow-x: auto !important;
        padding: 4px 0 8px 0 !important;
        gap: 8px !important;
    }
    .filter-pill {
        padding: 8px 14px !important;
        font-size: 12.5px !important;
        min-height: 44px !important;
    }
    .search-box-bar {
        width: 100% !important;
    }
    .search-box-bar input {
        width: 100% !important;
        font-size: 13.5px !important;
        min-height: 44px !important;
    }
    .search-box-bar input:focus {
        width: 100% !important;
    }
    .journal-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .journal-card {
        border-radius: 16px !important;
    }
    .journal-card .art-card-body {
        padding: 16px 14px !important;
        gap: 10px !important;
    }
    .journal-card .art-card-title {
        font-size: 15.5px !important;
        margin-bottom: 6px !important;
    }
    .journal-card .art-card-excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 2 !important;
    }
    .journal-card .art-card-meta {
        font-size: 11.5px !important;
        padding-top: 10px !important;
    }
    .sante-consult-strip {
        padding: 0 0 36px 0 !important;
    }
    .consult-strip-inner {
        padding: 24px 18px !important;
        border-radius: 18px !important;
        gap: 16px !important;
        text-align: center !important;
        align-items: center !important;
    }
    .strip-pill {
        font-size: 10px !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
    }
    .strip-title {
        font-size: 17.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }
    .strip-desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .strip-right {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .strip-hotline-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
        font-size: 13.5px !important;
        padding: 10px 18px !important;
    }
    .strip-btn-booking {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
        font-size: 13px !important;
        padding: 11px 20px !important;
    }
}

@media (max-width: 480px) {
    .journal-title {
        font-size: 20px !important;
    }
    .journal-brand-badge {
        font-size: 10px !important;
        padding: 3px 10px !important;
    }
    .med-main-title {
        font-size: 22px !important;
    }
    .med-tagline {
        font-size: 13.5px !important;
    }
    .med-hero-desc {
        font-size: 13px !important;
    }
    .trust-chip {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
    .med-pill-item {
        font-size: 12.5px !important;
        padding: 9px 14px !important;
    }
    .typo-lead-title {
        font-size: 15px !important;
    }
    .art-card-title {
        font-size: 14.5px !important;
    }
    .mc-title {
        font-size: 18px !important;
    }
    .mc-philosophy-quote {
        font-size: 13.5px !important;
    }
}

/* 4.3 Clinical Articles 3-Column Grid */
.sante-med-feed-section {
    padding: 20px 0 40px 0 !important;
    background: #FAFCFB !important;
}

.med-articles-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

.med-clinical-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 3px 14px rgba(33, 18, 97, 0.03) !important;
}

.med-clinical-card:hover {
    transform: translateY(-4px) !important;
    border-color: #00CE7C !important;
    box-shadow: 0 16px 32px rgba(33, 18, 97, 0.09) !important;
}

.card-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1000 / 600 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid rgba(33, 18, 97, 0.06) !important;
}

.card-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.med-clinical-card:hover .card-cover img {
    transform: scale(1.06) !important;
}

.card-cat-pill {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    backdrop-filter: blur(6px) !important;
}

.card-cat-pill.tag-emerald { background: rgba(0, 206, 124, 0.95) !important; color: #FFFFFF !important; }
.card-cat-pill.tag-rose { background: rgba(225, 29, 72, 0.95) !important; color: #FFFFFF !important; }
.card-cat-pill.tag-purple { background: rgba(124, 58, 237, 0.95) !important; color: #FFFFFF !important; }
.card-cat-pill.tag-amber { background: rgba(217, 119, 6, 0.95) !important; color: #FFFFFF !important; }
.card-cat-pill.tag-navy { background: rgba(33, 18, 97, 0.95) !important; color: #FFFFFF !important; }

.card-content-body {
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 !important;
}

.card-meta-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    color: #94A3B8 !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

.doc-verify {
    color: #00875A !important;
    font-weight: 700 !important;
}

.card-title {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    text-transform: none !important;
}

.card-title a {
    color: #211261 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.card-title a:hover {
    color: #00CE7C !important;
}

.card-summary {
    font-size: 13px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 0 0 16px 0 !important;
}

.card-footer-action {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 14px !important;
    border-top: 1px solid #F1F5F9 !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.reviewer-badge {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.rev-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #211261 !important;
    color: #00CE7C !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rev-text {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

.read-detail-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #211261 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.read-detail-link:hover {
    color: #00CE7C !important;
    transform: translateX(2px) !important;
}

@media (max-width: 991px) {
    .med-articles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .med-articles-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 4.4 Robust Pagination UI */
.sante-pagination-wrapper {
    margin-top: 40px !important;
    display: flex !important;
    justify-content: center !important;
}

.sante-pagination-wrapper ul.page-numbers {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.sante-pagination-wrapper .page-numbers li a,
.sante-pagination-wrapper .page-numbers li button,
.sante-pagination-wrapper .page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(33, 18, 97, 0.12) !important;
    color: #211261 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: 'Lexend', sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.sante-pagination-wrapper .page-numbers li span.current {
    background: #211261 !important;
    color: #FFFFFF !important;
    border-color: #211261 !important;
    box-shadow: 0 4px 14px rgba(33, 18, 97, 0.2) !important;
}

.sante-pagination-wrapper .page-numbers li a:hover,
.sante-pagination-wrapper .page-numbers li button:hover {
    background: #00CE7C !important;
    color: #FFFFFF !important;
    border-color: #00CE7C !important;
}

.sante-pagination-wrapper .page-numbers li span.dots {
    border: none !important;
    background: transparent !important;
    color: #64748B !important;
    min-width: 28px !important;
    padding: 0 !important;
}

.med-no-results {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1.5px dashed rgba(33, 18, 97, 0.12) !important;
    padding: 40px 20px !important;
}

.no-res-icon {
    font-size: 36px !important;
    margin-bottom: 8px !important;
}

.no-res-title {
    color: #211261 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
}

.no-res-desc {
    color: #64748B !important;
    font-size: 13.5px !important;
    margin-bottom: 16px !important;
}

.btn-back-all {
    display: inline-block !important;
    background: #211261 !important;
    color: #FFFFFF !important;
    padding: 10px 24px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.btn-back-all:hover {
    background: #00CE7C !important;
}

/* 4.5 Medical Council Section */
.sante-med-council-section {
    padding: 36px 0 !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
    border-top: 1px solid rgba(33, 18, 97, 0.06) !important;
    border-bottom: 1px solid rgba(33, 18, 97, 0.06) !important;
}

.council-header {
    max-width: 760px !important;
    margin: 0 auto 28px auto !important;
}

.council-desc {
    font-size: 13.5px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin-top: 6px !important;
}

.council-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.doc-card {
    position: relative !important;
    background: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    padding: 24px 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(33, 18, 97, 0.03) !important;
    transition: all 0.25s ease !important;
}

.doc-card:hover {
    border-color: #00CE7C !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(33, 18, 97, 0.08) !important;
}

.doc-card-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #DFBA73 !important;
    background: rgba(33, 18, 97, 0.9) !important;
    padding: 2px 8px !important;
    border-radius: 99px !important;
}

.doc-avatar-wrap {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 14px auto !important;
    border: 3px solid #00CE7C !important;
}

.doc-avatar-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.doc-fullname {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 0 4px 0 !important;
}

.doc-dept {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #00875A !important;
    margin-bottom: 6px !important;
}

.doc-exp {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
}

.doc-trust-point {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #F1F5F9 !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #211261 !important;
}

@media (max-width: 991px) {
    .council-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 4.6 Clinical FAQ Accordion */
.sante-med-faq-section {
    padding: 36px 0 !important;
    background: #FAFCFB !important;
}

.faq-container-box {
    max-width: 840px !important;
    margin: 0 auto !important;
}

.faq-head {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.faq-item {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(33, 18, 97, 0.02) !important;
    transition: border-color 0.2s ease !important;
}

.faq-item.active {
    border-color: #00CE7C !important;
}

.faq-question {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 16px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #211261 !important;
    cursor: pointer !important;
}

.faq-icon {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #00CE7C !important;
    margin-left: 10px !important;
}

.faq-answer {
    padding: 0 20px 16px 20px !important;
    display: none;
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

.faq-answer p {
    margin: 0 !important;
}

/* ========================================================
   MINIMALIST CLINICAL SIDEBAR
   ======================================================== */
.sante-minimal-sidebar {
    position: sticky !important;
    top: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.sidebar-luxury-card {
    background: linear-gradient(135deg, #211261 0%, #150B42 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(33, 18, 97, 0.12) !important;
}

.card-badge {
    display: inline-block !important;
    background: rgba(0, 206, 124, 0.15) !important;
    border: 1px solid #00CE7C !important;
    color: #00CE7C !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 99px !important;
    margin-bottom: 10px !important;
}

.card-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 6px 0 !important;
}

.card-desc {
    font-size: 12.5px !important;
    color: #CBD5E1 !important;
    line-height: 1.45 !important;
    margin: 0 0 16px 0 !important;
}

.hotline-box {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}

.hotline-lbl {
    font-size: 12px !important;
    color: #94A3B8 !important;
}

.hotline-val {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #00CE7C !important;
    text-decoration: none !important;
}

.btn-luxury-booking {
    display: block !important;
    text-align: center !important;
    background: #00CE7C !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 10px 14px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.btn-luxury-booking:hover {
    background: #00B56D !important;
    transform: translateY(-2px) !important;
}

.sidebar-white-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    border-radius: 16px !important;
    padding: 22px !important;
    box-shadow: 0 2px 12px rgba(33, 18, 97, 0.03) !important;
}

.card-header-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    border-bottom: 2px solid #00CE7C !important;
    padding-bottom: 8px !important;
}

.bar-pill {
    background: #211261 !important;
    color: #FFFFFF !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.bar-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 !important;
}

.topics-tag-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.topic-tag {
    display: inline-block !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.topic-tag:hover {
    background: #211261 !important;
    color: #FFFFFF !important;
    border-color: #211261 !important;
}

.newsletter-heading {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 0 4px 0 !important;
}

.newsletter-sub {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

.newsletter-form {
    display: flex !important;
    gap: 6px !important;
}

.newsletter-input {
    flex: 1 !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(33, 18, 97, 0.1) !important;
    border-radius: 99px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    outline: none !important;
}

.newsletter-btn {
    background: #211261 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 7px 14px !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.newsletter-btn:hover {
    background: #00CE7C !important;
}

    font-weight: 500 !important;
}

.horizon-read-link {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.horizon-read-link:hover {
    color: #00CE7C !important;
    transform: translateX(4px) !important;
}

@media (max-width: 768px) {
    .horizon-news-item {
        grid-template-columns: 1fr !important;
    }
    .horizon-thumb-box {
        width: 100% !important;
        height: 180px !important;
    }
    .sante-news-filter-search input,
    .sante-news-filter-search input:focus {
        width: 100% !important;
    }
}

/* Empty State */
.sante-empty-result-box {
    background: #FFFFFF !important;
    border-radius: 18px !important;
    border: 1.5px dashed rgba(33, 18, 97, 0.15) !important;
    padding: 48px 24px !important;
    text-align: center !important;
    margin: 20px 0 !important;
}

.empty-icon-bubble {
    width: 64px !important;
    height: 64px !important;
    background: #F1F5F9 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.empty-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 0 6px 0 !important;
}

.empty-desc {
    font-size: 13.5px !important;
    color: #64748B !important;
    max-width: 480px !important;
    margin: 0 auto 20px auto !important;
}

.empty-reset-btn {
    background: #211261 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.empty-reset-btn:hover {
    background: #00CE7C !important;
}

/* Pager */
.sante-clean-pager {
    margin-top: 32px !important;
    display: flex !important;
    justify-content: center !important;
}

.pagination-list {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pagination-list .page-item .page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.1) !important;
    color: #211261 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.pagination-list .page-item.active .page-link {
    background: #211261 !important;
    color: #FFFFFF !important;
    border-color: #211261 !important;
    box-shadow: 0 4px 12px rgba(33, 18, 97, 0.15) !important;
}

.pagination-list .page-item:hover:not(.active) .page-link {
    background: #00CE7C !important;
    color: #FFFFFF !important;
    border-color: #00CE7C !important;
}

/* ========================================================
   CREATIVE MEDICAL CRO SIDEBAR WIDGETS
   ======================================================== */
.sante-creative-sidebar {
    position: sticky !important;
    top: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.sidebar-widget {
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.03) !important;
}

/* 1. Podcast Player */
.podcast-player-widget {
    background: linear-gradient(135deg, #1A0E4E 0%, #0D0728 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(223, 186, 115, 0.3) !important;
}

.podcast-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.podcast-badge-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.live-dot {
    width: 8px !important;
    height: 8px !important;
    background: #00CE7C !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #00CE7C !important;
    animation: pulseDot 1.5s infinite !important;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.podcast-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #00CE7C !important;
}

.podcast-frequency {
    font-size: 11px !important;
    color: #94A3B8 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.podcast-title {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.35 !important;
}

.podcast-author {
    font-size: 11.5px !important;
    color: #CBD5E1 !important;
    margin: 0 0 16px 0 !important;
}

.mini-audio-controller {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.podcast-play-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #00CE7C !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 14px rgba(0, 206, 124, 0.35) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.podcast-play-btn:hover {
    transform: scale(1.05) !important;
    background: #00E58A !important;
}

.podcast-progress-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.audio-waveform-bars {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    height: 18px !important;
}

.wave-bar {
    flex: 1 !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 2px !important;
    transition: height 0.2s ease, background 0.2s ease !important;
}

.wave-bar.is-animating {
    background: #00CE7C !important;
    animation: waveJump 1s ease-in-out infinite alternate !important;
}

.wave-bar:nth-child(2n).is-animating { animation-delay: 0.15s !important; }
.wave-bar:nth-child(3n).is-animating { animation-delay: 0.3s !important; }
.wave-bar:nth-child(4n).is-animating { animation-delay: 0.45s !important; }

@keyframes waveJump {
    0% { height: 4px; }
    100% { height: 18px; }
}

.audio-timer-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 10.5px !important;
    color: #94A3B8 !important;
    font-family: monospace !important;
}

/* 2. E-Book Widget */
.ebook-download-widget {
    background: #FAFCFB !important;
    border: 1px solid rgba(0, 206, 124, 0.25) !important;
}

.ebook-tag {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #00A664 !important;
    background: rgba(0, 206, 124, 0.12) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

.ebook-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 0 6px 0 !important;
}

.ebook-desc {
    font-size: 12.5px !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin: 0 0 14px 0 !important;
}

.ebook-book-visual {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.ebook-cover {
    width: 140px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #211261 0%, #150B3D 100%) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 8px 20px rgba(33, 18, 97, 0.2) !important;
    border: 1px solid rgba(223, 186, 115, 0.4) !important;
}

.cover-logo-mini {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    color: #DFBA73 !important;
    letter-spacing: 0.05em !important;
}

.cover-title-mini {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
}

.cover-badge-mini {
    font-size: 7.5px !important;
    font-weight: 800 !important;
    color: #00CE7C !important;
    text-align: right !important;
}

.ebook-download-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #00CE7C !important;
    color: #FFFFFF !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 9px 14px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.ebook-download-btn:hover {
    background: #00B56D !important;
    transform: translateY(-2px) !important;
}

/* 3. Booking Consult Widget */
.booking-consult-widget {
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.1) !important;
}

.consult-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    background: rgba(33, 18, 97, 0.06) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

.consult-heading {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 0 6px 0 !important;
}

.consult-sub {
    font-size: 12.5px !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin: 0 0 14px 0 !important;
}

.consult-hotline-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(33, 18, 97, 0.08) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
}

.hotline-icon-circle {
    width: 32px !important;
    height: 32px !important;
    background: rgba(0, 206, 124, 0.12) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hotline-digits {
    display: flex !important;
    flex-direction: column !important;
}

.digits-label {
    font-size: 10.5px !important;
    color: #94A3B8 !important;
}

.digits-number {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    text-decoration: none !important;
}

.consult-cta-btn {
    display: block !important;
    text-align: center !important;
    background: #211261 !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 9px 14px !important;
    border-radius: 99px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.consult-cta-btn:hover {
    background: #00CE7C !important;
    transform: translateY(-2px) !important;
}

/* 4. Newsletter Widget */
.newsletter-widget {
    background: #F8FAFC !important;
    border: 1px solid rgba(33, 18, 97, 0.06) !important;
}

.nl-box-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 0 4px 0 !important;
}

.nl-box-desc {
    font-size: 12px !important;
    color: #64748B !important;
    margin: 0 0 12px 0 !important;
}

.nl-input-group {
    display: flex !important;
    gap: 6px !important;
}

.nl-text-input {
    flex: 1 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 18, 97, 0.12) !important;
    border-radius: 99px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    outline: none !important;
    color: #1E293B !important;
}

.nl-text-input:focus {
    border-color: #00CE7C !important;
}

.nl-submit-btn {
    background: #211261 !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.nl-submit-btn:hover {
    background: #00CE7C !important;
}

@media (max-width: 991px) {
    .sante-creative-sidebar {
        position: static !important;
        margin-top: 36px !important;
    }
}
.detail-article {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.detail-heading h1 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #211261 !important;
    line-height: 1.35;
    margin-bottom: 16px;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
}

.detail-tag span {
    background: #EEF5F7;
    color: #211261;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    text-transform: uppercase;
}

.detail-date {
    font-size: 13px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #334155;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px auto;
    display: block;
}

/* Latest News / Related Box in Single Post */
.latest-news-wrap {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.latest-news-wrap .heading-5 {
    color: #211261 !important;
    font-size: 16px;
    font-weight: 800;
    border-bottom: 1.5px solid #F1F5F9;
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.news-latest-item {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F8FAFC;
}

.news-latest-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.news-latest-item .img figure {
    width: 90px;
    height: 65px;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.news-latest-item .img figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-latest-item .caption .title a {
    color: #1E293B;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.news-latest-item .caption .title a:hover {
    color: #211261;
}

.news-latest-item .caption .date {
    font-size: 11.5px;
    color: #94A3B8;
}

/* 10. CONTACT, CAREERS & PROMOTION SUBPAGE STYLES - Modern Luxury */
.contact-section {
    background: #F8FAFC !important;
    padding: 60px 0 !important;
}

.contact-info {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 24px !important;
    padding: 32px 28px !important;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.04) !important;
}

.contact-info .item {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    align-items: flex-start !important;
}

.contact-info .item .icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #EAFBF3 !important;
    color: #00A862 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.contact-info .item .content .title {
    font-size: 15px !important;
    color: #1E293B !important;
    line-height: 1.5 !important;
}

.contact-form {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 24px !important;
    padding: 36px 32px !important;
    box-shadow: 0 8px 30px rgba(33, 18, 97, 0.06) !important;
}

.contact-form .form-group {
    margin-bottom: 16px !important;
}

.contact-form input[type="text"],
.contact-form textarea {
    width: 100% !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    background: #F8FAFC !important;
    color: #1E293B !important;
    outline: none !important;
    transition: all 0.25s ease !important;
}

.contact-form input[type="text"]:focus,
.contact-form textarea:focus {
    border-color: #00CE7C !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(0, 206, 124, 0.12) !important;
}

.contact-form .frm-btn-submit,
.contact-form .btn-submit {
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 36px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(0, 206, 124, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.contact-form .frm-btn-submit:hover,
.contact-form .btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(0, 206, 124, 0.45) !important;
}

/* ========================================================
   11. ABOUT PAGE (GIỚI THIỆU) DEEP RETROFIT & ENHANCEMENT
   ======================================================== */

/* ========================================================
   PREMIUM QUIET LUXURY BREADCRUMB (INTEGRATED & CLEAN CONTEXT)
   Hide top orphan floating pill bar & breadcrumbs on all pages (only keep on single posts).
   ======================================================== */
.breadcrumb-wrapper,
.sante-hub-breadcrumb-wrap,
.doc-breadcrumb,
body.page .breadcrumb-wrapper,
body.page .sante-hub-breadcrumb-wrap,
body.page .doc-breadcrumb,
body.page #breadcrumbs,
body.page .breadcrumbs,
body.page .woocommerce-breadcrumb,
body.page .nav-breadcrumbs {
    display: none !important;
}


/* ========================================================
   MASTER SANTE ABOUT PAGE - ULTRA LUXURY HEALTHCARE EDITION
   ======================================================== */

.section-tag-gold {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #DFBA73 !important;
    background: rgba(223, 186, 115, 0.12) !important;
    border: 1px solid rgba(223, 186, 115, 0.4) !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
}

.section-heading-centered {
    text-align: center !important;
    margin-bottom: 48px !important;
}

.section-main-title {
    font-size: clamp(28px, 3.5vw, 40px) !important;
    font-weight: 800 !important;
    color: #211261 !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    font-family: 'Lexend', sans-serif !important;
    letter-spacing: -0.02em !important;
}

.section-main-sub {
    font-size: 15.5px !important;
    color: #64748B !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
}

/* 1. HERO SECTION */
.about-hero-section {
    padding: 48px 0 64px 0 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.about-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center !important;
}

.hero-content-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.hero-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #EAFBF3 !important;
    border: 1px solid rgba(0, 206, 124, 0.3) !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin-bottom: 16px !important;
    width: fit-content !important;
}

.hero-badge-pill .badge-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #00CE7C !important;
    display: inline-block !important;
}

.hero-badge-pill .badge-text {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #00A862 !important;
    letter-spacing: 0.05em !important;
}

.hero-title {
    font-size: clamp(32px, 3.6vw, 44px) !important;
    font-weight: 900 !important;
    color: #211261 !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.02em !important;
    font-family: 'Lexend', sans-serif !important;
    word-break: keep-all !important;
}

.text-gradient-teal {
    color: #00A862 !important;
    background: linear-gradient(135deg, #00CE7C 0%, #008F53 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.hero-desc-lead {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
}

.hero-desc-sub {
    font-size: 14.5px !important;
    color: #64748B !important;
    line-height: 1.7 !important;
    margin-bottom: 26px !important;
}

/* 3 Thẻ Cam Kết Cốt Lõi (Thay cho khối stats cũ) */
.hero-commitments-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
}

.hcommit-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 14px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    box-shadow: 0 4px 16px rgba(33, 18, 97, 0.03) !important;
    transition: all 0.25s ease !important;
}

.hcommit-card:hover {
    border-color: #00CE7C !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(0, 206, 124, 0.12) !important;
}

.hcommit-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #EAFBF3 !important;
    color: #00A862 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.hcommit-text strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}

.hcommit-text span {
    display: block !important;
    font-size: 11.5px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
}

.hero-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.btn-sante-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 13px 26px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 206, 124, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
}

.btn-sante-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 206, 124, 0.45) !important;
    color: #FFFFFF !important;
}

.btn-sante-outline {
    display: inline-flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #211261 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 13px 22px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.btn-sante-outline:hover {
    border-color: #211261 !important;
    background: #F8FAFC !important;
    color: #211261 !important;
}

.hero-showcase-frame {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(33, 18, 97, 0.1), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    border: 4px solid #FFFFFF !important;
    background: #FFFFFF !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1430 / 1005 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.hero-showcase-frame:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 28px 65px rgba(33, 18, 97, 0.18) !important;
}

.hero-showcase-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-showcase-frame:hover .hero-showcase-img {
    transform: scale(1.02) !important;
}

.hero-overlay-card {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    background: rgba(33, 18, 97, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(223, 186, 115, 0.4) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    color: #FFFFFF !important;
}

.overlay-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(223, 186, 115, 0.2) !important;
    color: #DFBA73 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.overlay-text-box h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #DFBA73 !important;
    margin: 0 0 4px 0 !important;
}

.overlay-text-box p {
    font-size: 12.5px !important;
    color: #CBD5E1 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 2. CARE WITH HEART (5 STANDARDS BENTO) */
.about-care-section {
    padding: 75px 0 !important;
    background: #FFFFFF !important;
}

.about-care-bento-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 40px !important;
    align-items: stretch !important;
}

.care-content-card {
    background: #FAFCFB !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 8px 30px rgba(33, 18, 97, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.care-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #00A862 !important;
    background: #EAFBF3 !important;
    border: 1px solid rgba(0, 206, 124, 0.3) !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    width: fit-content !important;
}

.care-badge-pill em {
    font-size: 13px !important;
    color: #00CE7C !important;
}

.care-section-title {
    font-size: clamp(24px, 2.8vw, 32px) !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 12px !important;
}

.care-section-desc {
    font-size: 15px !important;
    color: #64748B !important;
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
}

.care-standards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.standard-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 16px 18px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1.5px solid #EEF2F6 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.standard-row:hover {
    border-color: #00CE7C !important;
    transform: translateX(6px) !important;
    box-shadow: 0 8px 24px rgba(0, 206, 124, 0.12) !important;
}

.standard-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #EAFBF3 !important;
    border: 1px solid rgba(0, 206, 124, 0.25) !important;
    color: #00A862 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.standard-row:hover .standard-icon-box {
    background: #00CE7C !important;
    color: #FFFFFF !important;
    border-color: #00CE7C !important;
    box-shadow: 0 4px 12px rgba(0, 206, 124, 0.35) !important;
    transform: scale(1.05) !important;
}

.standard-body h4 {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin: 0 0 4px 0 !important;
}

.standard-body p {
    font-size: 13.5px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.care-media-card .care-media-wrapper {
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 520px !important;
    box-shadow: 0 20px 50px rgba(33, 18, 97, 0.1) !important;
    border: 4px solid #FFFFFF !important;
}

.care-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.care-video-floating-bar {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    background: linear-gradient(135deg, #211261 0%, #150B42 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    box-shadow: 0 14px 35px rgba(15, 7, 45, 0.4) !important;
}

.video-play-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #00CE7C !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 18px rgba(0, 206, 124, 0.4) !important;
    transition: transform 0.25s ease !important;
}

.video-play-btn:hover {
    transform: scale(1.1) !important;
}

.video-tag {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #A7F3D0 !important;
    letter-spacing: 0.05em !important;
}

.video-title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.35 !important;
}

/* 3. TẦM NHÌN & SỨ MỆNH (LIGHT LUXURY CARDS - KEY STATEMENT ANCHOR) */
.about-vision-section {
    padding: 85px 0 !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #EAFBF3 50%, #F8FAFC 100%) !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.about-vision-section::before {
    content: "" !important;
    position: absolute !important;
    top: -150px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 800px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(0, 206, 124, 0.15) 0%, rgba(255,255,255,0) 70%) !important;
    pointer-events: none !important;
}

.vision-header-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #00A862 !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(0, 206, 124, 0.4) !important;
    padding: 6px 18px !important;
    border-radius: 999px !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 14px rgba(0, 206, 124, 0.12) !important;
}

.vision-header-badge-pill em {
    color: #00CE7C !important;
    font-size: 13px !important;
}

.section-main-sub {
    font-size: 15.5px !important;
    color: #64748B !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
}

.vision-mission-bento-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
    position: relative !important;
    z-index: 2 !important;
}

.light-vision-card {
    background: #FFFFFF !important;
    border: 2px solid rgba(33, 18, 97, 0.12) !important;
    border-top: 4px solid #211261 !important;
    border-radius: 24px !important;
    padding: 40px 36px !important;
    box-shadow: 0 12px 36px rgba(33, 18, 97, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.light-vision-card:hover {
    border-color: #211261 !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 55px rgba(33, 18, 97, 0.14) !important;
}

.light-mission-card {
    background: #FFFFFF !important;
    border: 2px solid rgba(0, 206, 124, 0.2) !important;
    border-top: 4px solid #00CE7C !important;
    border-radius: 24px !important;
    padding: 40px 36px !important;
    box-shadow: 0 12px 36px rgba(0, 206, 124, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.light-mission-card:hover {
    border-color: #00CE7C !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 55px rgba(0, 206, 124, 0.16) !important;
}

.bento-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
}

.bento-icon-circle {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
}

.vision-icon-light {
    background: #EEF2FF !important;
    color: #211261 !important;
    border: 1.5px solid #C7D2FE !important;
}

.mission-icon-light {
    background: #EAFBF3 !important;
    color: #00A862 !important;
    border: 1.5px solid #A7F3D0 !important;
}

.vision-badge-light {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #92400E !important;
    background: #FEF3C7 !important;
    border: 1px solid #FDE68A !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
}

.mission-badge-light {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #00A862 !important;
    background: #EAFBF3 !important;
    border: 1px solid #A7F3D0 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
}

.bento-title-light {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 12px !important;
    font-family: 'Lexend', sans-serif !important;
}

.bento-lead-desc-light {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin-bottom: 22px !important;
    flex-grow: 1 !important;
}

.bento-points-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #F8FAFC !important;
    border-radius: 16px !important;
    padding: 16px !important;
    border: 1px solid #EEF2F6 !important;
}

.bento-point-item-light {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.45 !important;
}

.light-vision-card .bento-point-item-light em {
    color: #DFBA73 !important;
    font-size: 16px !important;
}

.light-mission-card .bento-point-item-light em {
    color: #00CE7C !important;
    font-size: 16px !important;
}

/* 4. GIÁ TRỊ CỐT LÕI (3 PILLARS) */
.about-values-section {
    padding: 75px 0 !important;
    background: #FFFFFF !important;
}

.values-header-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #92400E !important;
    background: #FEF3C7 !important;
    border: 1px solid #FDE68A !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
}

.values-header-badge-pill em {
    color: #D97706 !important;
    font-size: 13px !important;
}

.values-pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.value-pillar-card {
    background: #FAFCFB !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 22px !important;
    padding: 36px 30px !important;
    box-shadow: 0 6px 20px rgba(33, 18, 97, 0.02) !important;
    transition: all 0.3s ease !important;
}

.value-pillar-card:hover {
    transform: translateY(-6px) !important;
    border-color: #00CE7C !important;
    background: #FFFFFF !important;
    box-shadow: 0 16px 36px rgba(33, 18, 97, 0.08) !important;
}

.value-pillar-card.featured-pillar {
    border-color: rgba(223, 186, 115, 0.6) !important;
    background: linear-gradient(180deg, #FFFDF8 0%, #FFFFFF 100%) !important;
}

.pillar-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
}

.pillar-num {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #CBD5E1 !important;
    line-height: 1 !important;
}

.pillar-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #EAFBF3 !important;
    color: #00A862 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.featured-pillar .pillar-icon-box {
    background: rgba(223, 186, 115, 0.2) !important;
    color: #B4882F !important;
}

.pillar-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 12px !important;
}

.pillar-desc {
    font-size: 14.5px !important;
    color: #64748B !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* 5. ĐỘI NGŨ BÁC SĨ (FACULTY GRID) */
.about-doctors-section {
    padding: 75px 0 !important;
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.doctors-faculty-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 1200px) and (min-width: 820px) {
    .doctors-faculty-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 819px) and (min-width: 641px) {
    .doctors-faculty-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 640px) {
    .doctors-faculty-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.doc-directory-swiper,
.about-doctors-swiper {
    position: relative !important;
    padding: 6px 0 16px 0 !important;
}

.about-doctors-swiper.swiper-container-initialized {
    overflow: hidden !important;
    padding: 6px 4px 16px 4px !important;
}

.about-doctors-swiper.swiper-container-initialized .doctors-faculty-grid.swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: auto !important;
}

.about-doctors-swiper.swiper-container-initialized .swiper-slide.doctor-profile-card {
    flex-shrink: 0 !important;
    height: auto !important;
}

@media (min-width: 641px) {
    .doc-directory-swiper,
    .about-doctors-swiper {
        overflow: visible !important;
    }
    .about-doctors-swiper-pagination {
        display: none !important;
    }
}

.doctor-profile-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(33, 18, 97, 0.04) !important;
    cursor: pointer !important;
    position: relative !important;
}

.doctor-profile-card.doc-card-hidden,
.doctor-profile-card[style*="display: none"],
.doctor-profile-card[style*="display:none"] {
    display: none !important;
}

.doctor-profile-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 2;
}

.doctor-profile-card:hover {
    transform: translateY(-6px) !important;
    border-color: #00CE7C !important;
    box-shadow: 0 16px 36px rgba(33, 18, 97, 0.12) !important;
}

.doctor-profile-card:hover::after {
    left: 140%;
}

.doc-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid #F1F5F9 !important;
}

.btn-doc-view-detail,
.btn-doc-book-now {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 8px 6px !important;
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.btn-doc-view-detail {
    background: #F8FAFC !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
}

.btn-doc-view-detail:hover {
    background: #E2E8F0 !important;
    color: #001F4D !important;
    border-color: #94A3B8 !important;
}

.btn-doc-book-now {
    background: linear-gradient(135deg, #00CE7C 0%, #009B5A 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 206, 124, 0.2) !important;
}

.btn-doc-book-now:hover {
    background: linear-gradient(135deg, #00b86e 0%, #00874e 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 206, 124, 0.35) !important;
}

@media (max-width: 576px) {
    .doc-card-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
}

/* Modal Open Scroll Lock */
html.sante-modal-open,
body.sante-modal-open {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none !important;
}

/* ================= DOCTOR DETAIL MODAL / DRAWER (FV HOSPITAL STYLE) ================= */
.sante-doctor-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
}

.sante-doctor-modal-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.sante-doctor-modal-container {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    max-width: 980px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35) !important;
    position: relative !important;
    transform: scale(0.94) translateY(20px) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 10000000 !important;
}

.sante-doctor-modal-backdrop.active .sante-doctor-modal-container {
    transform: scale(1) translateY(0) !important;
}

/* Mobile Specific Header & Footer Elements (Hidden on Desktop) */
.sante-doc-mobile-header,
.sante-doc-mobile-footer {
    display: none !important;
}

.sante-doc-modal-scroll-area {
    width: 100%;
    display: block;
}

/* Fancybox Booking Popup Global Fix (Clean, Centered, White Card) */
.fancybox-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
}

.fancybox-bg {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 1 !important;
    touch-action: none !important;
}

.fancybox-inner {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    overscroll-behavior: contain !important;
}

.fancybox-stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
}

/* 1.1 Core Image Slide Rules (Restore Fullscreen Lightbox) */
.fancybox-slide--image {
    padding: 44px 0 !important;
    overflow: hidden !important;
}
.fancybox-slide:not(.fancybox-slide--current):not(.fancybox-is-sliding) {
    display: none !important;
}
.fancybox-slide--current {
    display: block !important;
}
.fancybox-slide--image .fancybox-content {
    position: absolute !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    background: transparent !important;
}
.fancybox-slide--image .fancybox-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    user-select: none !important;
    visibility: visible !important;
}

/* 1.2 Form Modal Slide Rules (Scoped for #registerForm popup) */
.fancybox-slide--html,
.fancybox-slide--inline,
.fancybox-slide:has(#registerForm, .register-form) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 15px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 4 !important;
}

.fancybox-slide--html::before,
.fancybox-slide--inline::before,
.fancybox-slide:has(#registerForm, .register-form)::before {
    display: none !important;
}

.fancybox-slide--html > .fancybox-content:not(#registerForm):not(.register-form),
.fancybox-slide--inline > .fancybox-content:not(#registerForm):not(.register-form) {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    margin: auto !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

.fancybox-container .fancybox-slide #registerForm,
.fancybox-slide:has(#registerForm) #registerForm,
.fancybox-slide:has(#registerForm) .fancybox-content#registerForm,
.fancybox-slide .register-form,
.fancybox-content.register-form,
#registerForm.fancybox-content,
div#registerForm {
    display: block !important;
    background: #FFFFFF !important;
    border-radius: 18px !important;
    max-width: 580px !important;
    width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: auto !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Hide navigation arrows for form popup */
.fancybox-container:has(#registerForm) .fancybox-navigation,
.fancybox-container:has(#registerForm) .fancybox-button--arrow_left,
.fancybox-container:has(#registerForm) .fancybox-button--arrow_right {
    display: none !important;
}

body > #registerForm:not(.fancybox-content):not(.fancybox-slide *),
footer #registerForm:not(.fancybox-content):not(.fancybox-slide *),
.site-footer #registerForm:not(.fancybox-content):not(.fancybox-slide *) {
    display: none !important;
}

.register-form .contact-form {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 24px !important;
    padding: 36px 32px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

.register-form h2.heading-1 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #211261 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.register-form .form-group {
    margin-bottom: 14px !important;
}

.register-form input[type="text"],
.register-form input[type="tel"],
.register-form input[type="email"],
.register-form select,
.register-form textarea {
    width: 100% !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    background: #F8FAFC !important;
    color: #1E293B !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus {
    border-color: #00CE7C !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.15) !important;
}

.register-form .frm-btn-submit {
    width: 100% !important;
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(0, 206, 124, 0.35) !important;
    transition: all 0.25s ease !important;
}

.register-form .frm-btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 206, 124, 0.45) !important;
}

.sante-doc-close-btn {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
    font-size: 18px !important;
}

.sante-doc-close-btn:hover {
    background: #005B60 !important;
    color: #FFFFFF !important;
    border-color: #005B60 !important;
    transform: rotate(90deg) !important;
}

.sante-doc-modal-grid {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    min-height: 520px !important;
}

.sante-doc-sidebar {
    background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%) !important;
    padding: 36px 28px !important;
    border-right: 1px solid #E2E8F0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.sante-doc-avatar-box {
    width: 200px !important;
    height: 250px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 3px solid #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(0, 91, 96, 0.15) !important;
    margin-bottom: 20px !important;
    background: #E2E8F0 !important;
    flex-shrink: 0 !important;
}

.sante-doc-avatar-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

.sante-doc-role-pill {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    margin-bottom: 16px !important;
}

.sante-doc-role-pill.gold {
    background: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FDE68A !important;
}

.sante-doc-role-pill.teal {
    background: #E6FFFA !important;
    color: #007A78 !important;
    border: 1px solid #B2F5EA !important;
}

.sante-doc-role-pill.blue {
    background: #EFF6FF !important;
    color: #1E40AF !important;
    border: 1px solid #BFDBFE !important;
}

.sante-doc-side-meta {
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    font-size: 13px !important;
}

.sante-doc-side-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
}

.sante-doc-side-meta-item:last-child {
    margin-bottom: 0 !important;
}

.sante-doc-side-meta-item em {
    color: #00A862 !important;
    font-size: 14px !important;
    width: 18px !important;
    text-align: center !important;
}

.sante-doc-side-meta-item strong {
    color: #1E293B !important;
    font-weight: 700 !important;
}

.sante-doc-booking-btn {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    background: linear-gradient(135deg, #005B60 0%, #008489 100%) !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(0, 91, 96, 0.25) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    border: none !important;
}

.sante-doc-booking-btn:hover {
    background: linear-gradient(135deg, #004549 0%, #005B60 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 91, 96, 0.35) !important;
    color: #FFFFFF !important;
}

.sante-doc-main-content {
    padding: 36px 36px 36px 32px !important;
    overflow-y: auto !important;
}

.sante-doc-header-tag {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #00A862 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.sante-doc-modal-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
}

.sante-doc-modal-degree {
    color: #DFBA73 !important;
    font-weight: 700 !important;
    margin-right: 6px !important;
}

.sante-doc-modal-position {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.sante-doc-section-block {
    margin-bottom: 24px !important;
}

.sante-doc-section-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #005B60 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 12px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.sante-doc-section-title em {
    color: #00CE7C !important;
    font-size: 16px !important;
}

.sante-doc-bio-text {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    margin: 0 !important;
}

.sante-doc-bullet-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sante-doc-bullet-list li {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    padding-left: 20px !important;
    position: relative !important;
    margin-bottom: 8px !important;
}

.sante-doc-bullet-list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #00CE7C !important;
    font-weight: 800 !important;
    font-size: 13px !important;
}

.sante-doc-timeline-list {
    list-style: none !important;
    padding: 0 0 0 18px !important;
    margin: 0 !important;
    border-left: 2px solid #E2E8F0 !important;
}

.sante-doc-timeline-list li {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    position: relative !important;
    margin-bottom: 12px !important;
    padding-left: 8px !important;
}

.sante-doc-timeline-list li:last-child {
    margin-bottom: 0 !important;
}

.sante-doc-timeline-list li::before {
    content: "" !important;
    position: absolute !important;
    left: -24px !important;
    top: 5px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #005B60 !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 0 0 2px #00CE7C !important;
}

@media (max-width: 900px) {
    .sante-doctor-modal-backdrop {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100vw !important;
        height: 100vh !important;
        inset: 0 !important;
    }
    .sante-doctor-modal-container {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* 1. Mobile Sticky Top Header */
    .sante-doc-mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #E2E8F0 !important;
        flex-shrink: 0 !important;
        z-index: 30 !important;
        min-height: 52px !important;
    }
    .sante-doc-mobile-header-title {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #005B60 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }
    .sante-doc-mobile-header-title em {
        font-size: 16px !important;
        color: #00CE7C !important;
    }
    .sante-doc-mobile-close-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #F1F5F9 !important;
        border: 1px solid #E2E8F0 !important;
        color: #475569 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    .sante-doc-mobile-close-btn:hover {
        background: #005B60 !important;
        color: #FFFFFF !important;
    }

    /* Ẩn nút close cũ trên mobile */
    .sante-doc-close-btn {
        display: none !important;
    }

    /* 2. Scrollable Body */
    .sante-doc-modal-scroll-area {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding: 0 !important;
    }
    .sante-doc-modal-grid {
        grid-template-columns: 1fr !important;
    }
    .sante-doc-sidebar {
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
        padding: 24px 20px 20px 20px !important;
    }
    .sante-doc-avatar-box {
        width: 130px !important;
        height: 165px !important;
        margin-bottom: 12px !important;
    }
    .sante-doc-sidebar .sante-doc-booking-btn {
        display: none !important; /* Ẩn nút trong thân, dùng sticky bottom CTA */
    }
    .sante-doc-main-content {
        padding: 24px 20px 30px 20px !important;
    }
    .sante-doc-modal-title {
        font-size: 22px !important;
    }

    /* 3. Mobile Sticky Bottom Action Bar */
    .sante-doc-mobile-footer {
        display: block !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid #E2E8F0 !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 30 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    }
    .sante-doc-mobile-book-cta {
        width: 100% !important;
        background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%) !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 14px !important;
        padding: 13px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 15px rgba(0, 206, 124, 0.35) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .sante-doc-mobile-book-cta:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 20px rgba(0, 206, 124, 0.45) !important;
    }
}

.doc-img-box {
    position: relative !important;
    height: 400px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%) !important;
    border-radius: 18px 18px 0 0 !important;
}

@media (max-width: 768px) {
    .doc-img-box {
        height: 390px !important;
    }
}

.doc-img-box .doc-img-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    text-decoration: none !important;
}

.doc-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    transform-origin: top center !important;
    transition: transform 0.4s ease !important;
}

.doctor-profile-card:hover .doc-img-box img {
    transform: scale(1.04) !important;
}

.doc-degree-row {
    display: flex !important;
    align-items: center !important;
    align-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    min-height: 28px !important;
}

.doc-role-badge {
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    z-index: auto !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

.doc-role-badge,
.doc-role-badge.gold,
.doc-role-badge.teal,
.doc-role-badge.blue {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE !important;
}

.doc-body-box {
    padding: 16px 16px 18px 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.doc-degree {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #047857 !important;
    background: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

.doc-fullname {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #001F4D !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    min-height: 48px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.doc-name-link {
    color: #001F4D !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.doc-name-link:hover {
    color: #00CE7C !important;
}

.doc-tags-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.doc-tags-list li {
    font-size: 12px !important;
    color: #475569 !important;
    line-height: 1.38 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    padding-left: 0 !important;
    font-weight: 400 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.doc-tags-list li em {
    color: #00CE7C !important;
    margin-right: 0 !important;
    font-size: 12.5px !important;
    width: 14px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.doc-tags-list li.tag-pos em {
    color: #1D4ED8 !important;
}

.doc-tags-list li.tag-pos span {
    color: #0F172A !important;
    font-weight: 600 !important;
}

.doc-tags-list li span {
    flex: 1 !important;
    word-break: break-word !important;
}

.doc-tags-list li::before {
    display: none !important;
}

/* 6. CƠ SỞ VẬT CHẤT (MOSAIC GALLERY & LUXURY PILL TABS) */
.about-facilities-section {
    padding: 75px 0 85px 0 !important;
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
}

.facility-header-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #0369A1 !important;
    background: #E0F2FE !important;
    border: 1px solid #BAE6FD !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
}

.facility-header-badge-pill em {
    color: #0284C7 !important;
    font-size: 13px !important;
}

.facility-tab-nav-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
    flex-wrap: wrap !important;
}

.fac-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(33, 18, 97, 0.03) !important;
}

.fac-tab-btn em {
    font-size: 15px !important;
    color: #64748B !important;
    transition: color 0.25s ease !important;
}

.fac-tab-btn:hover {
    color: #211261 !important;
    border-color: #CBD5E1 !important;
    background: #F8FAFC !important;
}

.fac-tab-btn.active {
    background: #211261 !important;
    color: #FFFFFF !important;
    border-color: #211261 !important;
    box-shadow: 0 6px 20px rgba(33, 18, 97, 0.25) !important;
}

.fac-tab-btn.active em {
    color: #00CE7C !important;
}

.sante-facility-pane {
    display: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.sante-facility-pane.active {
    display: block !important;
    opacity: 1 !important;
}

.facility-mosaic-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 20px !important;
}

.mosaic-large-col .mosaic-img-card {
    position: relative !important;
    display: block !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 480px !important;
    box-shadow: 0 14px 35px rgba(33, 18, 97, 0.08) !important;
    border: 3px solid #FFFFFF !important;
    text-decoration: none !important;
}

.mosaic-large-col .mosaic-img-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.mosaic-large-col .mosaic-img-card:hover img {
    transform: scale(1.03) !important;
}

.mosaic-floating-tag {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    background: rgba(33, 18, 97, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    pointer-events: none !important;
}

.mosaic-thumbs-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 16px !important;
}

.mosaic-thumb-card {
    display: block !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(33, 18, 97, 0.06) !important;
    border: 2px solid #FFFFFF !important;
    height: 100% !important;
    min-height: 230px !important;
    text-decoration: none !important;
}

.mosaic-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.mosaic-thumb-card:hover img {
    transform: scale(1.06) !important;
}

/* ================= 7. CLOSING CTA BANNER (LIGHT LUXURY CONCIERGE) ================= */
.about-closing-cta-section {
    padding: 30px 0 20px 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

#ctl00_divCenter.middle-fullwidth {
    padding-bottom: 20px !important;
}

.about-cta-banner-card.light-cta-card {
    background: linear-gradient(135deg, #FAFCFB 0%, #EAFBF3 50%, #F1F5F9 100%) !important;
    border-radius: 28px !important;
    padding: 52px 40px !important;
    color: #1E293B !important;
    box-shadow: 0 16px 45px rgba(33, 18, 97, 0.06) !important;
    border: 1.5px solid rgba(0, 206, 124, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.about-cta-banner-card.light-cta-card::after {
    content: "" !important;
    position: absolute !important;
    top: -40% !important;
    right: -10% !important;
    width: 450px !important;
    height: 450px !important;
    background: radial-gradient(circle, rgba(0, 206, 124, 0.12) 0%, rgba(255,255,255,0) 70%) !important;
    pointer-events: none !important;
}

.cta-banner-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.cta-badge-pill-teal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #00A862 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 206, 124, 0.35) !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 206, 124, 0.1) !important;
}

.cta-badge-pill-teal em {
    color: #00CE7C !important;
    font-size: 13px !important;
}

.cta-main-title-light {
    font-size: clamp(26px, 3.2vw, 38px) !important;
    font-weight: 800 !important;
    color: #211261 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    font-family: 'Lexend', sans-serif !important;
}

.cta-desc-light {
    font-size: 15.5px !important;
    color: #64748B !important;
    line-height: 1.7 !important;
    margin-bottom: 30px !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cta-gate-info-pills {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
    flex-wrap: wrap !important;
}

.gpill-item-light {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    box-shadow: 0 2px 8px rgba(33, 18, 97, 0.03) !important;
    transition: all 0.25s ease !important;
}

.gpill-item-light:hover {
    border-color: #00CE7C !important;
    transform: translateY(-2px) !important;
}

.gpill-item-light em {
    color: #00A862 !important;
    font-size: 14px !important;
}

.cta-action-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.btn-cta-teal-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    padding: 14px 32px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 206, 124, 0.35) !important;
    transition: all 0.3s ease !important;
}

.btn-cta-teal-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 206, 124, 0.5) !important;
    color: #FFFFFF !important;
}

.btn-cta-white-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #211261 !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(33, 18, 97, 0.03) !important;
}

.btn-cta-white-outline:hover {
    background: #F8FAFC !important;
    color: #211261 !important;
    border-color: #211261 !important;
    transform: translateY(-2px) !important;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .about-hero-grid,
    .about-care-bento-grid,
    .vision-mission-bento-grid,
    .facility-mosaic-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    
    .values-pillars-grid {
        grid-template-columns: 1fr !important;
    }
    
    .hero-showcase-img,
    .care-media-card .care-media-wrapper {
        height: 380px !important;
        min-height: 380px !important;
    }
    
    .about-cta-banner-card {
        padding: 40px 24px !important;
    }
}

@media (min-width: 820px) and (max-width: 1100px) {
    .doctors-faculty-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media (min-width: 641px) and (max-width: 819px) {
    .doctors-faculty-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .about-doctors-swiper {
        overflow: hidden !important;
        padding: 6px 4px 16px 4px !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .about-doctors-swiper .doctors-faculty-grid.swiper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        width: auto !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .about-doctors-swiper .swiper-slide.doctor-profile-card {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        background: #FFFFFF !important;
        border-radius: 18px !important;
        border: 1px solid #E2E8F0 !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0, 31, 77, 0.05) !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    .about-doctors-swiper .doctor-profile-card .doc-img-box {
        width: 100% !important;
        height: 390px !important;
        position: relative !important;
        background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%) !important;
        border-radius: 18px 18px 0 0 !important;
        overflow: hidden !important;
    }
    .about-doctors-swiper .doctor-profile-card .doc-img-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
    }
    .about-doctors-swiper .doctor-profile-card .doc-tags-list li::before {
        display: none !important;
        content: none !important;
    }
    .about-doctors-swiper-pagination {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 18px !important;
        padding-bottom: 4px !important;
    }
    .about-doctors-swiper-pagination .swiper-pagination-bullet {
        background: #CBD5E1 !important;
        opacity: 0.8 !important;
        width: 8px !important;
        height: 8px !important;
        transition: all 0.3s ease !important;
    }
    .about-doctors-swiper-pagination .swiper-pagination-bullet-active {
        background: #00CE7C !important;
        width: 24px !important;
        border-radius: 4px !important;
        opacity: 1 !important;
    }
    .about-care-section,
    .about-vision-section,
    .about-values-section,
    .about-doctors-section,
    .about-facilities-section {
        padding: 44px 0 !important;
    }
}

@media (max-width: 600px) {
    .about-hero-section {
        padding: 24px 0 36px 0 !important;
    }

    .about-hero-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .about-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        width: 100% !important;
    }

    .hero-content-col {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .hero-badge-pill {
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 5px 12px !important;
        margin: 0 auto 14px auto !important;
        display: inline-flex !important;
    }

    .hero-badge-pill .badge-text {
        font-size: 10px !important;
        white-space: normal !important;
    }

    .hero-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        text-wrap: balance !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .text-gradient-teal {
        white-space: normal !important;
        display: inline !important;
    }

    .hero-desc-lead {
        font-size: 14px !important;
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    .hero-desc-sub {
        font-size: 13px !important;
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .hero-commitments-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .hcommit-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-actions-row {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .hero-actions-row a {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero-showcase-img {
        width: 100% !important;
        height: 240px !important;
        min-height: 240px !important;
    }

    .section-main-title {
        font-size: 26.5px !important;
        font-weight: 800 !important;
        line-height: 1.28 !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        text-wrap: balance !important;
        margin-bottom: 12px !important;
    }

    .section-heading-centered {
        margin-bottom: 32px !important;
    }
    
    .light-vision-card,
    .light-mission-card {
        padding: 26px 20px !important;
        border-radius: 20px !important;
    }

    .bento-title-light {
        font-size: 20px !important;
    }
    
    .mosaic-thumbs-col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .mosaic-large-col .mosaic-img-card {
        min-height: 220px !important;
        height: 220px !important;
    }
    .mosaic-thumbs-col .mosaic-thumb-card {
        min-height: 125px !important;
        height: 125px !important;
    }
    
    .hero-commitments-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .care-content-card {
        padding: 24px 18px !important;
    }

    .care-badge-pill {
        display: inline-flex !important;
        margin: 0 auto 12px auto !important;
    }

    .care-section-title {
        text-align: center !important;
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .care-section-desc {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    .cta-gate-info-pills,
    .cta-action-buttons {
        flex-direction: column !important;
    }
    
    .btn-cta-gold,
    .btn-cta-hotline {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================================
   GLOBAL ACCESSIBILITY & TOUCH TARGET FIXES (WCAG & AP-050)
   ======================================================== */
.sante-main-navigation ul > li > a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.footer-quick-links li a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 6px 0 !important;
}

.footer-gate-item .gate-map-link,
.footer-gate-card .footer-map-pill {
    min-height: 38px !important;
    padding: 6px 12px !important;
}

.footer-contact-pill,
.hotline-strip-item .hl-val,
.footer-email-row a,
.footer-privacy-text a,
.sub-privacy-note a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
}

.sante-floating-dock .dock-item a.dock-btn,
#santeBackToTop {
    min-width: 48px !important;
    min-height: 48px !important;
}

.subscribe-submit-btn,
.sante-footer-subscribe-box .footer-sub-form .sub-input-group button {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* ==========================================================================
   SANTE LUXURY BOOKING POPUP MODAL (2026 Medical Quiet Luxury Standard)
   ========================================================================== */

/* 1. Backdrop & Container */
.fancybox-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
}

.fancybox-bg {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(10, 20, 45, 0.78) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 1 !important;
    transition: opacity 0.3s ease !important;
}

.fancybox-inner {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
}

.fancybox-stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    overflow: hidden !important;
}

.fancybox-slide--html,
.fancybox-slide--inline,
.fancybox-slide:has(#registerForm, .register-form) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 4 !important;
}

.fancybox-slide--html::before,
.fancybox-slide--inline::before,
.fancybox-slide:has(#registerForm, .register-form)::before {
    display: none !important;
}

.fancybox-slide--html > .fancybox-content:not(#registerForm):not(.register-form),
.fancybox-slide--inline > .fancybox-content:not(#registerForm):not(.register-form) {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    margin: auto !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
}

/* 2. Modal Card Frame - Compact & Balanced (580px max-width) */
.fancybox-container .fancybox-slide #registerForm,
.fancybox-slide:has(#registerForm) #registerForm,
.fancybox-slide:has(#registerForm) .fancybox-content#registerForm,
.fancybox-slide .register-form,
.fancybox-content.register-form,
#registerForm.fancybox-content,
div#registerForm {
    display: block !important;
    background: #FFFFFF !important;
    border-radius: 18px !important;
    max-width: 580px !important;
    width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: auto !important;
    padding: 0 !important;
    box-shadow: 0 25px 70px rgba(10, 20, 45, 0.3), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    position: relative !important;
    z-index: 10 !important;
}

body > #registerForm:not(.fancybox-content):not(.fancybox-slide *),
footer #registerForm:not(.fancybox-content):not(.fancybox-slide *),
.site-footer #registerForm:not(.fancybox-content):not(.fancybox-slide *) {
    display: none !important;
}

.register-form .contact-form {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 22px 26px 18px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Custom Scrollbar */
.register-form::-webkit-scrollbar {
    width: 5px;
}
.register-form::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 8px;
}
.register-form::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 8px;
}

/* 3. Modal Header & Brand Badge */
.sante-modal-header {
    margin-bottom: 12px !important;
    text-align: center !important;
}

.sante-modal-brand-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    background: rgba(0, 206, 124, 0.08) !important;
    border: 1px solid rgba(0, 206, 124, 0.25) !important;
    border-radius: 99px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    color: #009B5A !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
}

.sante-modal-brand-badge em {
    font-size: 11px !important;
}

.sante-modal-title {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #101935 !important;
    margin: 0 0 3px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.sante-modal-subtitle {
    font-size: 12px !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

/* 4. Doctor Designated Banner */
.sante-booking-doctor-banner {
    display: none;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #F0FDF4 0%, #E6F9F0 100%) !important;
    border: 1.5px solid rgba(0, 206, 124, 0.4) !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 3px 12px rgba(0, 206, 124, 0.08) !important;
    transition: all 0.25s ease !important;
}

.sante-banner-avatar-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
}

.sante-banner-avatar-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00CE7C 0%, #009B5A 100%) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    box-shadow: 0 3px 8px rgba(0, 206, 124, 0.3) !important;
}

.sante-banner-status-dot {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 10px !important;
    height: 10px !important;
    background: #10B981 !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 50% !important;
}

.sante-banner-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.sante-banner-tag-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
    flex-wrap: wrap !important;
}

.sante-banner-tag-badge {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #009B5A !important;
    letter-spacing: 0.5px !important;
    background: rgba(0, 206, 124, 0.15) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.sante-banner-tag-dept {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #059669 !important;
}

.sante-banner-name {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
}

/* 5. Inputs & Selects Grid - SPACIOUS & BALANCED (Gaps x2: 10px, Zero Overlap) */
.form-grid-row {
    margin-left: -5px !important;
    margin-right: -5px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    row-gap: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.form-grid-row > div,
.register-form .form-grid-row .form-group,
.register-form .form-group {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}

.form-grid-row .form-group.col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}

.form-grid-row .form-group.col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.sante-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

.sante-input-group .input-icon {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13.5px !important;
    color: #94A3B8 !important;
    pointer-events: none !important;
    transition: color 0.2s ease !important;
    z-index: 2 !important;
}

.sante-input-group.textarea-group .input-icon {
    top: 13px !important;
    transform: none !important;
}

.sante-input-group input[type="text"],
.sante-input-group input[type="tel"],
.sante-input-group input[type="email"],
.sante-input-group select {
    width: 100% !important;
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 8px 12px 8px 38px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1E293B !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.sante-input-group select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 32px !important;
    cursor: pointer !important;
}

.sante-select-group .select-arrow {
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
    color: #94A3B8 !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
}

/* Expanded Symptom Textarea */
.sante-input-group textarea {
    width: 100% !important;
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 10px 12px 10px 38px !important;
    height: 95px !important;
    min-height: 95px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1E293B !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    resize: none !important;
    line-height: 1.45 !important;
}

.sante-input-group input::placeholder,
.sante-input-group textarea::placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
    font-size: 12.5px !important;
}

/* Focus States */
.sante-input-group input:focus,
.sante-input-group select:focus,
.sante-input-group textarea:focus {
    background: #FFFFFF !important;
    border-color: #00CE7C !important;
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.16) !important;
}

.sante-input-group:focus-within .input-icon {
    color: #00CE7C !important;
}

.sante-input-group:hover input:not(:focus),
.sante-input-group:hover select:not(:focus),
.sante-input-group:hover textarea:not(:focus) {
    border-color: #CBD5E1 !important;
    background: #F1F5F9 !important;
}

/* 6. CTA Button & Trust Badges - CLEAN SEPARATION */
.sante-modal-submit-wrap {
    margin-top: 14px !important;
    clear: both !important;
    text-align: center !important;
    position: relative !important;
    z-index: 5 !important;
}

.sante-btn-modal-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #00CE7C 0%, #009B5A 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(0, 206, 124, 0.32) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sante-btn-modal-submit:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(0, 206, 124, 0.42) !important;
    background: linear-gradient(135deg, #02df86 0%, #00874e 100%) !important;
}

.sante-btn-modal-submit:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(0, 206, 124, 0.25) !important;
}

.sante-btn-modal-submit em {
    font-size: 13px !important;
    transition: transform 0.2s ease !important;
}

.sante-btn-modal-submit:hover em {
    transform: translateX(3px) !important;
}

.sante-modal-trust-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    font-size: 11px !important;
    color: #64748B !important;
    font-weight: 500 !important;
    flex-wrap: wrap !important;
}

.sante-modal-trust-row .trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.sante-modal-trust-row .trust-item em {
    color: #00CE7C !important;
    font-size: 12px !important;
}

.sante-modal-trust-row .trust-divider {
    color: #CBD5E1 !important;
}

/* 7. Fancybox Close Button Styling */
.fancybox-button.fancybox-button--close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    background: #F1F5F9 !important;
    border-radius: 50% !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    z-index: 25 !important;
}

.fancybox-button.fancybox-button--close:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
    transform: rotate(90deg) scale(1.05) !important;
}

.fancybox-button.fancybox-button--close svg {
    width: 12px !important;
    height: 12px !important;
}

/* 8. Mobile Responsiveness */
@media (max-width: 640px) {
    .fancybox-slide--html,
    .fancybox-slide--inline,
    .fancybox-slide:has(#registerForm, .register-form) {
        padding: 10px 8px !important;
    }

    .register-form .contact-form {
        padding: 20px 16px 16px !important;
        border-radius: 16px !important;
    }

    .sante-modal-title {
        font-size: 19px !important;
    }

    .sante-modal-subtitle {
        font-size: 11.5px !important;
    }

    .sante-input-group input[type="text"],
    .sante-input-group input[type="tel"],
    .sante-input-group input[type="email"],
    .sante-input-group select {
        font-size: 12.5px !important;
        padding: 7px 10px 7px 32px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .sante-input-group textarea {
        height: 80px !important;
        min-height: 80px !important;
        font-size: 12.5px !important;
    }

    .sante-input-group .input-icon {
        left: 10px !important;
        font-size: 12.5px !important;
    }

    .sante-btn-modal-submit {
        min-height: 40px !important;
        font-size: 13px !important;
    }

    .sante-modal-trust-row {
        gap: 5px !important;
        font-size: 10.5px !important;
    }
}

/* ========================================================
   SANTE PATIENT SERVICE & INTERACTIVE NAVIGATION HUB
   Quiet Luxury Healthcare Standard v2026.10
   Brand Palette: Sante Navy (#211261), Mint (#059669), Gold (#B89535)
   Multi-Layered Section Background Architecture
   ======================================================== */
.sante-hub-page {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1E293B;
    line-height: 1.6;
    background-color: #FAFCFB;
}

.sante-hub-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Breadcrumb (Hidden completely on pages) */
.sante-hub-breadcrumb-wrap {
    display: none !important;
}

/* ========================================================
   SECTION 0: ASYMMETRIC BENTO HERO (QUIET LUXURY 60:40)
   ======================================================== */
.sante-hub-hero {
    position: relative;
    padding: 48px 0 56px;
    background: #FAFAF7 !important;
    border-bottom: 1px solid #E2E8F0;
    overflow: hidden;
}

.sante-hero-bento-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.bento-hero-tile-primary {
    background-color: #0B192C !important;
    background-image: linear-gradient(145deg, #0B192C 0%, #172A45 100%) !important;
    border-radius: 20px;
    padding: 44px 44px 36px;
    color: #FFFFFF !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 48px -12px rgba(11, 25, 44, 0.25);
    text-align: left;
}

.bento-hero-tile-primary .sante-hub-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #38BDF8 !important;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.bento-hero-tile-primary .sante-hub-hero-title {
    font-size: 38px;
    font-weight: 700;
    color: #FFFFFF !important;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.bento-hero-tile-primary .sante-hub-hero-desc {
    font-size: 15px;
    color: #E2E8F0 !important;
    line-height: 1.7;
    margin: 0 0 28px;
    max-width: 540px;
}

.bento-hero-tile-primary .hero-action-cluster {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.bento-hero-tile-primary .hero-prominent-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 30px !important;
    min-height: 48px !important;
    height: 48px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    background-color: #FFFFFF !important;
    color: #0B192C !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-hero-tile-primary .hero-prominent-cta:hover {
    background-color: #F1F5F9 !important;
    color: #0B192C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3) !important;
}

.bento-hero-tile-primary .hero-prominent-cta i {
    margin-left: 8px;
}

.bento-hero-tile-primary .hero-hotline-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #E2E8F0 !important;
    text-decoration: none !important;
    min-height: 48px !important;
    padding: 6px 0 !important;
}

.bento-hero-tile-primary .hero-hotline-link strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.hotline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    display: inline-block;
}

.hero-tile-footer-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-strip-item strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.footer-strip-item span {
    display: block;
    font-size: 11.5px;
    color: #94A3B8;
    line-height: 1.4;
}

/* Sidebar Stack */
.bento-hero-tile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bento-photo-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 235px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08);
}

.bento-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.photo-card-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 9999px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
}

.bento-metrics-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 26px 32px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    text-align: left;
}

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

.side-metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-metric-val {
    font-size: 32px;
    font-weight: 800;
    color: #0B192C;
    letter-spacing: -0.04em;
    line-height: 1;
}

.side-metric-val small {
    font-size: 14px;
    font-weight: 600;
    color: #64748B;
    margin-left: 2px;
}

.side-metric-lbl {
    font-size: 12px;
    color: #64748B;
    line-height: 1.4;
}

.side-metric-divider {
    width: 1px;
    height: 48px;
    background: #E2E8F0;
}

.sidebar-quick-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
    margin-top: 14px;
}

.pulse-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ========================================================
   SECTION 1: EDITORIAL SPREAD (Dịch Vụ Tiếp Nhận Chuyên Biệt)
   ======================================================== */
.sante-hub-triage-section {
    padding: 85px 0 95px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
}

.sante-triage-editorial-spread {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
    align-items: start;
}

.editorial-spotlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.editorial-pre-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1E3A8A !important;
    margin-bottom: 14px;
}

.editorial-heading {
    font-size: 32px;
    font-weight: 700;
    color: #0F172A !important;
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
}

.editorial-summary {
    font-size: 15px;
    color: #475569 !important;
    line-height: 1.7;
    margin: 0 0 28px;
}

.editorial-metrics-strip {
    display: flex;
    gap: 48px;
    padding: 20px 0;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 32px;
    width: 100%;
}

.metric-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-val {
    font-size: 38px;
    font-weight: 800;
    color: #0F172A !important;
    line-height: 1;
    letter-spacing: -0.03em;
}

.metric-val small {
    font-size: 16px;
    font-weight: 600;
    color: #1E3A8A !important;
    margin-left: 4px;
}

.metric-desc {
    font-size: 12px;
    color: #64748B !important;
    line-height: 1.4;
}

.editorial-action-line {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.editorial-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 28px !important;
    min-height: 48px !important;
    height: 48px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    background: #1E3A8A !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.18) !important;
    transition: all 0.2s ease !important;
}

.editorial-cta-btn:hover {
    background: #0F172A !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.editorial-help-tel {
    font-size: 13px;
    color: #64748B !important;
}

.editorial-help-tel a {
    color: #0F172A !important;
    font-weight: 700;
    text-decoration: none;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
}

/* Right Editorial Fluid Lanes (Zero Box, Pure Typography) */
.editorial-support-lanes {
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-left: 1px solid #E2E8F0;
    padding-left: 48px;
}

.editorial-fluid-lane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.lane-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1E3A8A !important;
}

.lane-title {
    font-size: 20px;
    font-weight: 700;
    color: #0F172A !important;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.lane-desc {
    font-size: 13.5px;
    color: #475569 !important;
    line-height: 1.65;
    margin: 0;
}

.lane-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1E3A8A !important;
    text-decoration: none !important;
    min-height: 48px !important;
    padding: 6px 0 !important;
    transition: gap 0.2s ease !important;
}

.lane-link:hover {
    gap: 10px !important;
    color: #0F172A !important;
}

.arrow-char {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.lane-link:hover .arrow-char {
    transform: translateX(3px);
}

/* ========================================================
   SECTION 2: ARCHITECTURAL TRANSIT & TWO GATES (Swiss Spread, Zero Box)
   ======================================================== */
.sante-wayfinding-section {
    padding: 85px 0 95px;
    background: #FAFAF9;
    border-bottom: 1px solid #E2E8F0;
}

.sante-gates-editorial-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
    text-align: left;
}

.gate-editorial-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.gate-editorial-col.is-emergency-col {
    border-left: 1px solid #E2E8F0 !important;
    padding-left: 48px !important;
    background: transparent !important;
}

.gate-meta-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.gate-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1E3A8A !important;
    background: rgba(30, 58, 138, 0.08) !important;
    padding: 3px 8px;
    border-radius: 4px;
}

.gate-badge.is-emergency {
    color: #047857 !important;
    background: rgba(4, 120, 87, 0.08) !important;
}

.gate-address-text {
    font-size: 12.5px;
    color: #64748B !important;
}

.gate-editorial-title {
    font-size: 21px;
    font-weight: 700;
    color: #0F172A !important;
    margin: 0 0 12px;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.gate-editorial-desc {
    font-size: 14px;
    color: #475569 !important;
    line-height: 1.65;
    margin: 0 0 16px;
}

.gate-direction-note {
    font-size: 13.5px;
    color: #475569 !important;
    line-height: 1.65;
    margin-bottom: 24px;
    padding: 0;
    background: transparent !important;
    border: none !important;
}

.gate-editorial-col.is-emergency-col .gate-direction-note {
    border: none !important;
}

.gate-direction-note strong {
    color: #1E293B !important;
}

.gate-editorial-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1E3A8A !important;
    text-decoration: none !important;
    min-height: 48px !important;
    padding: 8px 0 !important;
    transition: gap 0.2s ease !important;
}

.gate-editorial-link:hover {
    gap: 12px !important;
    color: #0F172A !important;
}

.gate-editorial-link.is-emergency {
    color: #047857 !important;
}

.gate-editorial-link.is-emergency:hover {
    color: #065F46 !important;
}

/* Transit Matrix Bar - Seamless Hairline Strip */
.sante-transit-matrix-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    background: transparent;
}

.transit-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.transit-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #64748B !important;
    text-transform: uppercase;
}

.transit-data {
    font-size: 13.5px;
    font-weight: 600;
    color: #0F172A !important;
}

/* ========================================================
   SECTIONS 3 & 4: PATIENT JOURNEY & CONCIERGE BOOKING PORTAL
   (Maintained in assets/css/pages/page-patient-hub.css)
   ======================================================== */
.sante-patient-journey-section {
    padding: 72px 0 84px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.sante-hub-form-section {
    padding: 72px 0 84px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

/* ========================================================
   SECTION 5: PATIENT FAQ ACCORDION - "DEEP SOOTHING SLATE"
   ======================================================== */
.sante-hub-faq-section {
    padding: 50px 0 60px;
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%);
    border-top: 1px solid #E2E8F0;
}

.sante-faq-accordion-grid {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sante-faq-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(33, 18, 97, 0.03);
}

.sante-faq-item:hover {
    border-color: #CBD5E1;
    box-shadow: 0 6px 18px rgba(33, 18, 97, 0.06);
}

.sante-faq-item[open] {
    border-color: #1E3A8A;
    box-shadow: 0 4px 18px rgba(30, 58, 138, 0.06);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    font-size: 14.5px;
    font-weight: 700;
    color: #1E293B;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-arrow {
    color: #94A3B8;
    font-size: 13px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.sante-faq-item[open] .faq-arrow {
    transform: rotate(180deg);
    color: #1E3A8A;
}

.sante-faq-item[open] .faq-answer {
    display: block !important;
}

.sante-faq-item:not([open]) .faq-answer {
    display: none !important;
}

.faq-answer {
    padding: 0 24px 20px;
    border-top: 1px solid #F1F5F9;
    margin-top: 4px;
    padding-top: 14px;
}

.faq-answer p {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* ========================================================
   SECTION 6: POST-FAQ CLOSING DECISION ANCHOR
   ======================================================== */
.sante-hub-closing-cta {
    padding: 50px 0;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}

.sante-closing-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background: #F8FAFC;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    padding: 32px 36px;
    flex-wrap: wrap;
}

.closing-cta-info {
    max-width: 620px;
}

.closing-cta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #047857;
    background: rgba(5, 150, 105, 0.08);
    border: 1px solid rgba(5, 150, 105, 0.2);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.closing-cta-title {
    font-size: 22px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 6px;
}

.closing-cta-desc {
    font-size: 13.5px;
    color: #475569;
    margin: 0;
    line-height: 1.55;
}

.closing-cta-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.sante-closing-cta-inner a.closing-cta-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 24px !important;
    min-height: 48px !important;
    height: 48px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    background-color: #1E3A8A !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.2) !important;
    transition: all 0.2s ease !important;
}

.sante-closing-cta-inner a.closing-cta-btn-primary:hover {
    background: #0F172A !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.sante-closing-cta-inner a.closing-cta-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 22px !important;
    min-height: 48px !important;
    height: 48px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.sante-closing-cta-inner a.closing-cta-btn-secondary:hover {
    background: #F8FAFC !important;
    border-color: #1E3A8A !important;
    color: #1E3A8A !important;
    transform: translateY(-1px) !important;
}

/* ========================================================
   RESPONSIVE BREAKPOINTS (SANTE PATIENT HUB)
   ======================================================== */
@media (max-width: 1100px) {
    .sante-hero-bento-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hero-editorial-amenities {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .sante-triage-editorial-spread {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .editorial-support-lanes {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #E2E8F0;
        padding-top: 36px;
    }

    .sante-gates-editorial-spread {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gate-editorial-col.is-emergency-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #E2E8F0;
        padding-top: 40px;
    }

    .sante-transit-matrix-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .sante-horizon-fluid-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .hero-editorial-amenities {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 20px;
        padding-top: 20px;
    }
    #santeConciergePill {
        display: none !important;
    }

    .sante-hub-page {
        padding-bottom: 100px !important;
    }

    .sante-hub-hero {
        padding: 36px 0 24px;
        min-height: auto;
    }

    .sante-hero-split-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .hero-editorial-col {
        align-items: center;
    }

    .hero-editorial-col .sante-hub-hero-title,
    .hero-editorial-col .sante-hub-hero-desc {
        text-align: center;
    }

    .hero-action-cluster {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero-prominent-cta,
    .hero-hotline-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-image-frame img {
        height: 240px;
    }

    .sante-hub-hero-title {
        font-size: 25px;
        line-height: 1.25;
    }

    .sante-hub-hero-desc {
        font-size: 14px;
        line-height: 1.6;
    }

    .sante-triage-editorial-spread {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .editorial-metrics-strip {
        flex-direction: column;
        gap: 16px;
    }

    .editorial-action-line {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .editorial-cta-btn {
        width: 100%;
        text-align: center;
    }

    .editorial-support-lanes {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #E2E8F0;
        padding-top: 28px;
        gap: 24px;
    }

    .sante-gates-editorial-spread {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .gate-editorial-col.is-emergency-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #E2E8F0;
        padding-top: 32px;
    }

    .sante-transit-matrix-bar {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 0;
    }

    .sante-horizon-fluid-timeline {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sante-section-title {
        font-size: 22px;
    }

    .gate-triage-banner {
        grid-template-columns: 1fr;
    }

    .sante-form-portal-card,
    .sante-form-portal {
        padding: 24px 16px;
        border-radius: 20px;
    }

    .portal-title {
        font-size: 20px;
    }

    .form-tabs-switcher {
        flex-direction: column;
    }

    .form-tab-btn {
        width: 100%;
        justify-content: center;
    }

    .sante-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sante-hub-submit-btn {
        width: 100%;
    }

    .sante-hub-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hub-privacy-trust {
        justify-content: center;
    }

    .faq-question {
        font-size: 13.5px;
        padding: 14px 16px;
    }

    .faq-answer {
        padding: 0 16px 16px;
        font-size: 13px;
    }

    .sante-closing-cta-inner {
        padding: 24px 18px;
        flex-direction: column;
        align-items: flex-start;
    }
}





/* 6. DOCTOR DIRECTORY & FACULTY PAGE -> Modularized to assets/css/pages/page-doctors.css */

/* ========================================================
   SANTE CAREER & RECRUITMENT PORTAL (ENTERPRISE HOSPITAL STANDARD 2026)
   Benchmark: Vinmec Careers, BV Tâm Anh, FV Hospital
   ======================================================== */
.sante-career-portal {
    background-color: #FAFCFB;
    color: #1E293B;
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-bottom: 70px;
}

/* 1. HERO & SMART JOB SEARCH ENGINE */
.career-hero-portal {
    padding: 48px 0 36px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 55%, #F8FAFC 100%);
    border-bottom: 1.5px solid #E2E8F0;
    position: relative;
}

.career-hero-header {
    max-width: 860px;
    margin: 0 auto 32px auto;
}

.career-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EAFBF3;
    border: 1px solid rgba(0, 206, 124, 0.35);
    padding: 6px 18px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.career-hero-badge .badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00CE7C;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(0, 206, 124, 0.25);
}

.career-hero-badge .badge-txt {
    font-size: 11.5px;
    font-weight: 800;
    color: #00A862;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.career-hero-h1 {
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 900;
    color: #211261;
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin: 0 0 16px 0;
}

.career-hero-h1 .text-highlight-teal {
    color: #00A862;
    background: linear-gradient(135deg, #00CE7C 0%, #008F53 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.career-hero-p {
    font-size: 15.5px;
    font-weight: 400;
    color: #475569;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 720px;
}

/* Smart Career Search Form Bar (Enterprise Portal Style) */
.career-search-bar-wrap {
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 0 12px 36px rgba(33, 18, 97, 0.07);
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1.2fr auto;
    gap: 12px;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto 36px auto;
    transition: all 0.25s ease;
}

.career-search-bar-wrap:focus-within {
    border-color: #00CE7C;
    box-shadow: 0 16px 40px rgba(0, 206, 124, 0.15);
}

.career-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-right: 1px solid #E2E8F0;
    height: 48px;
}

.career-search-field em {
    font-size: 18px;
    color: #00A862;
    flex-shrink: 0;
}

.career-search-field input,
.career-search-field select {
    width: 100%;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    padding: 0 !important;
    box-shadow: none !important;
}

.career-search-field input::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.career-search-field select {
    cursor: pointer;
}

.btn-career-search-submit {
    background: linear-gradient(135deg, #00CE7C 0%, #009E5E 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 14px;
    padding: 0 28px;
    height: 48px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(0, 206, 124, 0.35);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-career-search-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 206, 124, 0.45);
}

/* Fast Key Metrics Strip */
.career-metrics-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto;
}

.career-metric-cell {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 16px rgba(33, 18, 97, 0.02);
    transition: all 0.25s ease;
}

.career-metric-cell:hover {
    border-color: #00CE7C;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 206, 124, 0.1);
}

.career-metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #EAFBF3;
    color: #00A862;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.career-metric-num {
    font-size: 17px;
    font-weight: 900;
    color: #211261;
    line-height: 1.2;
}

.career-metric-lbl {
    font-size: 11.5px;
    color: #64748B;
    font-weight: 600;
    line-height: 1.35;
}

/* 2. JOB LISTING BOARD (ENTERPRISE ACCORDION / ROW DESIGN) */
.career-board-section {
    padding: 50px 0 60px 0;
}

.career-board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #E2E8F0;
}

.career-board-title h2 {
    font-size: 24px;
    font-weight: 900;
    color: #211261;
    margin: 4px 0 0 0;
}

.career-board-title .board-tag {
    font-size: 12px;
    font-weight: 800;
    color: #00A862;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Category Filter Tabs (Pills) */
.career-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    width: 100%;
}

.career-tab-pill {
    padding: 12px 24px;
    min-height: 48px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: auto !important;
}

.career-tab-pill:hover {
    border-color: #211261;
    color: #211261;
}

.career-tab-pill.active {
    background: #211261;
    border-color: #211261;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(33, 18, 97, 0.2);
}

.career-tab-pill .pill-count {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}

.career-tab-pill.active .pill-count {
    background: #00CE7C;
    color: #083B2E;
}

/* Job Rows Container */
.career-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Individual Job Row Card */
.job-portal-row {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 26px 30px;
    box-shadow: 0 4px 20px rgba(33, 18, 97, 0.03);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.job-portal-row:hover {
    border-color: #00CE7C;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(33, 18, 97, 0.08);
}

.job-portal-row.priority-urgent {
    border-left: 6px solid #211261;
}

.job-portal-row.priority-hot {
    border-left: 6px solid #00CE7C;
}

.job-portal-row-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.job-title-group {
    flex: 1;
}

.job-badges-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dept-badge {
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
}

.dept-badge.badge-doc {
    background: #EEF2FF;
    color: #3730A3;
}

.dept-badge.badge-nurse {
    background: #ECFDF5;
    color: #065F46;
}

.dept-badge.badge-ktv {
    background: #FAF5FF;
    color: #7E22CE;
}

.dept-badge.badge-duoc {
    background: #FFFBEB;
    color: #B45309;
}

.dept-badge.badge-service {
    background: #FDF2F8;
    color: #9D174D;
}

.badge-flag-urgent {
    background: #FEF2F2;
    color: #DC2626;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #FECACA;
}

.badge-flag-hot {
    background: #ECFDF5;
    color: #059669;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #A7F3D0;
}

.job-role-h3 {
    font-size: 19px;
    font-weight: 800;
    color: #211261;
    line-height: 1.35;
    margin: 0 0 8px 0;
}

.job-role-summary {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* Meta Data Badges Row */
.job-meta-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
    font-size: 13px;
    color: #64748B;
}

.job-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.job-meta-item em {
    color: #00A862;
    font-size: 15px;
}

.job-meta-item strong {
    color: #1E293B;
}

.job-meta-item.salary-strong strong {
    color: #00A862;
    font-size: 14px;
    font-weight: 900;
}

/* Right Action Buttons in Row */
.job-actions-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.btn-job-apply-portal {
    background: #211261 !important;
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 24px;
    min-height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(33, 18, 97, 0.15);
}

.btn-job-apply-portal:hover {
    background: #00CE7C !important;
    color: #083B2E !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 206, 124, 0.35);
}

.btn-job-toggle-detail {
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    color: #475569;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-job-toggle-detail:hover {
    border-color: #211261;
    color: #211261;
}

/* Expandable Job Details Accordion Panel */
.job-detail-panel {
    display: none;
    padding-top: 18px;
    border-top: 1.5px dashed #E2E8F0;
    animation: fadeInSlide 0.3s ease;
}

.job-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

.jd-block h4 {
    font-size: 14px;
    font-weight: 800;
    color: #211261;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jd-block h4 em {
    color: #00CE7C;
}

.jd-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jd-block ul li {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 6px;
    position: relative;
    padding-left: 18px;
}

.jd-block ul li::before {
    content: "•";
    color: #00CE7C;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: -2px;
}

/* No Search Results Notice */
.career-no-results {
    background: #FFFFFF;
    border: 2px dashed #CBD5E1;
    border-radius: 20px;
    padding: 48px 24px;
    text-align: center;
}

.career-no-results em {
    font-size: 40px;
    color: #94A3B8;
    margin-bottom: 16px;
    display: inline-block;
}

.career-no-results h3 {
    font-size: 18px;
    font-weight: 800;
    color: #211261;
    margin: 0 0 8px 0;
}

.career-no-results p {
    font-size: 13.5px;
    color: #64748B;
    margin: 0 auto 20px auto;
    max-width: 500px;
}

/* Dynamic Pagination Bar */
.career-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1.5px solid #E2E8F0;
}

.btn-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    color: #211261;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    min-height: 42px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-page-nav:hover:not(:disabled) {
    background: #00CE7C;
    border-color: #00CE7C;
    color: #083B2E;
}

.btn-page-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-numbers-list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-num-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    color: #211261;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-num-btn:hover {
    border-color: #211261;
}

.page-num-btn.active {
    background: #211261;
    border-color: #211261;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(33, 18, 97, 0.2);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 991px) {
    .career-search-bar-wrap {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .career-search-field {
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
        padding: 0 4px 10px 4px;
        height: auto;
    }
    .career-metrics-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .career-why-layout {
        grid-template-columns: 1fr;
    }
    .job-portal-row-main {
        flex-direction: column;
        align-items: flex-start;
    }
    .job-actions-col {
        align-items: flex-start;
        width: 100%;
    }
    .btn-job-apply-portal {
        width: 100%;
        justify-content: center;
    }
    .job-detail-grid {
        grid-template-columns: 1fr;
    }
    .career-steps-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
    .career-faq-grid {
        grid-template-columns: 1fr;
    }
    .career-faq-box {
        padding: 24px 20px;
    }
    .career-hr-callout-portal {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }
    .btn-career-hotline-portal {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .career-metrics-strip {
        grid-template-columns: 1fr;
    }
    .career-steps-timeline {
        grid-template-columns: 1fr;
    }
    .job-meta-columns {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ========================================================
   TITAN CEREBRUM v4.0 - ANTI-SQUISHED PORTRAIT & DOCTOR SHIELD (AP-068 / AP-074)
   Bảo toàn tỷ lệ 1:1 của đầu và mặt, cấm bóp méo khung ảnh (Zero Anamorphic Distortion)
   ======================================================== */
.team-member .team-member-image,
.person-img,
.doctor-portrait,
.sante-doctor-frame {
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #F8FAFC !important;
    border-radius: 12px !important;
}

.team-member .team-member-image img,
.team-member-image img,
.person-img img,
.doctor-portrait img,
.sante-doctor-frame img,
.doctor-card img {
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important; /* Neo tiêu điểm vào mắt và trán bác sĩ */
    transform: none !important;
    transition: transform 0.3s ease !important;
}

.team-member:hover .team-member-image img {
    transform: scale(1.03) !important;
}

/* Sante Specialty Bento Header & Title Balance */
.sante-bento-sec-header {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sante-bento-sec-title {
    text-wrap: balance !important;
}

.sante-bento-sec-sub {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}