/* ==========================================================================
   BỆNH VIỆN ĐA KHOA PHẠM NGỌC THẠCH - STYLESHEET CHÍNH (MODERN MEDICAL DESIGN)
   ========================================================================== */

:root {
    --pnt-primary: #007a4d;
    --pnt-primary-dark: #005636;
    --pnt-primary-light: #e6f4ee;
    --pnt-accent: #007a4d;
    --pnt-secondary: #007a4d;
    --pnt-danger: #dc3545;
    --pnt-warning: #ffc107;
    --pnt-dark: #1e293b;
    --pnt-light: #f8fafc;
    --pnt-gray-100: #f1f5f9;
    --pnt-gray-200: #e2e8f0;
    --pnt-gray-500: #64748b;
    --pnt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --pnt-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --pnt-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --pnt-radius: 16px;   /* bo goc chung cho MOI khoi noi dung, xem cuoi tep */
    --bs-primary: #007a4d;
    --bs-primary-rgb: 0, 122, 77;
    --bs-success: #007a4d;
    --bs-success-rgb: 0, 122, 77;
    --bs-link-color: #007a4d;
    --bs-link-hover-color: #005636;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    height: auto;
}

/* html/body must stay height:auto (never height:100%) - a constrained
   height on body, combined with overflow-x:hidden here, makes the browser
   auto-promote body's overflow-y to "auto" (CSS Overflow spec: overflow-x
   != visible forces a "visible" overflow-y to become "auto"), turning body
   into its own clipped internal scroll container instead of using normal
   document scrolling. Every position:sticky element (incl. the main nav
   header) anchors to the *document* scroll, so once body silently became
   the real scroller, sticky elements stayed pinned to a box that was
   itself scrolling out of view - the header visually vanished. Confirmed
   live via DevTools: window.scrollY stayed 0 while document.body.scrollTop
   climbed with real scrolling. */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #334155;
    background-color: #f8fafc;
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
    height: auto;
}

/* TOPBAR HOSPITAL */
.topbar-hospital {
    background: linear-gradient(90deg, #005636 0%, #007a4d 100%);
    color: #ffffff;
    font-size: 13px;
    padding: 7px 0;
}

.topbar-hospital a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: color 0.2s;
}

.topbar-hospital a:hover {
    color: #ffc107;
}

/* ===== Bộ chọn ngôn ngữ (dropdown) ===== */

/* Menu thả xuống nằm trong thanh trên cùng, mà khối header ngay bên dưới lại
   có z-index 99999 (.pnt-header-wrapper) - thanh trên cùng không đặt z-index
   nên menu luôn bị vẽ CHÌM XUỐNG DƯỚI header, mở ra là bị che mất.
   Nâng lớp cao hơn header, và CHỈ nâng lúc menu đang mở (.show) để khi cuộn
   trang thì nút này không đè lên header cố định. */
.lang-dd {
    position: relative;
}

/* :focus-within là phương án dự phòng cho trường hợp Bootstrap không gắn .show
   lên phần tử bọc - bấm mở menu thì nút toggle đang được focus nên vẫn ăn.
   Không nâng z-index vô điều kiện, vì nút này nằm trong thanh trên cùng và sẽ
   nổi đè lên cả modal tìm kiếm (z-index 1050) khi modal mở ra ở đầu trang. */
.lang-dd.show,
.lang-dd:focus-within {
    z-index: 100001;
}

.lang-dd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.lang-dd-toggle:hover,
.lang-dd-toggle:focus,
.lang-dd .show>.lang-dd-toggle {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    text-decoration: none;
}

.lang-dd-toggle .lang-dd-globe {
    font-size: 12px;
    opacity: 0.9;
}

.lang-dd-caret {
    font-size: 8.5px;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.lang-dd .show>.lang-dd-toggle .lang-dd-caret {
    transform: rotate(180deg);
}

.lang-dd-menu {
    min-width: 202px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-top: 10px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

/* QUAN TRỌNG - vì sao selector dài dòng và nhiều !important như vậy:
   Thanh trên cùng có `.topbar-hospital a { color: #fff }` (chữ trắng trên nền
   xanh), còn cuối file có rule dùng chung
   `.dropdown-item.active { background: #007a4d !important; color: #fff !important }`.
   Menu ngôn ngữ nằm trong thanh trên cùng nhưng lại là thẻ trắng, nên hai rule
   kia làm chữ trắng trên nền trắng - nhìn không ra chữ.
   Cách chống triệt để: đặt màu THẲNG lên các thẻ con (.lang-name/.lang-badge)
   chứ không để chúng kế thừa màu từ thẻ <a>. Toàn bộ web không có rule nào
   nhắm vào các thẻ con này, nên màu chữ không thể bị cướp nữa. */
.lang-dd .lang-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    background: transparent !important;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.lang-dd .lang-dd-item:hover,
.lang-dd .lang-dd-item:focus,
.lang-dd .lang-dd-item:active {
    background: #f1f5f9 !important;
}

.lang-dd .lang-dd-item.active,
.lang-dd .lang-dd-item.active:hover,
.lang-dd .lang-dd-item.active:focus,
.lang-dd .lang-dd-item.active:active {
    background: #eaf6f0 !important;
}

/* Tên ngôn ngữ */
.lang-dd .lang-dd-menu .lang-dd-item .lang-name {
    flex: 1;
    color: #334155 !important;
    font-weight: 600;
}

.lang-dd .lang-dd-menu .lang-dd-item:hover .lang-name {
    color: #0f172a !important;
}

.lang-dd .lang-dd-menu .lang-dd-item.active .lang-name {
    color: #00623d !important;
    font-weight: 700;
}

/* Nhãn mã ngôn ngữ, thay cho emoji cờ (Windows không có font cờ nên emoji
   cờ bị hiện thành hộp chữ "VN"/"GB" trông như lỗi font) */
.lang-dd .lang-dd-menu .lang-dd-item .lang-badge {
    flex: 0 0 auto;
    min-width: 32px;
    padding: 4px 7px;
    border-radius: 6px;
    background: #eef2f7;
    color: #475569 !important;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
}

.lang-dd .lang-dd-menu .lang-dd-item:hover .lang-badge {
    background: #d7e8e0;
    color: #00623d !important;
}

.lang-dd .lang-dd-menu .lang-dd-item.active .lang-badge {
    background: #007a4d;
    color: #ffffff !important;
}

/* Dấu tích ở mục đang chọn */
.lang-dd .lang-dd-menu .lang-dd-item .lang-dd-check {
    font-size: 12px;
    color: #007a4d !important;
    visibility: hidden;
}

.lang-dd .lang-dd-menu .lang-dd-item.active .lang-dd-check {
    visibility: visible;
}

/* Màn hình hẹp: bỏ chữ VI/EN, chỉ để icon quả địa cầu cho đỡ chật thanh trên cùng */
@media (max-width: 575.98px) {
    .lang-dd-toggle .lang-code {
        display: none;
    }

    .lang-dd-toggle {
        padding: 4px 8px;
    }
}


/* PARTNERS SLIDER */
.pnt-partners-section {
    overflow: hidden;
}

.pnt-partners-swiper {
    padding: 6px 0;
}

.pnt-partners-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

.pnt-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: 10px 18px;
    border: 1px solid var(--pnt-gray-200);
    border-radius: var(--pnt-radius);
    background: #ffffff;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.pnt-partner-logo:hover {
    box-shadow: var(--pnt-shadow-md);
    border-color: var(--pnt-primary-light);
    transform: translateY(-3px);
}

.pnt-partner-logo img {
    height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* HEADER HOSPITAL MAIN & NAV */
.header-hospital {
    background: #ffffff;
    border-bottom: 3px solid #007a4d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.header-hospital .pnt-logo-img {
    height: 52px;
    max-height: 56px;
    width: auto;
    min-width: 120px;
    object-fit: contain;
    display: block;
}

/* MOBILE NAV MENU - a real dropdown "card" instead of an unstyled list that
   pushes the page content down.
   - .pnt-header-row and <nav> (toggler + collapsible menu) are flex siblings.
     With align-items: center (needed on desktop so the logo lines up with
     the inline nav), opening the mobile menu made the <nav> sibling tall -
     centering the short logo against it floated the logo down into the
     middle of the open menu. Force top alignment below the breakpoint where
     the menu can actually expand as a block.
   - #hospitalNav used to expand in normal flow, so its own (wide, longest
     nav-link) content stretched <nav>'s flex-item width, which dragged the
     toggler button away from the header's right edge toward the middle once
     opened - a different button position depending on open/closed state.
     Taking the panel out of flow with position: absolute fixes that shift
     (the toggler's box shrinks back to just its own width) and is what
     makes a proper floating card possible in the first place. */
@media (max-width: 991.98px) {
    .pnt-header-row {
        align-items: flex-start !important;
        position: relative;
    }

    .pnt-header-row>.navbar-brand {
        padding-top: 6px;
    }

    .header-hospital .navbar-toggler {
        margin-left: auto;
    }

    /* Bootstrap's own .navbar rule sets position: relative, which - since
       <nav> sits between #hospitalNav and .pnt-header-row in the DOM - would
       make #hospitalNav's left/right: 0 resolve against <nav>'s own (now
       toggler-width-only) box instead of the full header row. Neutralize it
       so the containing block for the panel is .pnt-header-row, giving a
       panel that spans the whole header instead of a ~40px sliver. */
    .pnt-header-row>nav.navbar {
        position: static;
    }

    #hospitalNav {
        position: absolute;
        top: calc(100% + 14px);
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 14px;
        border: 1px solid #eef2f0;
        box-shadow: 0 18px 45px rgba(0, 30, 15, 0.16);
        padding: 8px;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        z-index: 2000;
    }

    #hospitalNav .navbar-nav {
        align-items: stretch;
    }

    #hospitalNav .nav-item {
        width: 100%;
        margin-right: 0 !important;
        border-bottom: 1px solid #f1f5f9;
    }

    #hospitalNav .nav-item:last-child {
        border-bottom: none;
    }

    #hospitalNav .nav-link {
        width: 100%;
        justify-content: space-between;
        padding: 13px 14px !important;
        font-size: 15px;
        border-radius: 10px;
    }

    /* Rotate the caret to show open/closed state instead of a static arrow */
    #hospitalNav .dropdown-toggle::after {
        transition: transform 0.2s ease;
    }

    #hospitalNav .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Submenus (Chuyên khoa, Dịch vụ y tế...) sit inline in the panel on
       mobile instead of floating as their own absolutely-positioned card -
       there's no room for a second floating layer on a phone screen. */
    #hospitalNav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
        border: none;
        background: #f8fafc;
        border-radius: 10px;
        margin: 2px 0 8px !important;
        padding: 6px;
        animation: none;
    }

    #hospitalNav .dropdown-menu::before {
        display: none;
    }

    #hospitalNav .dropdown-item {
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 14px;
    }

    #hospitalNav .dropdown-item:hover,
    #hospitalNav .dropdown-item:active,
    #hospitalNav .dropdown-item:focus {
        background-color: #eaf6ef;
        color: var(--pnt-primary);
    }

    #hospitalNav .dropdown-divider {
        margin: 6px 8px;
    }
}

.header-hospital .nav-item {
    position: relative;
}

.header-hospital .nav-link {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    border-radius: 6px;
    cursor: pointer;
}

.header-hospital .nav-link:hover,
.header-hospital .nav-link.active {
    color: #007a4d !important;
    background-color: #f0fdf4;
}

.header-hospital .dropdown-toggle::after {
    margin-left: 4px;
    vertical-align: middle;
}

/* STABLE DROPDOWN HOVER & CLICK (PREVENTS SLIPPING) */
@media (min-width: 992px) {
    .header-hospital .nav-item.dropdown:hover>.dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

.header-hospital .dropdown-menu {
    margin-top: 0 !important;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
}

/* Invisible bridge element so hover doesn't break moving mouse to dropdown menu */
.header-hospital .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

/* STICKY & FIXED MAIN NAVIGATION BAR (GUARANTEED TO STAY VISIBLE ON ALL BROWSERS) */
.pnt-header-wrapper {
    position: relative;
    width: 100%;
    z-index: 99999;
}

.header-hospital,
.pnt-sticky-header {
    width: 100%;
    background-color: #ffffff !important;
    border-bottom: 3px solid #007a4d !important;
    box-shadow: 0 4px 18px rgba(0, 45, 25, 0.08) !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    transition: box-shadow 0.3s ease;
}

.header-hospital.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    box-shadow: 0 6px 25px rgba(0, 40, 20, 0.14) !important;
    /* Cố tình KHÔNG dùng animation slide-in ở đây (đã bỏ navSlideDown).
       Từng bị: nếu trình duyệt không chạy trọn animation vì bất kỳ lý do gì
       (tab không active, cài đặt "giảm chuyển động", bị throttle...), thanh
       nav kẹt mãi ở khung hình "from" của keyframe - tức translateY(-100%),
       nghĩa là ẩn hẳn phía trên màn hình, che luôn cả thanh admin bar bên
       dưới nó. Một thanh nav chính luôn hiển thị đúng quan trọng hơn nhiều
       so với hiệu ứng trượt trang trí - nên bỏ hẳn animation, không đánh đổi. */
    transform: none;
}

body:has(.wp-adminbar-modern) .header-hospital,
body:has(.wp-adminbar-modern) .header-hospital.is-fixed,
body.has-admin-bar .header-hospital,
body.has-admin-bar .header-hospital.is-fixed {
    top: 32px !important;
}

/* Disable legacy script fixed header overrides so CSS sticky header works 100% smoothly without disappearing on scroll */
.navbar-hospital-fixed {
    position: static !important;
    animation: none !important;
    box-shadow: none !important;
}

/* TOPBAR BRAND GREEN (#007a4d) - Scrolls naturally with content */
.pnt-topbar {
    position: static !important;
    background-color: #007a4d !important;
    color: #ffffff !important;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
}

.pnt-topbar a,
.pnt-topbar span,
.pnt-topbar div,
.pnt-topbar i,
.pnt-topbar strong {
    color: #ffffff !important;
}

.pnt-topbar a:hover {
    color: #e6f4ee !important;
    text-decoration: underline !important;
}

.btn-emergency-pnt {
    border: 1.5px dashed #dc3545;
    color: #dc3545 !important;
    background: #fff5f5;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    padding: 8px 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.btn-emergency-pnt:hover {
    background: #dc3545;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-booking-pnt {
    background-color: #007a4d;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    padding: 9px 18px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.btn-booking-pnt:hover {
    background-color: #005636;
    box-shadow: 0 4px 15px rgba(0, 122, 77, 0.35);
}

.pnt-brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.pnt-brand-logo img {
    height: 52px;
    object-fit: contain;
}

.pnt-brand-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--pnt-primary);
    line-height: 1.2;
    text-transform: uppercase;
}

.pnt-brand-sub {
    font-size: 11px;
    color: var(--pnt-gray-500);
    letter-spacing: 0.5px;
}

/* NAVIGATION */
.pnt-navbar {
    padding: 0;
}

.pnt-nav-link {
    font-weight: 500;
    color: #334155 !important;
    padding: 18px 12px !important;
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pnt-nav-link:hover,
.pnt-nav-link.active {
    color: var(--pnt-primary) !important;
    background-color: var(--pnt-primary-light);
}

.pnt-dropdown-menu {
    border: none;
    box-shadow: var(--pnt-shadow-lg);
    border-radius: 10px;
    padding: 8px 0;
    min-width: 230px;
    animation: fadeIn 0.2s ease-in-out;
}

.pnt-dropdown-item {
    padding: 9px 18px;
    font-size: 14px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.pnt-dropdown-item i {
    color: var(--pnt-primary);
    width: 18px;
    text-align: center;
}

.pnt-dropdown-item:hover {
    background-color: var(--pnt-primary-light);
    color: var(--pnt-primary);
    padding-left: 22px;
}

/* BUTTONS */
.btn-pnt-emergency {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 30px;
    padding: 8px 16px;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
    animation: pulse-red 2s infinite;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-pnt-emergency:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5);
}

.btn-pnt-primary {
    background-color: var(--pnt-primary);
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    border: none;
    transition: all 0.3s;
}

.btn-pnt-primary:hover {
    background-color: var(--pnt-primary-dark);
    box-shadow: 0 4px 12px rgba(0, 122, 77, 0.3);
}

.btn-pnt-outline {
    border: 2px solid var(--pnt-primary);
    color: var(--pnt-primary) !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    background: transparent;
    transition: all 0.3s;
}

.btn-pnt-outline:hover {
    background-color: var(--pnt-primary);
    color: #ffffff !important;
}

/* HERO SECTION */
.hero-slider-container {
    background: linear-gradient(135deg, #004d30 0%, #007a4d 100%);
    color: #ffffff;
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

.hero-content h1 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
}

.hero-subtitle {
    font-size: 16px;
    opacity: 0.95;
    margin-top: 15px;
}

.hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
}

/* CARDS & SECTIONS */
.pnt-section {
    padding: 50px 0;
}

.pnt-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pnt-primary-dark);
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.pnt-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3.5px;
    background: linear-gradient(90deg, #009661, #007a4d);
    border-radius: 3px;
}

.text-center .pnt-section-title::after,
.pnt-section-title.text-center::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.pnt-card {
    background: #ffffff;
    border-radius: var(--pnt-radius);
    border: 1px solid var(--pnt-gray-200);
    box-shadow: var(--pnt-shadow-sm);
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
}

.pnt-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pnt-shadow-md);
    border-color: var(--pnt-accent);
}

.pnt-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--pnt-primary-light);
    color: var(--pnt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 15px;
}

/* ENTRANCES 3 QUICK CARDS SECTION */
.entrance-section {
    padding: 60px 0 45px;
    background: #fafcfb;
    position: relative;
}

.entrance-badge {
    display: inline-flex;
    align-items: center;
    background: #e6f7ef;
    color: #007a4d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #cbf0df;
}

.entrance-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 34px 26px 28px;
    border: 1.5px solid #e7f0ec;
    box-shadow: 0 10px 30px rgba(0, 60, 35, 0.04);
    text-align: center;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.entrance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #009661, #007a4d);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.entrance-card:hover {
    transform: translateY(-8px);
    border-color: #99d6be;
    box-shadow: 0 20px 40px rgba(0, 122, 77, 0.12);
}

.entrance-card:hover::before {
    opacity: 1;
}

.entrance-icon-wrap {
    margin-bottom: 20px;
}

.entrance-icon {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #eaf8f1 0%, #d2f2e3 100%) !important;
    color: #007a4d !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    border: 1.5px solid rgba(0, 122, 77, 0.12) !important;
    box-shadow: 0 6px 16px rgba(0, 122, 77, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.entrance-card:hover .entrance-icon {
    background: linear-gradient(135deg, #009661 0%, #007a4d 100%) !important;
    color: #ffffff !important;
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 10px 22px rgba(0, 122, 77, 0.3) !important;
    border-color: transparent !important;
}

.entrance-title {
    font-size: 19px;
    font-weight: 700;
    color: #1a2f26;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.entrance-card:hover .entrance-title {
    color: #007a4d;
}

.entrance-desc {
    font-size: 14px;
    color: #5d756b;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.entrance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 20px;
    background: #f0f9f5;
    color: #007a4d !important;
    border: 1.5px solid #cbe9dc;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.entrance-btn i {
    transition: transform 0.3s ease;
}

.entrance-card:hover .entrance-btn,
.entrance-btn:hover {
    background: linear-gradient(135deg, #009661 0%, #007a4d 100%);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(0, 122, 77, 0.3);
}

.entrance-card:hover .entrance-btn i,
.entrance-btn:hover i {
    transform: translateX(4px);
}

/* SPECIALTY ICON FRAME (ROUNDED SQUARE) */
.pnt-spec-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 12px !important;
    background: #e6f4ee !important;
    color: #007a4d !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin-right: 16px !important;
}

/* SPECIALTY CARD LAYOUT EQUALIZATION */
.pnt-spec-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.pnt-spec-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 122, 77, 0.12);
    border-color: #007a4d;
}

.pnt-spec-title-wrap {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.pnt-spec-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pnt-spec-title a {
    color: #1e293b;
    text-decoration: none !important;
    transition: color 0.2s;
}

.pnt-spec-title a:hover {
    color: #007a4d !important;
}

.pnt-spec-badge {
    display: inline-block !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.pnt-spec-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748b !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    min-height: 64px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.pnt-spec-btn {
    margin-top: auto !important;
    border-radius: 8px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 13.5px;
    border-color: #007a4d !important;
    color: #007a4d !important;
}

.pnt-spec-btn:hover {
    background-color: #007a4d !important;
    color: #ffffff !important;
}

/* DOCTOR CARDS */
.doctor-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--pnt-gray-200);
    overflow: hidden;
    transition: all 0.3s;
}

.doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pnt-shadow-md);
    border-color: var(--pnt-primary);
}

.doctor-img-wrap {
    height: 240px;
    background: #e2e8f0;
    overflow: hidden;
    position: relative;
}

.doctor-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doctor-body {
    padding: 20px;
}

.doctor-title {
    font-size: 13px;
    color: var(--pnt-primary);
    font-weight: 600;
    text-transform: uppercase;
}

.doctor-name {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-top: 4px;
}

.doctor-spec {
    font-size: 14px;
    color: var(--pnt-gray-500);
    margin-top: 2px;
}

/* EMERGENCY PAGE SPECIALS */
.emergency-hero-banner {
    background: linear-gradient(135deg, #b02a37 0%, #dc3545 100%);
    color: #ffffff;
    padding: 40px 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(220, 53, 69, 0.3);
}

.emergency-phone-number {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 1px;
}

.emergency-phone-number a {
    color: #ffffff;
    text-decoration: none;
}

.emergency-checklist {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border-left: 5px solid #dc3545;
}

.emergency-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--pnt-gray-200);
    font-weight: 500;
}

/* WORKFLOW STEPS */
.pnt-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.pnt-step-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--pnt-gray-200);
    position: relative;
}

.pnt-step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--pnt-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

/* PACKAGES & TABLES */
.pnt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pnt-shadow-sm);
}

.pnt-table th {
    background-color: var(--pnt-primary-light);
    color: var(--pnt-primary-dark);
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 2px solid var(--pnt-gray-200);
}

.pnt-table td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--pnt-gray-200);
    vertical-align: middle;
}

.pnt-table tbody tr:hover {
    background-color: #f8fafc;
}

/* PROFESSIONAL TABLE CARD - reusable "card with green header + table" wrapper
   used across pricing/policy/result-lookup pages so every table on the site
   shares one consistent, mobile-friendly look instead of ad-hoc per-page CSS. */
.pnt-table-card {
    background: #fff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--pnt-shadow-md);
}

.pnt-table-card .pnt-table-card-header {
    background: linear-gradient(135deg, var(--pnt-primary) 0%, #00a862 100%);
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pnt-table-card .pnt-table-card-header .header-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
}

.pnt-table-card .pnt-table-card-header h6 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.pnt-table-card .pnt-table-card-header small {
    color: rgba(255, 255, 255, 0.85);
}

/* Base table styling reused by every .pnt-table-pro instance */
.pnt-table-pro {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.pnt-table-pro thead th {
    background: #f0f9f4;
    color: #00532f;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #d7ecdf;
    border-top: none;
    padding: 14px 16px;
    white-space: nowrap;
}

.pnt-table-pro tbody td {
    padding: 15px 16px;
    vertical-align: middle;
    border-top: 1px solid #eef2f0;
}

.pnt-table-pro tbody tr {
    transition: background-color 0.15s ease;
}

.pnt-table-pro tbody tr:hover {
    background-color: #f7fcf9;
}

.pnt-table-pro tbody tr:first-child td {
    border-top: none;
}

.pnt-table-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eaf6ef;
    color: var(--pnt-primary);
    font-weight: 700;
    font-size: 13px;
}

.pnt-table-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.pnt-table-pill.success {
    background: #eaf6ef;
    color: var(--pnt-primary);
}

.pnt-table-pill.danger {
    background: #fdeaea;
    color: #dc2626;
}

.pnt-table-pill.warning {
    background: #fef7e6;
    color: #b45309;
}

.pnt-table-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Scroll wrapper: on narrow screens a wide table needs to scroll horizontally
   inside its card rather than blowing out the page - this adds a soft fade +
   affordance instead of an abrupt hard-cut edge, and never lets the page
   itself scroll sideways (that's the pattern that broke on the original
   fixed 320px-min-width admin tables). */
.pnt-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pnt-table-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--pnt-gray-500);
}

.pnt-table-empty i {
    opacity: 0.3;
    display: block;
    margin-bottom: 10px;
}

/* Name cell with a small leading icon badge - vaccine/service/product rows */
.pnt-table-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pnt-table-name-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eaf6ef;
    color: var(--pnt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.pnt-table-name-cell .pnt-table-name {
    font-weight: 700;
    color: #1a2e22;
    font-size: 14.5px;
}

/* Price + promo helpers reused by every price/rate table on the site */
.pnt-tag-promo {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}

.pnt-price-current {
    font-weight: 700;
    color: var(--pnt-primary);
    font-size: 15px;
}

.pnt-price-old {
    color: #adb5bd;
    font-size: 12.5px;
    text-decoration: line-through;
}

.pnt-discount-badge {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 4px;
}

/* Mobile row card - the "each row becomes a card" alternative to a scrolling
   table on narrow screens. Show a real <table> at md+ and this list below
   md. Reused by every price/rate table on the site (vaccines, dịch vụ, gói
   khám...) so mobile users get real cards instead of squinting at a
   horizontally-scrolled table. */
.pnt-mobile-row-card {
    border: 1px solid #eef2f0;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    background: #fff;
}

.pnt-mobile-row-card:last-child {
    margin-bottom: 14px;
}

.pnt-mobile-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.pnt-mobile-row-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: #6c757d;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eef2f0;
}

.pnt-mobile-row-meta i {
    width: 14px;
    color: var(--pnt-primary);
}

.pnt-mobile-row-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* "Stacked" responsive table: for text-heavy comparison tables (BHYT coverage
   rules, package content lists...) where a horizontal scroll would squeeze
   several columns of prose into unreadable slivers. Add data-label="..." to
   every <td> and this turns each row into its own labeled card below the
   md breakpoint - no separate mobile markup needed. */
@media (max-width: 767.98px) {

    .pnt-table-stack,
    .pnt-table-stack thead,
    .pnt-table-stack tbody,
    .pnt-table-stack th,
    .pnt-table-stack td,
    .pnt-table-stack tr {
        display: block;
    }

    .pnt-table-stack thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .pnt-table-stack tbody tr {
        margin-bottom: 14px;
        border: 1px solid #eef2f0;
        border-radius: 12px;
        padding: 12px 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .pnt-table-stack tbody tr:last-child {
        margin-bottom: 0;
    }

    .pnt-table-stack td {
        border: none !important;
        border-bottom: 1px dashed #eef2f0 !important;
        padding: 8px 0 !important;
    }

    .pnt-table-stack td:last-child {
        border-bottom: none !important;
    }

    .pnt-table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--pnt-primary);
        margin-bottom: 3px;
    }
}

@media (max-width: 576px) {

    .pnt-table-pro thead th,
    .pnt-table-pro tbody td {
        padding: 11px 12px;
        font-size: 13px;
    }

    .pnt-table-card .pnt-table-card-header {
        padding: 0.9rem 1.1rem;
    }

    .pnt-table-card .pnt-table-card-header h6 {
        font-size: 14px;
    }

    .pnt-table-card .pnt-table-card-header small {
        font-size: 11.5px;
    }

    .pnt-table-name-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .pnt-table-name-cell .pnt-table-name {
        font-size: 13.5px;
    }

    .pnt-price-current {
        font-size: 13.5px;
    }
}

/* GENERAL MOBILE POLISH - applies to every content page built from the
   standard "container.py-5 + centered h1 badge intro + pnt-step-item steps"
   layout used across quy-trinh/BHYT/vaccination/on-demand-care/admission
   style pages, so they don't all need their own copy of the same rules. */
@media (max-width: 575.98px) {
    .container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    h1.font-weight-bold {
        font-size: 1.5rem;
    }

    .pnt-step-item {
        padding: 14px !important;
    }

    .pnt-step-num {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* MODERN & LUXURIOUS HOSPITAL FOOTER (EMERALD GRADIENT) */
.pnt-footer {
    background: linear-gradient(180deg, #023824 0%, #011f14 100%);
    border-top: 4px solid #10b981;
    color: #e2e8f0;
    padding-top: 55px;
    padding-bottom: 0;
    font-size: 13.5px;
    line-height: 1.6;
    position: relative;
}

.pnt-footer h5.pnt-footer-title {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 16px;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.3px;
}

.pnt-footer h5.pnt-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 3px;
    background-color: #10b981;
    border-radius: 2px;
}

.pnt-footer h5.pnt-hospital-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3;
}

.pnt-footer h5.pnt-hospital-name::after {
    display: none !important;
    content: none !important;
}

.pnt-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pnt-footer-links li {
    margin-bottom: 10px;
}

.pnt-footer-links a {
    color: #cbd5e1;
    text-decoration: none !important;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
}

.pnt-footer-links a:hover {
    color: #ffffff !important;
    transform: translateX(5px);
}

.pnt-footer-links a i {
    color: #34d399;
    font-size: 11px;
    transition: transform 0.2s ease;
}

.pnt-footer-links a:hover i {
    color: #6ee7b7;
    transform: translateX(2px);
}

.pnt-license-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 12px 14px;
    color: #ffffff;
    font-size: 12.5px;
    line-height: 1.5;
    backdrop-filter: blur(8px);
}

.pnt-footer-social-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}

.pnt-footer-social-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.25s ease;
    margin-right: 8px;
}

.pnt-footer-social-btn:last-child {
    margin-right: 0;
}

.pnt-footer-social-btn:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #007a4d !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.pnt-footer-bottom {
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding: 20px 0;
    font-size: 13px;
    color: #a7f3d0;
}

.pnt-footer-bottom p {
    color: #ffffff;
    font-weight: 600;
}

.pnt-hospital-rank-badge {
    display: inline-block;
    background-color: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.5);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

/* FLOATING ACTION BAR WIDGET (#007a4d UNIFIED BRAND GREEN) */
.pnt-floating-bar {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.pnt-float-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    background-color: #007a4d !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0, 122, 77, 0.35);
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    cursor: pointer;
}

.pnt-float-btn:hover {
    background-color: #005636 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 122, 77, 0.5);
}

.pnt-float-btn i {
    color: #ffffff !important;
}

.pnt-float-btn .pnt-zalo-text {
    font-family: Arial, -apple-system, sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: -0.4px;
    color: #ffffff !important;
    text-transform: uppercase;
    line-height: 1;
}

.pnt-back-to-top {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.pnt-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.floating-emergency-btn,
.back-to-top-btn {
    display: none !important;
}

/* FULL WIDTH HERO SWIPER (PREMIUM MEDICAL DESIGN) */
.full-hero-section {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #003622;
}

.full-hero-swiper {
    width: 100%;
    position: relative;
    cursor: grab;
}

.full-hero-swiper:active {
    cursor: grabbing;
}

.full-hero-swiper .swiper-slide {
    position: relative;
    width: 100%;
    min-height: 480px;
    max-height: 560px;
    overflow: hidden;
}

.full-hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Ken burns slow zoom effect */
.full-hero-swiper .swiper-slide-active img {
    transform: scale(1.06);
}

.full-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 48, 30, 0.92) 0%, rgba(0, 86, 54, 0.72) 48%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: center;
    color: #ffffff;
    z-index: 5;
}

/* Staggered entrance animations */
.hero-medical-badge,
.full-hero-title,
.full-hero-sub,
.full-hero-actions {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.full-hero-swiper .swiper-slide-active .hero-medical-badge {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.full-hero-swiper .swiper-slide-active .full-hero-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.28s;
}

.full-hero-swiper .swiper-slide-active .full-hero-sub {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.40s;
}

.full-hero-swiper .swiper-slide-active .full-hero-actions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.52s;
}

/* Hero Badge */
.hero-medical-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.hero-medical-badge i {
    color: #55e6a5;
}

.full-hero-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.22;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    margin-bottom: 0;
}

.full-hero-sub {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 14px;
    margin-bottom: 28px;
    max-width: 650px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.full-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px !important;
    margin-top: 12px;
}

.full-hero-actions .hero-btn-primary {
    margin-bottom: 8px;
}

.full-hero-actions .hero-btn-secondary {
    margin-bottom: 8px;
}

/* Medical Green Buttons */
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #009661 0%, #007a4d 100%);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 14px 28px;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 122, 77, 0.45);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

.hero-btn-primary:hover {
    background: linear-gradient(135deg, #00b373 0%, #009661 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 122, 77, 0.6);
    color: #ffffff !important;
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 14px 26px;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

.hero-btn-secondary:hover {
    background: #007a4d;
    border-color: #007a4d;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 122, 77, 0.45);
    color: #ffffff !important;
}

/* Slider Controls */
.full-hero-swiper .swiper-button-prev,
.full-hero-swiper .swiper-button-next {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    color: #007a4d;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    z-index: 20;
}

.full-hero-swiper .swiper-button-prev {
    left: 24px;
}

.full-hero-swiper .swiper-button-next {
    right: 24px;
}

.full-hero-swiper .swiper-button-prev::after,
.full-hero-swiper .swiper-button-next::after {
    font-size: 18px;
    font-weight: 900;
}

.full-hero-swiper .swiper-button-prev:hover,
.full-hero-swiper .swiper-button-next:hover {
    background-color: #007a4d;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 122, 77, 0.5);
}

.full-hero-swiper .swiper-pagination {
    bottom: 22px !important;
}

.full-hero-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ffffff;
    opacity: 0.55;
    margin: 0 6px !important;
    transition: all 0.35s ease;
    border-radius: 50%;
}

.full-hero-swiper .swiper-pagination-bullet-active {
    background: #00e08f;
    opacity: 1;
    width: 32px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 224, 143, 0.8);
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Emergency & Booking Action Buttons Text Decoration None */
.btn-emergency-pnt,
.btn-booking-pnt,
.btn-emergency-wireframe,
.btn-booking-wireframe {
    text-decoration: none !important;
}

.btn-emergency-pnt:hover,
.btn-emergency-pnt:focus,
.btn-emergency-pnt:active,
.btn-booking-pnt:hover,
.btn-booking-pnt:focus,
.btn-booking-pnt:active,
.btn-emergency-wireframe:hover,
.btn-booking-wireframe:hover {
    text-decoration: none !important;
}

/* ==========================================================================
   UNIFIED BRAND GREEN OVERRIDES (#007a4d) FOR ALL PRIMARY & SUCCESS
   ========================================================================== */
.text-primary,
.text-success {
    color: #007a4d !important;
}

.text-primary:hover,
.text-success:hover {
    color: #005636 !important;
}

.bg-primary,
.bg-success {
    background-color: #007a4d !important;
    color: #ffffff !important;
}

.bg-primary-subtle,
.bg-success-subtle,
.bg-light-primary,
.bg-light-success,
.badge-light.text-primary,
.badge-light.text-success,
.badge-light-primary,
.badge-light-success {
    background-color: #e6f4ee !important;
    color: #007a4d !important;
}

.border-primary,
.border-success {
    border-color: #007a4d !important;
}

.btn-primary,
.btn-success {
    background-color: #007a4d !important;
    border-color: #007a4d !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: #005636 !important;
    border-color: #005636 !important;
    color: #ffffff !important;
}

.btn-outline-primary,
.btn-outline-success {
    color: #007a4d !important;
    border-color: #007a4d !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: #007a4d !important;
    border-color: #007a4d !important;
    color: #ffffff !important;
}

.badge-primary,
.badge.bg-primary,
.badge-success,
.badge.bg-success {
    background-color: #007a4d !important;
    color: #ffffff !important;
}

.alert-primary,
.alert-success {
    background-color: #e6f4ee !important;
    border-color: #007a4d !important;
    color: #005636 !important;
}

/* Pagination, Navs, Tabs, Form Controls */
.page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: #007a4d !important;
    border-color: #007a4d !important;
    color: #ffffff !important;
}

.page-link {
    color: #007a4d;
}

.page-link:hover {
    color: #005636;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #007a4d !important;
    color: #ffffff !important;
}

.nav-tabs .nav-link.active {
    color: #007a4d !important;
    border-color: #007a4d !important;
}

.form-check-input:checked {
    background-color: #007a4d !important;
    border-color: #007a4d !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #007a4d !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 77, 0.15) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #007a4d !important;
    color: #ffffff !important;
}

.list-group-item.active {
    background-color: #007a4d !important;
    border-color: #007a4d !important;
    color: #ffffff !important;
}

/* BREADCRUMB & NOTICE BADGE BRAND GREEN (#007a4d) OVERRIDES */
.breadcrumb-item a,
.breadcrumbs__url,
.breadcrumbs__item a,
.breadcrumbs a,
a.breadcrumbs__url {
    color: #007a4d !important;
    font-weight: 600;
}

.breadcrumb-item a:hover,
.breadcrumbs__url:hover,
.breadcrumbs__item a:hover,
.breadcrumbs a:hover {
    color: #005636 !important;
    text-decoration: underline !important;
}

.badge-danger {
    background-color: #007a4d !important;
    color: #ffffff !important;
    border-color: #007a4d !important;
}

/* FORCE WHITE TEXT ON ALL BRAND CARDS & EMERGENCY HEADERS */
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-primary,
.card-header[class*="bg-"] {
    color: #ffffff !important;
}

.card-header.bg-success *,
.card-header.bg-danger *,
.card-header.bg-primary *,
.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6,
.card-header.bg-danger h1,
.card-header.bg-danger h2,
.card-header.bg-danger h3,
.card-header.bg-danger h4,
.card-header.bg-danger h5,
.card-header.bg-danger h6,
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
    color: #ffffff !important;
}

.emergency-hero-banner h1,
.emergency-hero-banner h2,
.emergency-hero-banner h3,
.emergency-hero-banner div,
.emergency-hero-banner p,
.emergency-hero-banner a,
.emergency-hero-banner i {
    color: #ffffff !important;
}

.card.bg-success,
.card.bg-success h1,
.card.bg-success h2,
.card.bg-success h3,
.card.bg-success h4,
.card.bg-success h5,
.card.bg-success h6,
.card.bg-success p,
.card.bg-success i,
.card.bg-success span {
    color: #ffffff !important;
}

.card.bg-success .btn-light {
    color: #007a4d !important;
}

/* BRAND GREEN (#007a4d) SELECT2 STYLING FOR FRONTEND */
.select2-container--default .select2-selection--single {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease-in-out !important;
    background-color: #ffffff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2c3e50 !important;
    line-height: 28px !important;
    padding-left: 0 !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    right: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #007a4d transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    margin-top: -2px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #007a4d transparent !important;
    border-width: 0 5px 6px 5px !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #007a4d !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 77, 0.15) !important;
    outline: none !important;
}

/* Select2 Dropdown Menu */
.select2-dropdown {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    z-index: 1055 !important;
    background-color: #ffffff !important;
}

.select2-search--dropdown {
    padding: 10px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.select2-search--dropdown .select2-search__field {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    outline: none !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #007a4d !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 77, 0.15) !important;
}

.select2-results__option {
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #334155 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #007a4d !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #e6f4ee !important;
    color: #007a4d !important;
    font-weight: 700 !important;
}

/* =====================================================================
   BO GOC DONG BO CHO CAC KHOI NOI DUNG (BOX)
   =====================================================================

   VAN DE: cac the/khung tren trang nguoi dung moi noi mot kieu, do duoc
   nam gia tri khac nhau cung ton tai:

       .rounded-lg (ho so bac si)      4.8px   <- sac hon han phan con lai
       .pnt-card   (trang chu)         12px
       .doctor-card                    14px
       .staff-card, .pnt-table-card    16px
       .entrance-card                  20px

   Dat canh nhau trong cung mot trang thi nhin ra ngay la khong dong bo.

   CACH LAM: mot bien duy nhat --pnt-radius o dau tep, moi khoi noi dung
   deu tro vao no. Sau nay muon doi do cong hay vuong thi sua DUNG MOT so.

   KHONG dong toi: anh dai dien tron (50%), nut dang vien thuoc (50px,
   30px, 25px), huy hieu nho va o nhap lieu - chung co y do rieng, ep
   chung ve cung mot con so se lam hong hinh dang von co.
   ===================================================================== */

.rounded-lg,
.pnt-card,
.pnt-spec-card,
.doctor-card,
.staff-card,
.pnt-table-card,
.entrance-card,
.pnt-license-card,
.the-bac-si-lien-quan,
.pnt-news-filter,
.news-card-item,
.pnt-huong-dan-swiper .swiper-slide,
.card.border-0.shadow-sm {
    border-radius: var(--pnt-radius) !important;
}

/* Anh nam sat mep tren cua the thi phai bo theo the, neu khong se co goc
   vuong nho tho ra ngoai duong cong. */
.doctor-card > .doctor-img-wrap,
.doctor-card > .doctor-img-wrap img {
    border-top-left-radius: var(--pnt-radius);
    border-top-right-radius: var(--pnt-radius);
}


/* =====================================================================
   VONG TIEU DIEM (FOCUS RING) CHO CAC TAB / THE LOC
   =====================================================================

   HIEN TUONG: bam hoac Tab toi mot tab thi hien mot khung chu nhat den
   bao quanh, trong nhu loi giao dien.

   DO LA VONG TIEU DIEM MAC DINH CUA TRINH DUYET (outline: auto), khong
   phai loi. No danh dau "ban dang o day" cho nguoi dieu huong bang ban
   phim - nguoi khong dung duoc chuot, nguoi khiem thi dung trinh doc man
   hinh. Xoa han di la trang mat kha nang su dung bang ban phim, khong dat
   WCAG 2.4.7; voi mot trang benh vien thi day khong phai chi tiet nho.

   VI VAY: giu vong tieu diem, chi thay khung den mac dinh bang mot vong
   xanh bo goc cho khop voi thiet ke.

   :focus-visible chu khong phai :focus - trinh duyet chi bat khi nguoi
   dung THAT SU dieu huong bang ban phim, bam chuot thi khong hien.
   ===================================================================== */

/* GOC RE: styles.css co luat  button:focus { outline: auto 5px }  - dung
   :focus thuong nen BAM CHUOT cung hien vong, khong rieng ban phim. Do la
   thoi quen cu tu thoi chua co :focus-visible. Chi tat khi KHONG phai dieu
   huong ban phim, con lai giu nguyen. */
button:focus:not(:focus-visible),
.pi-tab:focus:not(:focus-visible),
.staff-tab:focus:not(:focus-visible),
.specialty-tab:focus:not(:focus-visible) {
    outline: none;
}

/* Dieu huong bang ban phim: vong xanh bo goc, thay cho khung den mac dinh. */
.pi-tab:focus-visible,
.staff-tab:focus-visible,
.specialty-tab:focus-visible {
    outline: 2px solid #007a4d;
    outline-offset: 3px;
    border-radius: 8px;
}