@font-face {
    font-family: 'NunitoSans';
    src: url('../bw_font/NunitoSans.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

:root {
    --container: 1640px;
    --brand-green: #006940;
    --brand-green-700: #006940;
    --brand-green-800: #006940;
    --brand-text: #0b1220;
    --cta: #f44336;
    --cta-700: #c62828;
    --cta-800: #006940;
    --line: #999999;
    --muted: #2d2d2d;
    --white: #fff;
    --bg: #fff;
    --radius: 12px;
    --shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    --shadow-cta: 0 10px 22px rgba(229, 57, 53, 0.35);
    --h-header: 100px;
    --font-body: 'NunitoSans';
    --accent: #9333ea;
    --gold: #f2c14e;
    --text-color: #2d2d2d;
    --facility-tool-bar: #fff8f5;
    --facility-red: #c1141f;
    --facility-yellow: #d6982f;
    --facility-green: #28a745;
    --facility-details-register: #28a745;
    --hospital-register-background: #e6f4ee;
    --about-us-content-bg: #28a745;
    --about-us-content-text: #fafafa;
    --infastructure-bg: #f5f5f5;
    --hospital-system-active: #51be9d;
    --place-holder: #e0e0e0;
    --bg-cert: #eaf5f0;
    --border-popup: #319e95;
    --background-border-mobile-timeline: #b8b8b8;
    --read-more-color: #5c5c5c;
    --border-card: #a5d6a7;
    --category-color: #28a745;
    --detail-color: #676869;
    --seach-color: #ffb74d;
    --details-text-color: #5b5b5b;
    --details-text-collapse-color: #313131;
    --border-color-contact-us: #ffc107;
    --bg-color-contact-us: #fff8f5;
    --bg-color-card-contact-us: #daedd5;
    --bg-border-color: #e0e0e0;
    --bg-color-contact-mobile: #ffb74d;
    --border-color-contact: #a5d6a7;
    --text-details-job-color: #666666;
    --text-color-job: #111921;
    --background-history: #f5f6f7;
    --border-specialist-doctor: #e6f4ee;
    --border-line-new-details: #f4f4f4;
    --background-text-speciality-details: #e6f4ee;
    --bg-color-contact-info-mobile: #f5f5f5;
    --bg-color-contact-info-number-mobile: #a5d6a7;
    --bg-color-border-card-speciality: #e0e0e0;
    --bg-color-button-facility: #ed1926;
    --bg-color-button-red: #ed1926;
    --bg-color-button-red-hover: #006940;
}
.mbar {
    display: none;
}
.mnav {
    display: none;
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--brand-text);
    background: var(--bg);
    font-size: 16px;
}

#__next {
    overflow-x: clip;
    max-width: 100vw;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
p {
    font-size: 16px;
    margin: 0px;
    padding: 0px;
}
.container {
    width: min(var(--container), 92vw);
    margin-inline: auto;
}
@media (min-width: 1024px) {
    .container {
        min-width: var(--container);
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}
.site-header__inner {
    /* border-bottom: 1px solid var(--line); */
    background: #fff;
}
.site-header.is-scrolled .site-header__inner {
    box-shadow: var(--shadow);
    border-bottom-color: transparent;
}

.topbar {
    height: var(--h-header);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    font-family: var(--font-body);
}
.logo {
    display: flex;
    align-items: center;
    gap: 14px;
}
.logo img {
    height: 100px;
    width: auto;
}
.logo__sub {
    font-size: 12px;
    font-weight: 700;
    color: #c0362c;
    letter-spacing: 0.02em;
    margin-top: 2px;
}

.topbar__center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.search {
    position: relative;
    min-width: 200px;
    max-width: 220px;
    flex: 0 1 420px;
    display: flex;
    align-items: center;
}
.search__input {
    flex: 1;
    height: 38px;
    padding: 5px 15px;
    border: 1px solid #005233;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    color: #1a1d27;
}
.search__btn img {
    width: 22px;
    height: 22px;
}
/* .search__btn:hover {
    background: #f7faf9;
} */
.search__input::placeholder {
    color: #9aa7b4;
}
.search__btn {
    width: 38px;
    height: 38px;
    margin-left: -42px;
    border: none;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.contacts {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--muted);
    font-weight: 600;
    font-family: var(--font-body);
}
.contacts__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.contacts__sep {
    width: 2px;
    height: 18px;
    background: var(--line);
}
.ico {
    width: 18px;
    height: 18px;
    color: #6b768b;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-color-button-red, #ed1926);
    color: #fff;
    border-radius: 999px;
    padding: 12px 20px;
    font-family: var(--font-body);
    height: 48px;
}
.cta:hover {
    background: var(--cta-800);
    border: #fff solid 1px;
}
.cta .ico {
    color: #fff;
}

.navbar {
    background: var(--brand-green);
    color: #fff;
    font-family: var(--font-body);
    display: block;
}
.navbar__inner {
    height: 60px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
.navmenu {
    display: flex;
    gap: 36px;
    align-items: center;
}
.navmenu__link {
    display: flex; /* giữ icon + text cùng hàng */
    align-items: center;
    gap: 8px;
    color: #fff;
    opacity: 0.95;
    font-size: 20px;
    height: 60px;
    /* padding: 0px 3px 0px 3px; */
    padding: 0px 22px;
    border: none;
    outline: none;
}
.navmenu__link:hover {
    background: #e6f4ee;
    color: #006940; /* màu xanh đậm để chữ nổi bật trên nền trắng */
    height: 61px;
}
.navmenu__link:hover .caret {
    filter: invert(34%) sepia(98%) saturate(452%) hue-rotate(105deg) brightness(95%) contrast(90%);
    /* hoặc đơn giản là đổi fill nếu SVG inline */
}
.caret {
    /* width: 16px; */
    /* height: 16px; */
    color: #fff;
    opacity: 0.9;
}

.navmenu__item {
    position: relative;
    height: 60px;
    top: -1px;
}

/* Hide the submenu by default */
.navmenu__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    background: #e6f4ee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border-top-right-radius: unset;
    border-top-left-radius: unset;
    /* padding: 10px 0; */
    z-index: 10;
}

/* Show the submenu on hover */
.navmenu__item:hover .navmenu__submenu {
    display: block;
}

.navmenu__item.is-active {
    background: #e6f4ee;
}

.navmenu__item.is-active > .navmenu__link {
    color: var(--brand-green);
}

/* Style the submenu links */
.navmenu__sublink {
    display: block;
    padding: 8px 16px;
    color: var(--brand-green);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: unset;
}

.navmenu__sublink:hover {
    background: #f0f0f0;
    color: #006940;
}

.langs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.flag {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.15);
    /* border: 1px solid rgba(255, 255, 255, 0.35); */
    font-size: 16px;
    opacity: 0.6;
    cursor: pointer;
}
.flag.active {
    opacity: 1;
}

.site-footer {
    background: var(--brand-green);
    color: #fff;
    font-family: var(--font-body);
}
.footer__top {
    padding: 36px 0 24px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    gap: 28px;
    align-items: start;
}

.footer__logo {
    height: 56px;
    width: auto;
    margin-bottom: 14px;
    margin-left: -17px;
}
.footer__company {
    margin: 0 0 18px;
    font-size: 20px;
}
.footer__info p {
    margin: 0 0 6px;
    opacity: 0.95;
}
.footer__socials {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.sbtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.sbtn img {
    width: 20px;
    height: 20px;
}

.footer__title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 8px 0 12px;
}
.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.footer__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    opacity: 0.95;
    font-size: 14px;
}
.footer__list a:hover {
    opacity: 1;
}
.bullet {
    width: 14px;
    height: 14px;
    opacity: 0.95;
}

.footer__app {
    justify-self: end;
    text-align: center;
}
.footer__qr {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 8px auto 12px;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
}
.footer__badges {
    display: grid;
    gap: 10px;
    justify-items: center;
}
.footer__badges img {
    max-width: 170px;
    height: auto;
}
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer__bottom__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}
.footer__credit {
    opacity: 0.9;
}

.hero {
    position: relative;
    min-height: clamp(520px, 62vw, 820px);
    display: grid;
    /* align-items: center; */
    overflow: hidden;
    isolation: isolate;
    --hero-focal-x: 72%;
    --hero-focal-y: 30%;
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    object-fit: cover;
    object-position: var(--hero-focal-x) var(--hero-focal-y);
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* background: radial-gradient(1200px 600px at 20% 40%, rgba(0, 0, 0, 0.18), transparent 60%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.12)); */
}

.hero__card {
    width: min(760px, 92vw);
    height: min(480px, 92vw);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(10, 31, 68, 0.16);
    position: relative;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: clamp(18px, 3vw, 28px) clamp(22px, 3.2vw, 36px);
    padding-bottom: clamp(43px, 9vw, 43px);
    padding-top: 43px;
    top: 122px;
}

.hero__eyebrow {
    display: block;
    color: #fff;
    opacity: 0.92;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 25px;
    /* display: none; */
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 22px;
}
.hero__title {
    margin: 0 0 25px;
    font-weight: 400;
    line-height: 1.05;
    /* font-size: clamp(40px, 5.4vw, 58px); */
    font-size: 58px;
    /* font-family: 'VNM Sans Std', sans-serif; */
    color: #fff;
}
.hero__title--sub {
    font-weight: 400;
    font-size: clamp(36px, 4.8vw, 58px);
    /* font-family: 'VNM Sans Std', sans-serif; */
}
.hero__accent {
    color: var(--cta);
    letter-spacing: 0.01em;
    display: inline-block;
    position: relative;
    margin-left: 0.15em;
}
.hero__underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.22em;
    height: 26px;
    width: 100%;
    transform: scaleX(1.06);
    stroke: #ff8a00;
    stroke-width: 7.5;
    stroke-linecap: round;
    fill: none;
    top: 63px;
}
.hero__card.container {
    margin-right: auto;

    margin-left: max(4vw, calc((100vw - var(--container)) / 2));
}

.hero__lead {
    margin: 14px 0 18px;
    color: #fff;
    opacity: 0.7;
    max-width: 56ch;
    font-weight: 500;
    font-size: 22px;
}
.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--bg-color-button-red, #ed1926);
    color: #fff;
    padding: 8px 10px;
    border-radius: 28px;
    box-shadow: 0 12px 28px rgba(237, 25, 38, 0.35);
    position: absolute;
    left: clamp(20px, 3vw, 36px);
    bottom: clamp(18px, 3vw, 43px);
    font-weight: 600;
    font-size: 16px;
    width: 220px;
}
.hero__cta .icon {
    width: 32px;
    height: 32px;
}
.hero__cta:hover {
    background: var(--cta-800);
    border: #fff solid 1px;
}

.hero__actions {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(52px, 4vw, 52px);
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 32px 32px;
    border-radius: 16px;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.15);
    width: min(1080px, 94vw);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero__tabs {
    display: flex;
    gap: 25px;
    flex-wrap: nowrap;
    margin: 0px 26px;
}
.pill {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid #cfe3d9;
    background: #fff;
    color: var(--brand-green);
    white-space: nowrap;
    text-transform: uppercase;
}
.pill.is-active {
    background: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
}

.hero__search {
    flex: 1;
    display: flex;
    align-items: center;
    height: 46px;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    padding: 0 18px;
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.1);
    min-width: 280px;
}
.hero__input {
    flex: 1;
    height: 44px;
    border: none;
    outline: none;
    padding: 0 12px;
    font-size: 16px;
    color: var(--brand-text);
}
.hero__input::placeholder {
    color: #9aa7b4;
}
.hero__btn {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
}
.hero__btn .icon {
    width: 22px;
    height: 22px;
}

.hero__dots {
    position: static;
    margin: 8px auto 0;
    transform: none;
}
.hero__dots .dot {
    width: 28px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}
.hero__dots .dot.is-active {
    background: rgba(0, 0, 0, 0.25);
}

.stats {
    background: #e6f4ec;
    padding: clamp(10px, 6vw, 0px) 0;
}

.stats__grid {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
    grid-template-rows: auto;
    /* gap: 30px; */
    align-items: center;
    justify-items: center;
}

.stats__grid > div:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
}
.stats__grid > div:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
}
.stats__grid > div:nth-child(3) {
    grid-row: 1;
    grid-column: 3;
}
.stats__grid > div:nth-child(4) {
    grid-row: 1;
    grid-column: 4;
}
.stats__grid > div:nth-child(5) {
    grid-row: 1;
    grid-column: 5;
}
.stats__grid > div:nth-child(6) {
    grid-row: 1;
    grid-column: 6;
}
.stats__grid > div:nth-child(7) {
    grid-row: 1;
    grid-column: 7;
}

.stats__sep1 {
    /* width: 2px; */
    /* height: 72px; */
    /* background: var(--line); */
    /* opacity: 0.3; */
    display: none;
}

.stats__sep2 {
    /* width: 2px; */
    /* height: 72px; */
    /* background: var(--line); */
    /* opacity: 0.3; */
    display: none;
}

.stats__sep3 {
    /* width: 2px; */
    /* height: 72px; */
    /* background: var(--line); */
    /* opacity: 0.3; */
    display: none;
}

.stat {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 280px;
    text-align: left;
}

.stat__icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    border: 2px solid var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 105, 64, 0.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.stat__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.stat__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat__num {
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 52px;
    color: var(--brand-green);
    line-height: 1.2;
}

.stat__label {
    font-size: 20px;
    font-weight: 400;
    color: #2d2d2d;
    line-height: 1.4;
}

.why {
    margin-top: 30px;
    padding: clamp(28px, 6vw, 30px) 0;
    background: url('/bw_image/why-bg.svg') no-repeat center top/contain;
}
.why__title {
    text-align: center;
    margin: 0 0 clamp(20px, 3.2vw, 40px);
    font-weight: bold;
    font-size: clamp(26px, 3.2vw, 48px);
    color: var(--brand-text);
}
.why__title span {
    color: var(--brand-green);
}
.why__grid {
    display: grid;
    grid-template-columns: clamp(420px, 38vw, 420px) repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'photo doc   brand  cert'
        'photo cost  equip  cert'
        '.     iso   iso    iso';
    gap: 5px;
    align-items: stretch;
}

.why__grid > :nth-child(1) {
    grid-area: photo;
    margin-bottom: unset;
}
.why__grid > :nth-child(2) {
    grid-area: doc;
}
.why__grid > :nth-child(3) {
    grid-area: brand;
}
.why__grid > :nth-child(5) {
    grid-area: cost;
}
.why__grid > :nth-child(6) {
    grid-area: equip;
}

.why__grid > :nth-child(1) {
    overflow: hidden;
    border-radius: 18px;
}
.why__grid > :nth-child(1) img {
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.why__grid > * {
    background: #fff;
    border: 1px solid #eef2f4;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.why__grid article {
    padding: 20px 18px;
    display: grid;
    gap: 10px;
    align-content: start;
}
.why__grid article h3 {
    margin: 0;
    color: var(--brand-green);
}
.why__grid article p {
    margin: 0;
    line-height: 1.55;
    color: #485260;
}

.why__grid > :nth-child(4) {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 0px !important; */
    box-shadow: none !important;
}
.why__grid > :nth-child(4) img {
    max-width: 100%;
    max-height: 145px;
    height: auto;
    object-fit: contain;
}

.why__grid > :nth-child(6) {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: default;
}
.why__grid > :nth-child(6):hover,
.why__grid > :nth-child(6):focus-within {
    background: var(--brand-green);
    border-color: rgba(255, 255, 255, 0.2);
}
.why__grid > :nth-child(6):hover h3,
.why__grid > :nth-child(6):hover p,
.why__grid > :nth-child(6):focus-within h3,
.why__grid > :nth-child(6):focus-within p {
    color: #fff;
}
.why__grid > :nth-child(7) {
    padding: clamp(16px, 1.8vw, 22px);
}
.why__iso {
    grid-row: 2;
    padding: clamp(16px, 1.8vw, 22px);
    display: grid;
    gap: 10px;
}
.why__grid > article {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.why__grid > article:hover {
    background: var(--brand-green) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15) !important;
}

.why__grid > article:hover h3,
.why__grid > article:hover p {
    color: #fff !important;
}

.why__grid > :nth-child(4),
.why__grid > :nth-child(4):hover {
    background: #fff !important;
    cursor: default !important;
}

.why__more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.why__more-btn {
    display: inline-block;
    padding: 14px 28px;
    background: var(--brand-green);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); */
}

.why__more-btn:hover {
    background: #e6f4ee;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    color: var(--brand-green);
    border: 1px solid var(--brand-green);
}

.why__more-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.doctors {
    padding: 0px 10px 10px 10px;
    background: #f6f7f6;
    position: relative;
}
.doctors__head {
    position: relative;
    text-align: center;
    /* bottom: 60px; */
    padding-bottom: 22px;
}
.doctors__title {
    margin: 0 0 16px;
    font-weight: bold;
    font-size: clamp(28px, 3.2vw, 48px);
    color: #2d2d2d;
}
.doctors__title span {
    color: #006940;
}
.doctors__lead {
    color: #2d2d2d;
    font-size: 20px;
}

.doctors__nav {
    transform: none;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-bottom: 22px;
}
.navbtn {
    width: 40px;
    height: 40px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    padding: 0;
    cursor: pointer;
}
.bw_hover_next {
    background-image: url('/bw_image/btn-prev-enabled.svg');
}
.bw_hover_prev {
    background-image: url('/bw_image/btn-next-enabled.svg');
}
.bw_hover_next.swiper-button-disabled {
    background-image: url('/bw_image/btn-prev-disabled.svg');
}
.bw_hover_prev.swiper-button-disabled {
    background-image: url('/bw_image/btn-next-disabled.svg');
}

.doctors__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 5px;
}

@media (max-width: 1400px) {
    .doctors__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 1200px) {
    .doctors__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 900px) {
    .doctors__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 520px) {
    .doctors__grid {
        grid-template-columns: 1fr;
    }
    .doctors__title {
        padding-top: 30px;
        font-size: clamp(32px, 3.2vw, 32px);
    }
}

.doccard {
    display: grid;
    grid-template-rows: clamp(280px, 26vw, 320px) auto;
    border: 1px solid #a5d6a7;
    border-radius: 16px;
    background: #fff;
    /* box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); */
    overflow: hidden;
    /* transition: box-shadow 0.2s ease, transform 0.2s ease; */
    cursor: pointer;
    height: 100%;
}

.doccard__media {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
}
.doccard__media img {
    height: 100%;
    width: 100%;
    object-fit: cover !important;
    object-position: 50% 0;
}

.doccard__body {
    min-height: 0;
    padding: 14px 16px 16px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    row-gap: 10px;
    background: #e6f4ee;
}

.doccard__tag {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
    /* padding: 8px 14px 0px 0px; */
    color: #006940;
    font-size: 16px;
    font-weight: 500;
}

.doccard__name {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    color: #006940;
    text-transform: uppercase;
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden; */
}

.doccard__meta {
    margin: 0;
    color: #2d2d2d;
    font-size: 14px;
    line-height: 2;
    overflow: hidden;
}

.doccard__cta {
    justify-self: end;
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    background: #e6f4ee;
    color: #006940;
    border: 1px solid #319e95;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(3, 62, 36, 0.06);
    transition: all 0.18s ease;
    align-self: flex-end;
    cursor: pointer;
}
.doccard__cta .icon {
    width: 18px;
    height: 18px;
}

.doctors__more {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}
.doctors__more-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
}
/* .doctors__more-btn:hover {
    background: #0b8c5d;
} */
.doctor-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    /* box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06); */
    /* transition: transform 0.25s ease, box-shadow 0.25s ease; */
    contain: layout paint;
}

.doctor-card__media {
    aspect-ratio: 3/4;
    overflow: hidden;
}
.doctor-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.doctor-card__body {
    padding: 16px 18px 20px;
    display: grid;
    gap: 6px;
}
.doctor-card__rank {
    margin: 0;
    color: #7a8b97;
    font-weight: 800;
}
.doctor-card__name {
    margin: 0;
    color: var(--brand-green);
    font-weight: 900;
    font-size: 18px;
}
.doctor-card__title,
.doctor-card__spec {
    margin: 0;
    color: #485260;
    font-size: 14px;
}

@media (hover: hover) {
    .doccard {
        position: relative;
        overflow: hidden;
        /* transition: transform 0.25s ease, box-shadow 0.25s ease; */
    }
    .doccard:hover {
        transform: translateY(-4px);
        /* box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12); */
    }

    .doccard__media img {
        transition: transform 0.35s ease;
    }
    .doccard:hover .doccard__media img {
        transform: scale(1.03);
    }

    .doccard__overlay {
        position: absolute;
        inset: 0;
        display: grid;
        align-content: end;
        gap: 10px;
        padding: 16px;
        color: #0b1220;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(12px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }
    .doccard:hover .doccard__overlay {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        background-color: #e6f4ee;
    }

    .doccard:hover .doccard__cta:hover {
        background-color: #fff;
        border-radius: 60px;
    }

    .doccard__overlay h4 {
        margin: 0 0 4px;
        font-size: 14px;
        font-weight: 600;
        /* color: var(--brand-green); */
        color: #2d2d2d;
    }
    .doccard__overlay ul {
        margin: 0;
        padding-left: 18px;
        font-size: 14px;
        line-height: 1.45;
        color: #374151;
        max-height: 150px;
        overflow: hidden;
    }

    .doccard__cta--solid {
        justify-self: start;
        pointer-events: auto;
        background: var(--brand-green);
        color: #fff;
        border-color: var(--brand-green);
        box-shadow: 0 8px 18px rgba(0, 105, 64, 0.18);
    }
    .doccard__cta--solid:hover {
        background: #008451;
        border-color: #008451;
    }
}

/* @media (hover: none) {
    .doccard__overlay {
        display: none !important;
    }
} */
.doccard__overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    display: grid;
    align-content: end;
    z-index: 2;
    background: #f6f7f6;
    /* height: 70%; */
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
}
.doccard:hover .doccard__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.doccard__ov-wrap {
    display: grid;
    gap: 5px;
    padding: 5px;
    max-height: 100%;
    overflow: auto;
    background: #e6f4ee;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    /* border: 1px solid #a5d6a7; */
    padding: 14px 16px 16px;
}
.doccard__overlay-title {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 800;
    color: #0b1220;
}
.doccard__list {
    margin: 0 0 6px;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    font-size: 15px;
    color: #1f2937;
}

.doccard__overlay .doccard__cta {
    justify-self: end;
}

.svc {
    padding-top: clamp(24px, 6vw, 40px);
    padding-bottom: clamp(24px, 6vw, 43px);
}

.svc__head {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 16px;
    margin-bottom: 18px;
}
.svc__title {
    margin: 0;
    font-weight: bold;
    font-size: clamp(28px, 3.6vw, 48px);
    color: #006940;
}
.svc__title span {
    color: #2d2d2d;
}
.svc__lead {
    margin: 0.25rem 0 0;
    color: #2d2d2d;
    font-size: 20px;
}
.svc__left {
    display: grid;
    gap: 6px;
}
.svc__all {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-green);
    font-weight: 600;
    padding: 8px 0;
    justify-self: flex-end;
}
.svc__all .icon {
    width: 18px;
    height: 18px;
}

.svc__scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 420px);
    gap: 20px;
    overflow-x: auto;
    padding: 6px 0 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.svc__scroller::-webkit-scrollbar {
    height: 0;
}

.svc-card {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 44%, rgba(0, 0, 0, 0.98) 80%);
    cursor: pointer;
    margin-bottom: 54px;
}
.svc-card__media {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
    border-radius: 0;
}
.svc-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.svc-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 105, 64, 0.15) 28%, rgba(0, 105, 64, 0.72) 100%);
    z-index: 0;
    pointer-events: none;
}

.svc-card__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-content: end;
    padding: 16px;
    background: transparent !important;
    /* grid-template-rows: auto 1fr; */
}

.svc-card__title {
    margin: 0;
    color: #dcfffd;
    font-weight: bold;
    font-size: clamp(16px, 1.6vw, 20px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.svc-card__more {
    /* overflow: scroll; */
    /* overflow: auto; */
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    will-change: max-height, opacity;
    margin-top: 10px;
    font-size: clamp(16px, 1.6vw, 16px);
    color: #dcfffd;
}

.svc-card:hover .svc-card__content {
    align-content: start;
    background: #006940 !important;
    grid-template-rows: auto 1fr;
}

.svc-card:hover .svc-card__more {
    max-height: 220px;
    opacity: 1;
    color: #dcfffd;

    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto 1fr;
    gap: 16px;
}

.svc-card:hover .svc-card__more :first-child {
    grid-column: 1 / span 2;
    grid-row: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.svc-card:hover .svc-card__more :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}
.svc-card:hover .svc-card__more :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

.svc-card__list {
    margin: 6px 0 10px;
    padding-left: 18px;
    color: #eaf6ef;
    font-weight: 600;
    line-height: 1.45;
}
.svc-card__list li {
    margin: 0 0 4px;
}

.svc-card__actions {
    display: flex;
    justify-content: flex-end;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
}
.btn .icon {
    width: 18px;
    height: 18px;
}
.btn--book {
    background: var(--brand-green);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 105, 64, 0.22);
}

.svc-card:hover .btn--book {
    background: var(--brand-green);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(0, 105, 64, 0.22);
    transform: none;
}

.btn--book:hover {
    background: #008451;
}

.svc__progress {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.svc__bar {
    width: 120px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-green) 0 60%, #d9e7df 60% 100%);
    opacity: 0.9;
}

.fac {
    padding: clamp(20px, 6vw, 56px) 0;
}

.fac__head {
    display: grid;
    gap: 31px;
    justify-items: center;
    text-align: center;
    margin-bottom: clamp(16px, 3vw, 33px);
}
.fac__title {
    margin: 0;
    font-weight: bold;
    font-size: clamp(28px, 4vw, 48px);
    color: var(--brand-text);
}
.fac__title span {
    color: var(--brand-green);
}
.fac__tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.fac__tabs .pill {
    height: 40px;
    padding: 0 16px;
    font-weight: 800;
    cursor: pointer;
}

.fac__grid {
    display: grid;
    grid-template-columns: clamp(260px, 24vw, 360px) 1fr;
    gap: clamp(14px, 2vw, 22px);
    align-items: start;
}

.fac__panel {
    background: #e7f2ec;
    color: #319e95;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;

    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 70px 10px 10px 10px;
    height: 100%;
}
.fac__panel-inner {
    padding: clamp(16px, 2.4vw, 26px);
    display: grid;
    align-content: start;
    gap: 14px;
}
.fac__eyebrow {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #122138;
}
.fac__panel-title {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    color: #319e95;
}
.btn .icon {
    width: 18px;
    height: 18px;
}
.btn--ghost {
    border: 2px solid #ea4335;
    color: #ea4335;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.btn--ghost:hover {
    background: #fff5f4;
}

.fac__gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: clamp(8px, 0.8vw, 13px);

    --row: 218px;
    grid-auto-rows: var(--row);
    align-items: stretch;
}
.fac__panel {
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 115px 10px 10px 10px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: #e6f4ec;
    color: #319e95;
    /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); */
    height: 100%;
}
.fac__eyebrow {
    font-weight: 400;
    letter-spacing: 0.08em;
    font-size: 30px;
    margin: 0;
    color: #122138;
}
.fac__panel-title {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.1;
    font-weight: bold;
    text-transform: uppercase;
    color: #319e95;
}
.fac__cta {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: 20px;
    padding: 11px 25px;
    font-size: 16px;
    font-weight: 600;
    color: #ed1926; /* text đỏ */
    background: #fff; /* nền trắng */
    border: 1px solid #ed1926; /* viền đỏ */
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    margin-top: auto; /* Đẩy xuống cuối panel */
    margin-bottom: 92px; /* Tạo khoảng cách nhỏ với bottom */
    line-height: 1.5;
}
.fac__panel .cta .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #006940; /* màu xanh thương hiệu */
}

.fac__panel .cta .icon img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.fac__cta:hover {
    background: #ed1926;
    transform: translateY(-2px);
    color: #fff;
}

.fac__cta .arrow-svg {
    width: 30px;
    height: 30px;
}

.fac__cta .arrow-svg .arrow-circle {
    transition: fill 0.2s;
    fill: #006940;
}

.fac__cta:hover .arrow-svg .arrow-circle {
    fill: #fff; /* Change to your desired hover color */
}

.fac__cta:hover .arrow-svg .arrow-path {
    stroke: #006940; /* Change to your desired hover color */
}

fac__gallery .g {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.fac__gallery .g img {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.25s ease;
}
.fac__gallery .g:hover img {
    transform: scale(1.02);
}

.fac__gallery figure,
.fac__gallery .g {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background-clip: padding-box;
}
.g-b {
    grid-column: 2 / span 2;
    grid-row: 1 / span 1;
}
.g-cg {
    grid-column: 4 / span 1;
    grid-row: 1 / span 2;
}
.g-d {
    grid-column: 5 / span 1;
    grid-row: 1 / span 1;
}
.g-e {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}
.g-f {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}
.g-i {
    grid-column: 5 / span 1;
    grid-row: 2 / span 1;
}
.g-h {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
}
.g-j {
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
}
.g-k {
    grid-column: 4 / span 2;
    grid-row: 3 / span 1;
}

/* About Us */
/* ===== Hero ===== */
.contact-hero {
    position: relative;
    overflow: hidden;
    background: #e9f5ef;
    border-bottom: 1px solid var(--border);
}
.contact-hero__img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}
.contact-hero__title {
    position: absolute;
    inset: auto 0 28px 0;
    text-align: center;
    color: var(--brand-green);
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(24px, 2.6vw, 42px);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.crumbs-bar {
    width: 100%;
    border-bottom: 1px solid var(--line); /* full line */
}

.crumbs {
    max-width: var(--container);
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
}

.crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-green);
    font-weight: 600;
    text-decoration: none;
}

.crumbs a:hover {
    text-decoration: underline;
}

.crumbs__sep img {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.crumbs [aria-current='page'] {
    color: var(--brand-green);
    font-weight: 700;
}
.license {
    display: flex;
    align-items: center; /* canh giữa icon với text */
    gap: 10px; /* khoảng cách icon – text */
    font-size: 14px;
    margin-bottom: 16px;
    padding-top: 10px;
}

.card-info .license-icon {
    flex-shrink: 0; /* giữ nguyên kích thước, không co lại */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d7f2e5; /* nền xanh nhạt */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-info .license-icon img {
    width: 18px;
    height: 18px;
    display: block;
}
/* ===== Page grid ===== */
.contact-page {
    max-width: var(--container);
    margin: 0 auto;
    padding: 28px 0 64px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--gap);
    align-items: start;
    overflow: visible;
}
.card-info {
    background: var(--white);
    border: 1px solid var(--gold); /* viền vàng */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
}
.divider {
    border-top: 1px solid var(--line);
    margin: 12px 0 20px;
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Cards ===== */
.card {
    background: var(--card);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: 30px;
}

/* ===== Info block ===== */
.org {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.org__name {
    font-size: 32px;
    font-weight: 900;
    color: var(--brand-green-700);
    letter-spacing: 0.01em;
}
.org__sub {
    font-size: 16px;
    color: var(--muted);
}

.list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 0px 0 0 0;
    padding: 0;
    list-style: none;
}
.item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
}
.item__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(60% 60% at 30% 30%, #c9f3dc 0%, #b2ecd0 100%);
    color: var(--brand-700);
    border: 1px solid #d6f3e3;
    font-weight: 700;
    font-size: 18px;
}
.item__text {
    margin: 0;
}
.item__text b {
    color: #111827;
}
.item a {
    color: var(--brand-700);
    text-decoration: none;
}
.item a:hover {
    text-decoration: underline;
}

/* ===== Form ===== */

.form__title {
    font-size: 32px;
    font-weight: 800;
    color: var(--brand-green);
    margin: 0 0 10px;
}

.card--form p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
}

.input,
.textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    color: var(--brand-text);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input::placeholder,
.textarea::placeholder {
    color: #aaa;
    font-size: 14px;
}

.input:focus,
.textarea:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(0, 105, 64, 0.2);
    outline: none;
}

.textarea {
    min-height: 100px;
    resize: vertical;
}

.req {
    color: var(--cta);
}

.card--form .btn-submit {
    margin-top: 14px;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(180deg, var(--cta) 0%, var(--cta-700) 100%);
    box-shadow: var(--shadow-cta);
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
}

.card--form .btn-submit:hover {
    filter: brightness(1.05);
}

.card--form .btn-submit:active {
    transform: translateY(1px);
}
.card--form--over-hero {
    margin-top: -90px; /* kéo lên chồng hero như ảnh */
    backdrop-filter: saturate(1.1);
}
/* Kích thước cố định để canh overlap ảnh */
/* ==== Tham số kích thước ảnh ==== */
:root {
    --h-img-w: 220px;
    --h-img-h: 150px;
    --h-gap: 20px; /* khoảng cách ảnh ↔ nội dung */
    --h-pad: 24px; /* padding ngoài card */
    --h-radius: 24px;
}

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

/* nền pill xanh nhạt chạy phía sau, bo góc lớn */
.hospital::before {
    content: '';
    position: absolute;
    inset: 0 var(--h-pad) 0 var(--h-pad);
    border-radius: var(--h-radius);
    background: rgba(0, 105, 64, 0.1);
    border: 1px solid rgba(0, 105, 64, 0.18);
    box-shadow: var(--shadow);
    z-index: 0;
}

/* ==== ẢNH – lồi bên trái, CĂN GIỮA chiều cao card ==== */
.hospital__media {
    position: absolute;
    left: var(--h-pad);
    top: 50%;
    transform: translateY(-50%);
    width: var(--h-img-w);
    height: var(--h-img-h);
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 2; /* nằm trên nền pill */
    background: transparent;
}
.hospital__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==== NỘI DUNG ==== */
.hospital__body {
    position: relative;
    z-index: 1; /* trên nền pill */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 84px; /* chừa chỗ cho số 01 */
}

.hospital__meta {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

/* ==== DÒNG GIẤY PHÉP (icon + text cùng hàng, không rơi dòng) ==== */
.hospital__license > img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    padding: 6px;
    background: rgba(0, 105, 64, 0.12);
    border: 1px solid transparent;
    display: block;
}
/* Link “Xem bản đồ” */
.hospital__map {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-green);
    text-decoration: none;
}
.hospital__map:hover {
    text-decoration: underline;
}

/* Số thứ tự góc phải dưới */
.hospital__index {
    position: absolute;
    right: calc(var(--h-pad) + 2px);
    bottom: 10px;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: rgba(0, 105, 64, 0.28);
    z-index: 1;
}

/* Khoảng cách giữa các card */
.hospital + .hospital {
    margin-top: 18px;
}

/* ==== Responsive: bỏ overlap khi màn nhỏ ==== */
@media (max-width: 700px) {
    :root {
        --h-img-w: 100%;
        --h-img-h: 180px;
    }
    .hospital {
        padding: 14px;
        min-height: initial;
    }
    .hospital::before {
        left: 14px;
        right: 14px;
    }
    .hospital__media {
        position: static;
        transform: none;
        width: 100%;
        height: var(--h-img-h);
        margin-bottom: 10px;
    }
    .hospital__body {
        padding-right: 0;
    }
    .hospital__index {
        right: 14px;
        font-size: 36px;
    }
}
/* ==== Tham số kích thước ảnh ==== */
:root {
    --h-img-w: 220px;
    --h-img-h: 150px;
    --h-gap: 20px; /* khoảng cách ảnh ↔ nội dung */
    --h-pad: 24px; /* padding ngoài card */
    --h-radius: 24px;
}

/* nền pill xanh nhạt chạy phía sau, bo góc lớn */
.hospital::before {
    content: '';
    position: absolute;
    inset: 0 var(--h-pad) 0 var(--h-pad);
    border-radius: var(--h-radius);
    background: rgba(0, 105, 64, 0.1);
    border: 1px solid rgba(0, 105, 64, 0.18);
    box-shadow: var(--shadow);
    z-index: 0;
}

/* ==== ẢNH – lồi bên trái, CĂN GIỮA chiều cao card ==== */
.hospital__media {
    position: absolute;
    left: var(--h-pad);
    top: 50%;
    transform: translateY(-50%);
    width: var(--h-img-w);
    height: var(--h-img-h);
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 2; /* nằm trên nền pill */
    background: transparent;
}
.hospital__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==== NỘI DUNG ==== */
.hospital__body {
    position: relative;
    z-index: 1; /* trên nền pill */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 84px; /* chừa chỗ cho số 01 */
}

.hospital__meta {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

/* ==== DÒNG GIẤY PHÉP (icon + text cùng hàng, không rơi dòng) ==== */
.hospital__license {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    font-size: 14px;
    color: var(--brand-text);
}
.hospital__license > img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    padding: 6px;
    background: rgba(0, 105, 64, 0.12);
    border: 1px solid transparent;
    display: block;
}
.hospital__license strong {
    font-weight: 800;
}

/* ==== LIST các dòng info (dùng chính class .item của bạn) ==== */
.hospital .hospital__list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hospital .item {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Số thứ tự góc phải dưới */
.hospital__index {
    position: absolute;
    right: calc(var(--h-pad) + 2px);
    bottom: 10px;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: rgba(0, 105, 64, 0.28);
    z-index: 1;
}

/* ==== Responsive: bỏ overlap khi màn nhỏ ==== */
@media (max-width: 700px) {
    :root {
        --h-img-w: 100%;
        --h-img-h: 180px;
    }
    .hospital {
        padding: 14px;
        min-height: initial;
    }
    .hospital::before {
        left: 14px;
        right: 14px;
    }
    .hospital__media {
        position: static;
        transform: none;
        width: 100%;
        height: var(--h-img-h);
        margin-bottom: 10px;
    }
    .hospital__body {
        padding-right: 0;
    }
    .hospital__index {
        right: 14px;
        font-size: 36px;
    }
}
/* ---- Params (đúng tỉ lệ mockup) ---- */
:root {
    --h-img-w: 260px; /* rộng ảnh */
    --h-img-h: 180px; /* cao ảnh */
    --h-pad-x: 28px;
    --h-pad-y: 22px;
    --h-gap: 22px; /* ảnh ↔ nội dung */
    --h-pill-r: 24px; /* bo góc pill */
}

/* ---- Card container (không nền, nền được vẽ bằng ::before) ---- */
.hospital {
    position: relative;
    min-height: 375px;
    padding: var(--h-pad-y) var(--h-pad-x) var(--h-pad-y) calc(var(--h-pad-x) + var(--h-img-w) + var(--h-gap));
}

/* NỀN pill xanh nhạt chạy phía sau, bo góc lớn, có viền rất mỏng */
.hospital::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px; /* cho “viên thuốc” lộ 2 góc trái như mockup */
    right: 0px;
    border-radius: var(--h-pill-r);
    background: #daedd5; /* xanh nhạt */
    border: 1px solid rgba(0, 105, 64, 0.18);
    box-shadow: var(--shadow);
    z-index: 0;
}

/* ---- ẢNH: lồi bên trái & CĂN GIỮA theo chiều cao card ---- */
.hospital__media {
    position: absolute;
    z-index: 2;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 286px;
    height: 286px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    background: transparent;
}
.hospital__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Nội dung ---- */
.hospital__body {
    position: relative;
    z-index: 1; /* nằm trên pill */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 88px; /* chừa chỗ cho số index bên phải */
}
.hospital__title {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--brand-green);
    font-weight: 900;
    font-size: 29px;
}
.hospital__meta {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}

/* ---- Dòng GIẤY PHÉP: icon + text + NGÀY ở cạnh phải (đúng thiết kế) ---- */
.hospital__license {
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    column-gap: 10px;
    font-size: 14px;
    color: var(--brand-text);
}
.hospital__license > img {
    /* icon giấy phép */
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 50%;
    padding: 6px;
    background: rgba(0, 105, 64, 0.12);
}
.hospital__license .license__text strong {
    font-weight: 800;
}
.hospital__license .license__date {
    white-space: nowrap;
    font-weight: 800;
}

/* ---- Danh sách hotline/email/địa chỉ (dùng lại .item của bạn) ---- */
.hospital__list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hospital__list .item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hospital__list .item__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    border: 1px solid var(--brand-green);
    background: #fff;
}
.hospital__list .item__icon img {
    width: 16px;
    height: 16px;
    display: block;
}
.hospital__list .item__text {
    margin: 0;
    font-size: 15px;
    color: var(--brand-text);
}
.hospital__list .item__text b {
    color: var(--brand-green);
}

/* ---- Link bản đồ ---- */
.hospital__map {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-green);
    text-decoration: none;
}
.hospital__map:hover {
    text-decoration: underline;
}

/* ---- Số thứ tự 01/02/03 góc phải dưới của pill ---- */
.hospital__index {
    position: absolute;
    right: calc(var(--h-pad-x) + 4px);
    bottom: 10px;
    z-index: 1;
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    color: rgba(0, 105, 64, 0.28);
}

/* ---- Khoảng cách giữa các card (một cơ chế duy nhất) ---- */
.hospital + .hospital {
    margin-bottom: 80px !important;
}

/* ---- Responsive: bỏ overlap khi màn nhỏ ---- */
@media (max-width: 700px) {
    .hospital {
        padding: 14px;
        min-height: initial;
    }
    .hospital::before {
        left: 14px;
        right: 14px;
    }
    .hospital__media {
        position: static;
        transform: none;
        width: 100%;
        height: 180px;
        margin-bottom: 10px;
    }
    .hospital__body {
        padding-right: 0;
    }
    .hospital__index {
        right: 14px;
        font-size: 36px;
    }
}
/* 1) Banner là context để định vị tuyệt đối */
.contact-hero {
    position: relative;
    isolation: isolate; /* đảm bảo z-index ổn định */
}

/* 2) Ảnh & tiêu đề trên banner */
.contact-hero__img {
    width: 100%;
    height: auto;
    display: block;
}
.contact-hero__title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: var(--brand-green);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 56px);
    z-index: 2;
    text-align: center;
}

/* 3) FORM CHỒNG LÊN BANNER – góc phải, căn giữa dọc */
.contact-hero > .card--form {
    position: fixed !important;
    top: 65%;
    transform: translateY(-50%);
    /* bám mép phải của vùng nội dung (container) + 16px đệm */
    right: max(0px, calc((100vw - var(--container)) / 2 + -104px));
    width: 360px;
    max-width: min(360px, calc(100vw - 32px));
    z-index: 3;
    /* giữ style thẻ */
    background: var(--white);
    border: 1px solid #f0f0f0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
}
/* 4) Responsive: dưới 1100px – đưa form xuống dưới banner */
@media (max-width: 1100px) {
    .contact-hero > .card--form {
        position: static !important;
        transform: none !important;
        right: auto !important;
        width: auto;
        max-width: 100%;
        margin: 12px 16px 0;
    }
    .contact-hero__title {
        top: auto;
        bottom: 12px;
        transform: translateX(-50%);
        font-size: clamp(24px, 5vw, 36px);
    }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .fac__gallery {
        grid-template-columns: repeat(2, 1fr);
        --row: 180px;
        grid-template-rows: auto repeat(6, var(--row));
        gap: 0px;
    }
    .fac__panel {
        grid-column: 1 / span 2;
        grid-row: 1 / span 1;
        text-align: center;
        /* padding: 19px; */
        padding: unset;
        padding-top: 19px;
        padding-inline: 4vw;
        border-radius: unset;
    }
    .g-b {
        grid-column: 1 / span 2 !important;
        grid-row: 2 / span 1;
    }
    .g-cg {
        grid-column: 1 / span 1;
        grid-row: 3 / span 2;
    }
    .g-d {
        grid-column: 2 / span 1;
        grid-row: 3 / span 1;
    }
    .g-e {
        grid-column: 2 / span 1;
        grid-row: 4 / span 1;
    }
    .g-f {
        grid-column: 1 / span 1;
        grid-row: 5 / span 1;
    }
    .g-i {
        grid-column: 2 / span 1;
        grid-row: 5 / span 1;
    }
    .g-h {
        grid-column: 1 / span 1;
        grid-row: 6 / span 1;
    }
    .g-j {
        grid-column: 2 / span 1;
        grid-row: 6 / span 1;
    }
    .g-k {
        grid-column: 1 / span 2;
        grid-row: 7 / span 1;
    }
    .fac__eyebrow {
        font-size: 20px;
        font-weight: 400;
        text-align: left;
    }
    .fac__panel-title {
        font-size: clamp(32px, 3.6vw, 32px);
        font-weight: 800;
        text-align: left;
    }
    .fac__cta {
        margin-bottom: 21px; /* Tạo khoảng cách nhỏ với bottom */
        align-self: flex-start;
        padding: 8px 12px;
        font-size: 16px;
    }
    .fac__title {
        font-size: clamp(32px, 4vw, 32px);
        margin-inline: 4vw;
    }
    .fac__cta .arrow-svg {
        width: 24px;
        height: 24px;
    }
}
/* 1) Giảm khoảng cách của thẻ trên */
.card--info {
    margin-bottom: 12px !important;
    padding: 24px 24px;
}
.hospital-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* chỉnh 8–12px tùy mockup */
    margin-top: 0 !important; /* bỏ mọi margin-top cũ */
    padding-top: 0;
    display: flow-root;
}

.contact-grid {
    row-gap: 12px;
} /* hoặc gap: 12px; */
/* ====== 2 CỘT TRONG .classcontaner ====== */
.classcontaner.contact-grid {
    /* khung container */
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px; /* trái linh hoạt, phải 360px */
    gap: 24px;
    align-items: start;
}

.col-left {
    display: flex;
    flex-direction: column;
    gap: 20px; /* khoảng cách giữa card-info và list hospital */
    min-width: 0; /* ngăn overflow chữ dài */
}

/* Khoảng cách dọc giữa các hospital dùng gap, bỏ margin lẻ */
.hospital-list {
    display: flex;
    flex-direction: column;
    gap: 16px; /* chỉnh 12–16px theo thiết kế */
}
.hospital + .hospital {
    margin-top: 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .svc {
        padding-top: 26px;
        padding-bottom: clamp(24px, 6vw, 24px);
    }
    .svc__head {
        padding-top: 20px;
    }
    .svc__title {
        font-size: clamp(32px, 3.6vw, 32px);
        text-align: center;
    }
    .svc__lead {
        font-size: 16px;
    }
    .svc-card {
        margin-bottom: 23px;
    }

    /* Disable hover effect on mobile to prevent overflow */
    .svc-card:hover .svc-card__content {
        align-content: end;
        background: transparent !important;
        grid-template-rows: auto;
    }

    .svc-card:hover .svc-card__more {
        max-height: 0;
        opacity: 0;
    }

    .why {
        background: #fff;
        margin-top: 22px;
        padding: 0px 16px;
    }
    .why__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'photo photo'
            'doc   brand'
            'cost  equip'
            'cert  cert'
            'iso   iso';
        gap: 14px;
        align-items: stretch;
    }

    .why__grid > :nth-child(1) {
        grid-area: photo;
    }
    .why__grid > :nth-child(2) {
        grid-area: doc;
    }
    .why__grid > :nth-child(3) {
        grid-area: brand;
    }
    .why__grid > :nth-child(5) {
        grid-area: cost;
    }
    .why__grid > :nth-child(6) {
        grid-area: equip;
    }
    .why__grid > :nth-child(4) {
        grid-area: cert;
    }
    .why__grid > :nth-child(7) {
        grid-area: iso;
    }

    .why__grid > :nth-child(1) {
        border-radius: 16px;
        overflow: hidden;
    }
    .why__grid > :nth-child(1) img {
        width: 100%;
        height: auto;
        aspect-ratio: 16/11;
        object-fit: cover;
    }

    .why__grid article {
        padding: 16px 14px;
        display: grid;
        gap: 10px;
        align-content: start;
        min-height: 100%;
    }
    .why__grid article h3 {
        font-size: 20px;
    }
    .why__grid article p {
        font-size: 15px;
        line-height: 1.55;
    }

    .why__grid > :nth-child(4) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 16px;
        border: 2px solid var(--gold);
        background: #fff !important;
        box-shadow: none !important;
    }
    .why__grid > :nth-child(4) img {
        max-width: 42%;
        max-height: 120px;
        height: auto;
        object-fit: contain;
    }

    .why__grid > :nth-child(6) {
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        cursor: pointer;
    }
    .why__grid > :nth-child(6):hover,
    .why__grid > :nth-child(6):focus-within {
        background: var(--brand-green);
        border-color: rgba(255, 255, 255, 0.2);
    }
    .why__grid > :nth-child(6):hover h3,
    .why__grid > :nth-child(6):hover p,
    .why__grid > :nth-child(6):focus-within h3,
    .why__grid > :nth-child(6):focus-within p {
        color: #fff;
    }

    .why__grid > :nth-child(7) {
        padding: 16px;
    }

    .why__title {
        text-align: center;
        margin-bottom: 12px;
        font-size: clamp(32px, 6vw, 32px);
    }

    .why__more {
        display: flex;
        justify-content: center;
        margin: 22px 0px;
    }
    .why__more-btn {
        padding: 6px 12px;
        font-size: 16px;
        border-radius: 8px;
        background: var(--brand-green);
        color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
        transition: all 0.25s ease;
        font-weight: 600;
        line-height: 1.5;
    }
    .why__more-btn:hover {
        background: #008451;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }
    .why__more-btn:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }
    .topbar {
        grid-template-columns: auto auto 0.5fr;
        row-gap: 10px;
        height: auto;
        padding: 10px 0;
    }
    .logo img {
        height: 44px;
    }
    .topbar__center {
        order: 3;
        flex-wrap: wrap;
        gap: 10px;
    }
    .search {
        flex: 1 1 100%;
        max-width: none;
    }
    .contacts {
        gap: 12px;
    }
    .cta {
        padding: 10px 14px;
    }
    .navbar__inner {
        grid-template-columns: 1fr auto;
    }
    .navmenu {
        gap: 18px;
        overflow: auto;
        padding-block: 6px;
    }

    .topbar {
        grid-template-columns: 1fr auto 0.5fr;
    }
    .navbar {
        display: none;
    }
    .topbar__center {
        display: none;
    }

    .mbar {
        display: flex;
        grid-column: 3;
        justify-self: end;
    }

    .mnav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 120;
        pointer-events: none;
    }
    .mnav__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        transition: 0.2s;
        visibility: hidden;
    }
    .mnav__panel {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        width: min(86vw, 360px);
        background: #fff;
        box-shadow: var(--shadow);
        transform: none;
        transition: left 0.25s ease;
        padding: 0;
        display: grid;
        align-content: start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        will-change: left;
    }

    #mnav-toggle:checked ~ .mnav {
        pointer-events: auto;
    }
    #mnav-toggle:checked ~ .mnav .mnav__backdrop {
        opacity: 1;
        visibility: visible;
    }
    #mnav-toggle:checked ~ .mnav .mnav__panel {
        left: 0;
    }
    .mnav__top {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        grid-gap: 12px;
        padding: 12px 16px;
        background: var(--brand-green);
        color: #fff;
        border-bottom: 1px solid var(--line);
        transition: 0.25s;
    }
    .mnav__top--active {
        background: var(--cta);
        color: #fff;
    }
    .mnav__top__logo {
        height: 48px;
        width: auto;
    }
    .mnav__top__langs {
        display: flex;
        justify-content: center;
        background: var(--brand-green);
        color: #fff;
        padding: 10px 12px;
        gap: 12px;
        height: 64px;
    }
    .mnav__logo {
        height: 54px;
        width: auto;
    }
    .mnav__langs {
        display: flex;
        justify-content: end;
        gap: 8px;
        padding-right: 15px;
    }
    .mnav__close {
        display: flex;
        justify-content: end;
        gap: 8px;
        height: 22px;
        width: 22px;
    }
    .mnav__close .icon {
        width: 22px;
        height: 22px;
    }
    .mnav__menu {
        padding: 14px 16px;
        display: grid;
        gap: 10px;
    }
    .mnav__item-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 8px;
    }
    .mnav__link {
        flex: 1;
        color: var(--brand-green);
        font-size: 18px;
        border-radius: 8px;
    }
    .mnav__link .caret {
        margin-left: auto;
        width: 18px;
        height: 18px;
        opacity: 0.9;
    }
    .mnav__link:active {
        background: rgba(0, 105, 64, 0.06);
    }

    .mnav__divider {
        margin: 8px 16px;
        border: 0;
        border-top: 1px solid #cfe3d9;
    }
    .mnav__contacts {
        display: grid;
        gap: 10px;
        padding: 8px 16px 20px;
        color: var(--brand-text);
        font-weight: 600;
    }
    .mnav__contacts .contacts__item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #mnav-toggle:checked ~ .mnav {
        pointer-events: auto;
    }
    #mnav-toggle:checked ~ .mnav .mnav__backdrop {
        opacity: 1;
        visibility: visible;
    }
    #mnav-toggle:checked ~ .mnav .mnav__panel {
        transform: none;
    }
    .footer__top {
        padding: 24px 0 10px;
    }
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .footer__brand {
        /* background: rgba(0, 0, 0, 0.06); */
        border-radius: 12px;
        padding: 16px 14px;
    }
    .footer__logo {
        height: 42px;
        margin-bottom: 10px;
    }
    .footer__company {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .footer__info p {
        margin-bottom: 6px;
    }
    .footer__socials {
        gap: 10px;
    }
    .sbtn {
        width: 36px;
        height: 36px;
    }

    .footer__title {
        margin-top: 8px;
    }
    .footer__list {
        gap: 12px;
    }
    .footer__list a {
        padding: 6px 0;
        border-radius: 8px;
    }
    .footer__qr {
        width: 140px;
        height: 140px;
    }
    .footer__app {
        justify-self: stretch;
        text-align: left;
        /* background: rgba(0, 0, 0, 0.06); */
        border-radius: 12px;
        padding: 14px;
    }
    .footer__badges {
        justify-items: start;
    }

    .footer__bottom__row {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
    .mnav__searchbar {
        display: flex;
        gap: 10px;
        padding: 0px 0px 5px 0px;
        background: #fff;
        /* border-bottom: 1px solid #e5e7eb; */
        /* height: 50px; */
    }

    .mnav__select {
        flex: 0 0 100px;
        padding: 6px 8px;
        border: 1px solid #005233;
        border-radius: 8px;
        background: #fff;
        font-size: 12px;
        color: #969696;
        outline: none;
    }

    .mnav__search {
        flex: 1;
        display: flex;
        align-items: center;
        border: 1px solid #e1e1e1;
        border-radius: 5px;
        background: #fff;
        height: 33px;
        overflow: hidden;
    }

    .search__input {
        border: none;
    }

    .mnav__input {
        flex: 1;
        border: none;
        padding: 0 12px;
        font-size: 14px;
        outline: none;
        color: var(--brand-text);
    }

    .mnav__input::placeholder {
        color: #9aa7b4;
    }

    .mnav__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        cursor: pointer;
    }
    .mnav__btn img {
        width: 20px;
        height: 20px;
    }

    .mselect {
        position: relative;
        flex: 0 0 120px;
    }
    .mselect__control {
        width: 100%;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        border: 1px solid #e1e1e1;
        border-radius: 5px;
        background: #fff;
        font-size: 14px;
        color: #969696;
    }
    .mselect.is-open .mselect__control {
        border-color: #969696;
        box-shadow: 0 0 0 3px rgba(0, 105, 64, 0.12);
    }

    .mselect .caret {
        width: 24px;
        height: 24px;
    }

    .mselect__menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 10;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(2, 8, 20, 0.12), 0 2px 6px rgba(2, 8, 20, 0.06);
        padding: 8px 0;
        display: none;
        max-height: 50vh;
        overflow: auto;
    }
    .mselect.is-open .mselect__menu {
        display: block;
    }

    .mselect__menu li {
        padding: 10px 14px;
        cursor: pointer;
        font-weight: 700;
        color: #1f2937;
        white-space: nowrap;
    }
    .mselect__menu li:hover {
        background: #f3f4f6;
    }
    .mselect__menu li.is-active {
        background: #e6f4ee;
        color: #006940;
        position: relative;
    }
    .mselect__menu li.is-active::before {
        content: '✓';
        position: relative;
        left: 0px;
        font-weight: 600;
        margin-right: 5px;
    }

    .hero {
        position: relative;
        min-height: auto;
        padding: 0;
        display: block;
    }
    .hero__bg {
        position: static !important;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: 50% 18%;
        z-index: auto;
    }
    .hero::after {
        content: none;
    }

    .hero__card.container {
        margin-left: auto;
        margin-right: auto;
    }
    .hero__card {
        position: static !important;
        width: 92vw;
        height: auto;
        /* margin: -6px auto 0; */
        border-radius: 16px;
        padding: 18px 16px 70px;

        background: var(
            --hero-card-bg,
            linear-gradient(
                to right,
                rgba(0, 105, 64, 0.9) 0%,
                rgba(0, 105, 64, 0.3) 100%,
                rgba(0, 0, 0, 0.5) 0%,
                rgba(255, 255, 255, 0) 100%,
                rgba(0, 0, 0, 0.3) 0%,
                rgba(0, 0, 0, 0.05) 100%
            )
        ) !important;

        border: 1px solid rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(16px) saturate(112%);
        -webkit-backdrop-filter: blur(16px) saturate(112%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(0, 0, 0, 0.12);
        color: #fff;
        padding: 18px 16px;
    }
    .hero__title,
    .hero__title--sub,
    .hero__lead {
        margin-bottom: 10px;
    }
    .hero__eyebrow {
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 15px;
        display: inline-block;
        font-weight: 600;
        font-family: var(--font-body);
        line-height: 22px;
    }
    .hero__title {
        font-size: clamp(32px, 7.2vw, 32px);
        line-height: 1.08;
        margin: 0 0 17.5px;
    }
    .hero__title--sub {
        font-size: clamp(32px, 6.5vw, 32px);
        margin-top: 6px;
    }
    .hero__lead {
        font-size: 16px;
    }
    .hero__accent {
        margin-left: 0.12em;
    }
    .hero__underline {
        bottom: -0.2em;
        height: 20px;
        top: 29px;
    }
    .hero__underline path {
        strokewidth: 5.5;
    }

    .hero__cta {
        display: none;
    }
    .hero__cta .icon {
        width: 20px;
        height: 20px;
    }

    .hero__actions {
        display: none;
    }

    .stats {
        padding: 0px 0px;
        /* background: #e6f4ec; */
    }

    .stats__grid {
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: calc(1fr -16px) auto 1fr;
        align-items: stretch;
    }
    .stat {
        padding: 16px 8px 16px;
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        row-gap: 10px;
        align-items: stretch;
    }

    .stat:nth-child(1),
    .stat:nth-child(3) {
        padding-top: 0px;
    }

    .stats__grid > div:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }
    .stats__grid > div:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
    }
    .stats__grid > div:nth-child(3) {
        grid-row: 1;
        grid-column: 3;
    }
    .stats__grid > div:nth-child(4) {
        grid-row: 2;
        grid-column: 1 / span 3;
    }
    .stats__grid > div:nth-child(5) {
        grid-row: 3;
        grid-column: 1;
    }
    .stats__grid > div:nth-child(6) {
        grid-row: 3;
        grid-column: 2;
    }
    .stats__grid > div:nth-child(7) {
        grid-row: 3;
        grid-column: 3;
    }

    .stats__sepvertical {
        height: calc(100% - 13px);
        width: 1px;
        margin: 6.5px 0px;
        background-color: #f5f5f5;
        display: block;
    }

    .stats__sep2 {
        display: block;
        height: 1px;
        width: 100%;
        background-color: #f5f5f5;
    }

    .stat__icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border: 1.5px solid var(--brand-green);
        background: rgba(255, 255, 255, 0.6);
        border-radius: 40px;
    }
    .stat__icon img {
        width: 32px;
        height: 32px;
    }

    .stat__num {
        font-size: 36px;
        color: var(--brand-green);
        line-height: 1.1;
        margin-top: -2px;
    }
    .stat__label {
        font-size: 18px;
        font-weight: 400;
        color: #2d2d2d;
        line-height: 1.35;
    }
}

.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

.topbar-mobile {
    grid-template-columns: 1fr;
}

.hero2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

@media (max-width: 768px) {
    .hero2 {
        position: relative;
        z-index: 1;
        /* margin-top: -6px; */
        background-color: #e6f4ee;
        overflow: visible;
    }

    .hero2 .container {
        position: relative;
        top: -16px;
    }
}

@media (max-width: 768px) {
    .doctors__nav {
        display: none;
    }
}

/* Mobile Navigation Submenu */
.mnav__item {
    position: relative;
}
.mnav__item.is-active {
    background: #f0f0f0;
}

.mnav__submenu {
    display: none; /* Hidden by default */
    padding-left: 16px; /* Indent child menu items */
    margin-top: 8px;
    border-left: 2px solid #cfe3d9; /* Optional: Add a visual indicator */
}

.mnav__item.is-active .mnav__submenu {
    display: block; /* Show submenu when parent is active */
}

.mnav__sublink {
    display: block;
    padding: 8px 12px;
    color: var(--brand-green);
    font-size: 14px;
    text-decoration: none;
}

.mnav__sublink:hover {
    background: #f0f0f0;
    color: #006940;
}
/* Breadcrumb */
.breadcrumb-full {
    border-bottom: 1px solid var(--place-holder, #e0e0e0);
}

.breadcrumb-inner {
    width: 85%;
    margin: 0 auto;
    padding: 8px 0;
}

/* Hospital-system banner */
.hospital-system {
    position: relative;
    text-align: center;
}

.hospital-system__bg {
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -2;
}

.hospital-system__title {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--brand-green, #006940);
    font-size: clamp(8px, 7.2vw, 24px);
    font-weight: bold;
}

.hospital-system__actions {
    position: absolute;
    height: 70px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 1440px;
    border-radius: 12px 12px 0 0;
    background: var(--facility-tool-bar, #fff8f5);
    z-index: 1;
}

.hospital-system__card {
    width: 448px;
    height: 60px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.hospital-system__card:nth-child(1):hover {
    background: var(--facility-red, #c1141f);
    color: var(--bg, #ffffff);
}
.hospital-system__card:nth-child(3):hover {
    background: var(--facility-yellow, #d6982f);
    color: var(--bg, #ffffff);
}
.hospital-system__card:nth-child(5):hover {
    background: var(--facility-green, #28a745);
    color: var(--bg, #ffffff);
}

.hospital-system__card:hover .hospital-system.text--red {
    color: var(--bg, #ffffff);
}

.hospital-system__card:hover .hospital-system.text--yellow {
    color: var(--bg, #ffffff);
}

.hospital-system__card:hover .hospital-system.text--green {
    color: var(--bg, #ffffff);
}

.hospital-system__card:hover .card--red {
    border: 1px solid var(--bg, #ffffff);
}

.hospital-system__card:hover .card--yellow {
    border: 1px solid var(--bg, #ffffff);
}

.hospital-system__card:hover .card--green {
    border: 1px solid var(--bg, #ffffff);
}

.hospital-system__card .icon {
    width: 48px;
    height: 48px;
}

.hospital-system__card {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.hospital-system-actions__sparate {
    width: 0px;
}

.hospital-system__card .icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hospital-system__card .icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Car Call button */
.card--red {
    background: var(--facility-red, #c1141f);
}
.text--red {
    font-size: 20px;
    color: var(--facility-red, #c1141f);
}
/* Card Find doctor */
.card--yellow {
    background: var(--facility-yellow, #d6982f);
}
.text--yellow {
    font-size: 20px;
    color: var(--facility-yellow, #d6982f);
}
/* Card Make a Appointment  */
.card--green {
    background: var(--facility-green, #28a745);
}
.text--green {
    font-size: 20px;
    color: var(--facility-green, #28a745);
}

/* Responsive */
@media (max-width: 768px) {
    .hospital-system__actions {
        display: none;
    }
    /* .hospital-system__actions {
        position: fixed;
        align-items: center;
        justify-content: space-evenly;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        height: 50px;
        gap: 0;
        border-radius: 0px;
        z-index: 9999;
    }
    .hospital-system__card {
        padding: 2px;
        font-size: 14px;
        gap: 0;
    }
    .hospital-system__card span {
        margin: 0;
        padding-left: 5px;
    }
    .hospital-system__card:hover {
        box-shadow: 0;
    }
    .hospital-system-actions__sparate {
        width: 1px;
        height: 80%;
        border: 1px;
        background: var(--place-holder, #e0e0e0);
    }
    body {
        padding-bottom: 50px;
    } */
}

@media (min-width: 300px) {
    .hospital-system__title {
        font-size: 6px;
    }
}

@media (min-width: 768px) {
    .hospital-system__title {
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .hospital-system__title {
        font-size: 24px;
    }
}

/* Hospital-system grid */
.hospitals {
    width: 85%;
    margin: 0 auto;
}

.hospitals__title {
    font-size: 48px;
    font-weight: 700;
    padding-top: 40px;
    padding-bottom: 21px;
    margin: 0;
    color: var(--brand-green, #007d47);
}

.hospitals__grid {
    display: grid;
    padding-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.hospital-card {
    background: #fff;
    border: 1px solid var(--border-popup, #319e95);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: auto;
}

.hospital-card__img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.hospital-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.hospital-card__name {
    padding: 0px;
    height: 40px;
    font-size: clamp(18px, 2vw, 28px);
    text-align: center;
    font-weight: 700;
    color: var(--brand-green, #007d47);
}

.hospital-card__address {
    display: flex;
    align-items: flex-start;
    height: 60px;
    gap: 8px;
}

.hospital-card__address p {
    font-size: 16px;
    margin: 0;
}

.hospital-card__phone {
    display: flex;
    align-items: flex-start;
    margin: 0;
    font-size: 16px;
    gap: 8px;
}

.hospital-card-img {
    width: 24px;
    height: 24px;
}

.hospital-card__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.hospital-card-body__link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn.btn--outline {
    border: 1px solid var(--brand-green, #007d47);
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin: 0px;
    font-weight: 500;
    color: var(--brand-green, #007d47);
    background: var(--hospital-register-background, #e6f4ee);
}

.btn.btn--outline:hover {
    border-radius: 30px;
    background: transparent;
}

.hospital-card__link {
    font-size: 16px;
    color: var(--brand-green, #007d47);
    text-decoration: none;
    font-weight: 500;
}

@media (max-width: 768px) {
    .hospitals {
        padding-top: 13px;
        padding-bottom: 55px;
    }
    .hospitals__grid {
        gap: 20px;
    }
    .hospitals__title {
        margin: 0;
        font-size: 32px;
        margin-bottom: 16px;
        padding: 0px;
    }
}

/* Hospital details */
.hospital-intro {
    width: 85%;
    margin: 0 auto;
    background: #fff;
}

.hospital-grid {
    display: flex;
    flex-direction: row;
    margin-top: 42px;
    margin-bottom: 56px;
    gap: 16px;
    height: 425px;
}

.hospital-image img {
    width: 550px;
    height: 425px;
    border-radius: 16px;
}

.hospital-content {
    display: flex;
    flex-direction: column;
    flex: 2;
    margin: 0px;
    gap: 24px;
}

.hospital-content p {
    margin: 0px;
    font-size: 20px;
}

.hospital-intro-title {
    font-size: 48px;
    margin: 0px;
    padding-top: 20px;
    padding-bottom: 16px;
    font-weight: 700;
    color: var(--brand-green, #006940);
    line-height: 1.3;
}

.hospital-info {
    display: flex;
    font-size: 16px;
    color: var(--text-color, #2d2d2d);
    flex-direction: column;
}

.hospital-info p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    color: var(--text-color, #2d2d2d);
    font-size: 16px;
    flex: 1;
}

.hospital-info .icon {
    width: 24px;
    height: 24px;
}

.hospital-image {
    width: 550px;
    height: auto;
}

.hospital-description {
    color: var(--brand-text, #0b1220);
    font-size: 1rem;
    line-height: 1.75;
    text-align: justify;
}

.hospital-description p {
    font-size: 20px;
    margin-bottom: 16px;
}

@media (max-width: 1024px) {
    .hospital-grid {
        flex-direction: column;
        align-items: center;
    }

    .hospital-image img {
        width: 100%;
        height: auto;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .hospital-grid {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .hospital-image {
        width: 100%;
    }
    .hospital-image img {
        width: 100%;
        margin: auto;
        height: 265px;
        border-radius: 16px;
    }

    .hospital-intro-title {
        font-size: 32px;
        margin: 0px;
        padding-top: 36px;
        padding-bottom: 16px;
        font-weight: 700;
        color: var(--brand-green, #006940);
        line-height: 1.3;
    }
    .hospital-info p {
        font-size: 14px;
    }
    .hospital-description p {
        font-size: 16px;
    }
}

/* Specialties */
.specialties {
    width: 85%;
    margin: 0 auto;
    padding: 40px 20px;
}

.specialties-title {
    font-size: 48px;
    font-weight: bold;
    color: var(--brand-green, #006940);
    object-fit: cover;
    margin-bottom: 24px;
}

.specialties-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
}

.specialties-grid {
    display: grid;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out;
}

.specialties-grid-wrapper {
    position: relative;
    overflow: hidden;
}

.specialties-grid--collapsed {
    max-height: 600px; /* Chiều cao tương ứng 2 dòng */
}

.specialties-grid--expanded {
    max-height: 900px; /* Chiều cao tương ứng 3 dòng */
}

.specialties-loadmore-wrapper {
    text-align: center;
    margin-top: 16px;
}

.specialties-loadmore {
    background: transparent;
    border: 1px solid var(--brand-green, #006940);
    color: var(--brand-green, #006940);
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.specialties-loadmore:hover {
    background: var(--brand-green, #006940);
    color: #fff;
}

.specialty-card {
    text-align: center;
}

.specialty-image {
    width: 228px;
    height: 228px;
    object-fit: cover;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 16px;
}

.specialty-name {
    margin-top: 8px;
    font-size: 20px;
    color: var(--brand-text, #0b1220);
}

@media (max-width: 768px) {
    .specialties {
        padding: 0px;
    }
    .specialties-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        gap: 0;
        padding: 0;
    }

    /* Mỗi “page” trong scroll */
    .specialties-grid-page {
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        scroll-snap-align: start;
        padding: 0%;
        gap: 20px;
        box-sizing: border-box;
    }

    /* Thanh nền */
    .specialties-progressbar {
        margin: auto;
        width: 66px;
        height: 8px;
        background: #dfdfdf;
        border-radius: 16px;
        overflow: hidden;
        margin-top: 12px;
    }

    /* Thanh chạy */
    .specialties-progressbar-fill {
        height: 100%;
        width: 0%;
        background: var(--brand-green, #006940);
        border-radius: 16px;
        transition: width 0.3s ease;
        opacity: 0.5;
    }

    /* Ẩn thanh cuộn ngang */
    .specialties-grid::-webkit-scrollbar {
        display: none;
    }
    .specialties-title {
        font-size: 32px;
    }
    .specialty-name {
        font-size: 14px;
    }
}

/* Register section */
.register-section {
    position: relative;
    padding: 40px 20px;
    overflow: hidden;
}

.register-section .bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.register-card {
    display: grid;
    position: relative;
    z-index: 1;
    width: 85%;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    border-radius: 12px;
    padding: 30px;
    background: transparent;
}

.form-area {
    padding: 16px;
    border-radius: 16px;
    background: white;
}

.form-area h2 {
    color: var(--brand-green, #006940);
    font-size: 32px;
    margin-bottom: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.register-section label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

.register-section span {
    color: red;
}

.select-hospital {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #000;
}

.select-hospital:invalid {
    color: var(--line, #999999);
}

.select-hospital option[value=''] {
    color: var(--line, #999999);
}

.register-section input,
.register-section select,
.register-section textarea {
    height: 56px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.register-section textarea {
    min-height: 80px;
    resize: vertical;
}

.register-section input::placeholder,
.register-section textarea::placeholder {
    color: var(--line, #999999);
    font-style: italic;
    opacity: 1;
}

.register-date[type='date']::-webkit-datetime-edit-fields-wrapper {
    color: var(--line, #999999);
}

.register-date[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
}

.image--register {
    width: 24px;
    height: 24px;
}

.submit-btn {
    margin-top: 20px;
    width: 100%;
    height: 46px;
    padding: 12px;
    border: none;
    border-radius: 25px;
    background: var(--bg-color-button-red, #ed1926);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.submit-btn:hover {
    background: var(--brand-green, #006940);
}

.hospital-area {
    border: 1px solid var(--brand-green, #006940);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

.hospital-card-register h3 {
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0px;
}

.hospital-card-register h3 {
    font-size: 30px;
    color: var(--brand-green, #006940);
    margin-bottom: 5px;
}

.hospital-card-register h3 span {
    font-size: 64px;
    font-weight: bold;
    color: var(--hospital-register-background, #e6f4ee);
    margin-right: 10px;
}

.hospital-card-register p {
    font-size: 20px;
    margin: 3px 0;
}

.hospital-info-area {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

/* Responsive */
@media (max-width: 1024px) {
    .register-card {
        grid-template-columns: 1fr;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .register-section {
        padding: 8px 0 29px 0px;
        background: transparent;
        border-radius: 16px;
    }
    .form-grid {
        gap: 15px;
    }
    .form-area h2 {
        margin-top: 0px;
    }
    .form-area {
        border: 1px solid var(--border-card, #a5d6a7);
    }
    .register-section .bg-img {
        display: none;
    }
    .hospital-area {
        padding: 20px 10px;
        background: var(--bg-color-contact-info-mobile, #f5f5f5);
        border: 1px solid var(--bg-color-contact-mobile, #ffb74d);
    }
    .hospital-card-register h3 span {
        color: #a5d6a7;
        font-size: 48px;
    }
    .hospital-card-register h3 {
        margin: 0px;
        font-size: 24px;
    }
    .hospital-card-register p {
        font-size: 20px;
    }
    .hospital-info-area {
        gap: 8px;
        margin-top: 12px;
    }
    .hospital-card-register {
        padding-top: 20px;
    }
    .register-card {
        display: flex;
        width: 90%;
        padding: 0px;
        gap: 20px;
        flex-direction: column;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .register-section input,
    .register-section select {
        min-height: 57px;
    }
}

/* Slide banner */
.slide-banner {
    position: relative;
    text-align: center;
}

.slide-banner__bg-wrapper {
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -2;
}

.slide-banner__bg {
    width: 100%;
    max-width: 100vw;
}

.slide-banner__content {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--brand-green, #006940);
    font-size: clamp(8px, 7.2vw, 24px);
    font-weight: bold;
}

.slide-banner__bg-wrapper img {
    width: 100%;
}

/* Responsive */

@media (min-width: 300px) {
    .slide-banner__content {
        font-size: 6px;
    }
}

@media (min-width: 768px) {
    .slide-banner__content {
        font-size: 12px;
    }
}

@media (min-width: 1200px) {
    .slide-banner__content {
        font-size: 24px;
    }
}

/* About us */
.about-us {
    width: 85%;
    height: auto;
    padding-top: 60px;
    margin: 0 auto;
}

/* Story container */
.about-us__story {
    display: flex;
    flex-direction: row;
    gap: 100px;
    height: 100%;
}

/* Media (bên trái) */
.about-us__media {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
}

/* Cover & Video 50/50 */
.about-us__cover,
.about-us__video {
    display: flex;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

/* Cover Image */
.about-us__cover {
    flex: 1;
    object-fit: cover;
    height: 100%;
}

/* Video thumb */
.about-us__video {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
}

.about_us-img {
    height: 100%;
    width: 100%;
}

.about-us__video-thumb {
    display: block;
    height: 100%;
    width: 40%;
    object-fit: cover;
    border-radius: 12px;
}

.about-us_btn_play {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.about-us__experience {
    width: 296px;
    height: 172px;
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    background: var(--about-us-content-bg, #28a745);
    padding: 12px 16px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 0;
}

.about-us__experience .number {
    text-align: left;
    font-size: 52px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--about-us-content-text, #fafafa);
}

.about-us__experience .text {
    text-align: left;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--about-us-content-text, #fafafa);
}

.about-us__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0px 0px;
    background: var(--bg, #ffffff);
    border-radius: 12px;
}

/* Content title */
.about-us__contet-title h2 {
    font-size: 48px;
    font-weight: 700;
    color: var(--brand-green, #006940);
    margin: 0px;
    margin-bottom: 16px;
}

.about-us__contet-title p {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-color, #2d2d2d);
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .about-us__item img.about-us__icon {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Vision / Mission */
.about-us__vision-mission {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-us-values__title {
    font-size: 52px;
    color: var(--brand-green, #006940);
    margin-top: 0;
}

.about-us__item {
    display: flex;
    align-items: flex-start;
    position: relative;
    gap: 16px;
    order: 2;
}

.about-us__item img.about-us__icon {
    width: 91px;
    height: 91px;
    flex-shrink: 0;
}

.about-us__item h3 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--brand-green, #006940);
    margin-top: 0;
}

.about-us__item p {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-color, #2d2d2d);
    margin-bottom: 8px;
}

.about-us__item a {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color, #2d2d2d);
    text-decoration: none;
}

.about-us__item a:hover {
    text-decoration: underline;
}

.about-us__content_moreInfo {
    height: 30px;
}

.about-us__content_moreInfo a:hover {
    cursor: pointer;
    color: var(--brand-green, #006940);
}

.about-us__content a {
    margin-top: auto;
    align-self: flex-end;
}

/* Core value */
.about-us__values {
    width: 85%;
    margin: 0 auto;
    margin-top: 60px;
    height: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.about-us__values h2 {
    font-size: 52px;
    margin-bottom: 20px;
}

.value-card p {
    font-size: 20px;
}

.value-card h3 {
    font-weight: 500;
    font-size: 30px;
    color: var(--brand-green, #006940);
}

.about-us__values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    height: auto;
}

.value-card {
    background: var(--bg, #ffffff);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--hospital-register-background, #e6f4ee);
    position: relative;
}
.value-card__number {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 64px;
    font-weight: bold;
    color: var(--hospital-register-background, #e6f4ee);
}
.value-card__icon {
    width: 80px;
    height: 80px;
}

/* History About us */
.history {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    gap: 110px;
    width: 85%;
    margin: 0 auto;
    height: 600px;
    padding-top: 60px;
}

.history-header {
    height: 94px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    gap: 50px;
}

.history-header h2 {
    flex: 0 0 auto;
    width: 700px;
    font-size: 48px;
    font-weight: 700;
    text-align: left;
    color: var(--text-color, #2d2d2d);
    white-space: nowrap;
}

.history-header h2 span {
    text-align: right;
    color: var(--brand-green, #006940);
}

.history-header p {
    margin-top: 8px;
    font-size: 20px;
    color: var(--text-color, #2d2d2d);
}

.history-subtitle {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.history-subtitle p strong {
    font-size: 64px;
    color: var(--brand-green, #006940);
}

.history-subtitle p {
    text-align: justify;
}

.history-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 406px;
    padding: 80px 0;
    box-sizing: border-box;
}

.history-timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 1;
    background-image: repeating-linear-gradient(to right, var(--line, #999999) 0 12px, transparent 12px 24px);
}

.history-item {
    position: relative;
    align-items: center;
    text-align: center;
    flex: 1;
}

/* Đường nối từ text -> hình tròn */
.history-year::before,
.history-year::after {
    content: none;
}

.history-item:nth-child(odd) .history-year::before {
    content: '';
    position: absolute;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 22px;
    background: var(--brand-green, #006940);
    z-index: 1;
}

.history-item:nth-child(even) .history-year::after {
    content: '';
    position: absolute;
    bottom: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 22px;
    background: var(--brand-green, #006940);
    z-index: 1;
}

.history-year {
    width: 77px;
    height: 77px;
    display: flex;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%);
    align-items: center;
    justify-content: center;
    background: var(--bg, #ffffff);
    position: relative;
    font-size: 22px;
    box-shadow: 0 0 0 12px rgba(0, 105, 64, 0.15);
    border-radius: 50%;
    font-weight: 700;
    color: var(--cta, #ed1926);
    z-index: 2;
}

.history-year:hover {
    background: var(--brand-green, #006940);
    color: var(--bg, #ffffff);
}

.history-text {
    position: absolute;
    width: auto;
    height: auto;
    background: var(--hospital-register-background, #e6f4ee);
    border: 1px solid var(--facility-green, #28a745);
    border-radius: 6px;
    padding: 8px;
    font-size: 24px;
    text-align: center;
    color: var(--text-color, #2d2d2d);
}

.history-text.top {
    bottom: 100%;
    width: 100%;
    margin-bottom: 32px;
}

.history-text.bottom {
    top: 100%;
    width: 100%;
    margin-top: 32px;
}

/* ==== Mobile view ==== */
.history-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.history-mobile-image {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.history-mobile-image img {
    width: 100%;
    aspect-ratio: 343/467;
    min-height: 467px;
    display: block;
    border-radius: 8px;
}

.overlay-mobile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 4%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 92%);
    z-index: 1;
}

.history-mobile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    color: var(--bg, #ffffff);
    text-align: left;
    font-size: 16px;
    z-index: 2;
}

.history-mobile-year {
    margin-top: 16px;
    font-size: 40px;
    font-weight: 700;
    color: var(--facility-red, #c1141f);
}

.history-mobile-title {
    color: var(--brand-green, #006940);
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
}

/* Timeline dots */
.history-mobile-timeline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 20px 20px;
}

.history-mobile-timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-dot {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--background-border-mobile-timeline, #b8b8b8);
    border: 0px solid transparent;
    padding-right: 0px; /* work in safari */
    cursor: pointer;
    z-index: 2;
}

.timeline-dot.active {
    width: 20px;
    height: 20px;
    background: var(--brand-green, #006940);
    border: none;
    z-index: 2;
}

.timeline-dot::before {
    content: '';
    position: absolute;
    top: -7.5px;
    left: -7.5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #bbbbbb;
    box-sizing: border-box;
    border: 2px solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.timeline-dot.active::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0px;
    background: linear-gradient(transparent, transparent) padding-box,
        linear-gradient(to right, rgba(165, 214, 167, 0.3) 11.89%, rgba(0, 105, 64, 0.3) 97.8%) border-box;
    box-sizing: border-box;
    border: 10px solid transparent;
    z-index: -1;
}

@media (min-width: 768px) {
    .history-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .history {
        height: auto;
        gap: 24px;
    }

    .history {
        width: 100%;
        background: var(--background-history, #f5f6f7);
        padding: 40px calc((100% - 85%) / 2);
    }

    .history-header {
        height: auto;
        gap: 16px;
    }
    .history-header {
        flex-direction: column;
    }
    .about-us__contet-title p {
        font-size: 16px;
    }
    .history-header h2 {
        margin: 0;
        font-size: 32px;
        width: 100%;
        white-space: inherit;
    }
    .history-header p {
        font-size: 16px;
    }
    .history-subtitle p strong {
        font-size: 40px;
    }
    .history-mobile-title {
        height: auto;
    }
    .about-us__item p {
        font-size: 16px;
    }
}

/* Infrastructure carousel */
.infrastructure-bg {
    background: var(--infastructure-bg, #f5f5f5);
}
.infrastructure {
    width: 85%;
    height: auto;
    margin: 0 auto;
    padding: 60px 0;
}

.infrastructure-info-area {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 560px;
    position: relative;
}

/* Ảnh bên trái */
.infrastructure-content {
    flex: 2;
    display: flex;
    align-items: center;
}

.infrastructure-image img {
    height: 560px;
    object-fit: fill;
}

/* Box info bên cạnh */
.infrastructure-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 50px 0;
    background: transparent;
    position: relative;
    margin-right: 0;
}

.infrastructure-header {
    display: flex;
    flex-direction: row;
    text-align: left;
}

.infrastructure-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-color, #2d2d2d);
}

.infrastructure-header h2 span {
    color: var(--brand-green, #006940);
}

.infrastructure-info-bg {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-left: 40px;
    padding-bottom: 40px;
    height: 420px;
    margin-left: -200px;
    background: rgb(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.infrastructure-info h3 {
    font-weight: 700;
    color: var(--brand-green, #006940);
    font-size: 56px;
    margin: 0;
    padding-right: 21px;
}

.infrastructure-info p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color, #2d2d2d);
    padding: 26px 0;
    padding-right: 11px;
}

.infrastructure-controls {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    gap: 8px;
}

.infrastructure-controls button {
    background: var(--bg, #ffffff);
    border: 1px solid var(--border, #dddddd);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.infrastructure-controls button:hover {
    background: var(--hospital-register-background, #e6f4ee);
    color: var(--brand-green, #006940);
    border-color: var(--brand-green, #006940);
}

.infrastructure-thumbnails {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    justify-content: flex-start;
    margin-top: 32px;
    padding-bottom: 20px;
}

.infrastructure-thumbnails img {
    flex: 1;
    max-width: 180px;
    min-width: 120px;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.infrastructure-thumbnails img.active {
    border-color: var(--brand-green, var(--brand-green, #006940));
}

.infrastructure-thumbnails .overlay-deactive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0) 87%);
}

.infrastructure-thumbnails .thumb {
    border-radius: 8px;
    position: relative;
    display: inline-block;
}

/* About Us - Cert & Award */

.cert-award-section {
    height: 280px;
    background-color: var(--bg-cert, #eaf5f0);
    padding: 40px;
    display: flex;
    justify-content: center;
}

.cert-award-content {
    width: 85%;
    height: 200px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    gap: 60px;
}

.cert-award-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 650px;
    height: 200px;
    background: transparent;
}

.cert-award-title {
    font-size: 48px;
    font-weight: 700;
    width: 650px;
    color: var(--text-color, #2d2d2d);
    margin-bottom: 12px;
    margin: 0px;
}

.cert-award-title span {
    color: var(--brand-green, #006940);
}

.cert-award-desc {
    font-size: 20px;
    color: var(--text-color, #2d2d2d);
}

.cert-award-images {
    display: flex;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}

.cert-award-images::-webkit-scrollbar {
    height: 8px;
}
.cert-award-images::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
}
.cert-award-images::-webkit-scrollbar-track {
    background: transparent;
}

.cert-card {
    flex: 0 0 auto;
    height: 162px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: var(--bg, #ffffff);
    scroll-snap-align: start;
}

.cert-card img {
    width: auto;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
}

/* About us Responsive */
@media (max-width: 768px) {
    .about-us {
        padding: 0 0;
    }
    .about-us__story {
        flex-direction: column;
        gap: 20px;
    }
    .about-us__media {
        order: 2;
    }
    .about-us__content {
        padding: 0px;
        order: 1;
    }

    .about-us__item h3 {
        font-size: 32px;
    }

    .about-us__contet-title h2 {
        font-size: 32px;
        margin: 0px;
        padding-bottom: 15px;
    }

    .about-us__desc {
        margin-bottom: 20px;
    }

    .about-us__vision-mission {
        gap: 0px;
    }

    .history-mobile-image img {
        object-fit: cover;
    }

    .about-us__video-thumb {
        width: 63%;
    }

    .about-us__experience {
        width: 160px;
        height: 130px;
        top: 18px;
        right: 0px;
        left: unset;
        transform: translate(0%, 0%);
    }

    .about-us__experience .text {
        font-size: 14px;
    }

    .about-us__experience .number {
        font-size: 32px;
    }

    .about_us-img {
        height: 224px;
        width: 100%;
    }

    .about-us_btn_play {
        width: 62px;
        height: 62px;
        bottom: 13px;
        left: 13px;
    }

    .about-us__cover {
        flex: 1;
    }

    .about-us__video {
        flex: 2;
    }

    .value-card__number {
        font-size: 52px;
    }

    .value-card h3 {
        font-size: 26px;
        font-weight: 500;
        margin-top: 26px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 16px;
    }

    .value-card p {
        font-size: 16px;
    }

    .value-card__icon {
        width: 70px;
        height: 70px;
    }

    .about-us__values {
        margin-top: 20px;
        gap: 20px;
    }

    .about-us__values h2 {
        font-size: 32px;
        margin-bottom: 0px;
    }

    .about-us__values-grid {
        grid-template-columns: repeat(1, 1fr);
        height: auto;
    }

    /* Infastructure */
    .infrastructure-bg {
        background: var(--bg, #ffffff);
    }
    .infrastructure {
        width: 100%;
        height: auto;
        padding: 0px;
    }

    .infrastructure-info-area {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        gap: -24px;
    }

    .infrastructure-content {
        flex: unset;
        width: 215px;
        height: 122px;
        display: flex;
        justify-content: center;
    }

    .infrastructure-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
    }

    .infrastructure-image {
        height: 100%;
        width: 100%;
        z-index: 2;
    }

    .infrastructure-info {
        flex: unset;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .infrastructure-info-bg {
        margin-left: 0;
        padding: 20px;
        padding-top: 72px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        margin-top: -50px;
        height: auto;
        background: var(--infastructure-bg, #f5f5f5);
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
    }

    .infrastructure-info h3 {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .infrastructure-info p {
        font-size: 16px;
        padding: 0;
    }

    .infrastructure-header h2 {
        font-size: 32px;
        padding: 0px 16px;
    }

    .infrastructure-controls {
        position: absolute;
        bottom: 32px;
        right: 8px;
        transform: scale(0.9);
        height: 50px;
        top: 45px;
        z-index: 3;
    }

    .infrastructure-controls button:hover {
        background: var(--bg-color-button-facility, #ed1926);
        color: var(--bg, #ffffff);
        border-color: var(--bg, #ffffff);
    }

    .infrastructure-thumbnails {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        margin-top: 0px;
        padding-top: 19px;
        padding-bottom: 19px;
        padding-left: 16px;
        padding-right: 16px;
        background: var(--infastructure-bg, #f5f5f5);
    }

    .infrastructure-thumbnails img.active {
        border: 1.2px solid var(--brand-green, #006940);
        border-radius: 5px;
    }

    .infrastructure-thumbnails .thumb {
        border-radius: 5px;
    }

    .infrastructure-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .infrastructure-thumbnails > * {
        flex: 0 0 auto;
    }

    .infrastructure-thumbnails img {
        max-width: 120px;
        min-width: 100px;
        height: 80px;
        border-radius: 10px;
    }

    /* Cert  */
    .cert-award-section {
        height: auto;
        padding: 40px 0px;
    }

    .cert-card {
        border-radius: 8px;
        padding: 0px;
        width: auto;
        height: 100%;
    }

    .cert-card img {
        height: 100%;
        padding: 5px;
        border-radius: 8px;
    }

    .cert-award-text {
        width: auto;
    }

    .cert-award-content {
        width: 85%;
        height: auto;
        flex-direction: column;
        gap: 60px;
    }

    .cert-award-title {
        font-size: 32px;
        font-weight: 700;
        width: auto;
        padding-top: 0px;
        padding-bottom: 20px;
    }

    .cert-award-text {
        width: auto;
        order: 2;
    }

    .cert-award-images {
        height: 50px;
        order: 1;
        gap: 8px;
    }

    .cert-award-content {
        gap: 20px;
    }

    .cert-award-desc {
        font-size: 16px;
    }
}

/* Hospital System */
.hospital-system-main {
    width: 85%;
    margin: 0 auto;
    padding: 60px 0;
}

.hospital-main-desc {
    display: none;
    font-size: 16px;
    color: var(--text-color, #2d2d2d);
    line-height: 1.5;
    margin-bottom: 30px;
    text-align: center;
}

.hospital-system-main h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-color, #2d2d2d);
    text-align: left;
}

.hospital-system-main h2 span {
    color: var(--brand-green, #006940);
}

.hospital-cards {
    display: flex;
    gap: 16px;
}

.hospital-system-card {
    position: relative;
    flex: 1;
    height: 400px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
    display: flex;
    align-items: flex-end;
}

.hospital-system-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.hospital-system-card .hospital-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    right: 0;
    transition: all 0.5s ease;
    font-size: 20px;
}

.hospital-system-card.active .hospital-overlay {
    background: linear-gradient(to right, var(--hospital-system-active, #51be9d), var(--brand-green, #006940) 100%);
    text-align: left;
    padding-top: 0px;
    padding-bottom: 22px;
    padding-left: 22px;
    padding-right: 22px;
    height: fit-content;
    align-items: baseline;
    transition: all 0.5s ease;
}

.hospital-system-card:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.hospital-system-card:last-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.hospital-system-card h3 {
    text-align: center;
    font-size: 22px;
    color: var(--bg, #ffffff);
    margin: 0;
    padding-top: 24px;
    padding-bottom: 12px;
}

.hospital-system-card .hospital-desc {
    margin-top: 10px;
    font-size: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    color: var(--bg, #ffffff);
}

.hospital-system-card.active {
    flex: 2;
    border: 1px solid var(--brand-green, #006940);
}

.hospital-system-card.active img {
    transform: scale(1.05);
}

.hospital-system-card.active .hospital-desc {
    opacity: 1;
    transform: translateY(0);
}

.hospital-overlay .desc {
    display: block;
    font-size: 16px;
    color: var(--bg, #ffffff);
}

.hospital-system-card.active h3 {
    margin: 0px;
}

.hospital-system-card h3 {
    margin: 0px 25px;
}

.hospital-system-card hospital-overlay {
    background: transparent;
}

@media (max-width: 1024px) {
    /* Hospital System */
    .hospital-system-main {
        width: 100%;
        padding: 40px 16px;
    }

    .hospital-system-main h2 {
        font-size: 32px;
        text-align: center;
        margin-bottom: 16px !important;
        margin: 0px;
    }

    .hospital-cards {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .hospital-cards::-webkit-scrollbar {
        display: none;
    }
    .hospital-system-card {
        flex: 0 0 95% !important;
        height: 440px;
        border-radius: 8px;
        scroll-snap-align: center;
        position: relative;
    }

    .hospital-system-card img {
        border-radius: 8px;
    }

    .hospital-system-card .hospital-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to right, var(--hospital-system-active, #51be9d), var(--brand-green, #006940) 100%);
        color: white;
        text-align: left;
        padding: 16px;
        height: 96px !important;
    }

    .hospital-overlay .desc {
        display: none !important;
    }

    .hospital-system-card {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 0px !important;
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 0px !important;
    }

    .hospital-overlay {
        height: 96px;
    }

    .hospital-system-card .hospital-overlay h3 {
        font-size: 16px;
        margin: 0;
    }

    .hospital-overlay h3 {
        padding-left: 0px;
    }

    .vision-title {
        font-size: 30px !important;
    }

    .hospital-system-card .hospital-overlay .hospital-desc {
        display: none;
    }

    .hospital-main-desc {
        display: block;
        font-size: 14px;
    }

    .hospital-overlay {
        height: 96px;
    }

    /* Pagination slider */
    .hospital-pagination-slider {
        position: relative;
        width: 66px;
        height: 10px;
        background: #e5e5e5;
        border-radius: 999px;
        margin: 0 auto 0;
        overflow: hidden;
    }

    .hospital-pagination-progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--brand-green, #006940);
        border-radius: 999px;
        transition: width 0.4s ease;
    }

    .hospital-cards {
        scrollbar-width: none; /* Firefox */
    }
    .hospital-cards::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
}

/* History popup */
.history-popup-global {
    position: fixed;
    width: 420px;
    height: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-popup, #319e95);
    z-index: 9999;
    overflow: hidden;
    animation: fadeInUp 0.3s ease-out;
}

.history-popup-global img {
    width: 100%;
    display: block;
}

.history-popup-content-close {
    width: 30px !important;
    height: 30px !important;
    border-top: 0px !important;
    padding: 0px !important;
    justify-content: flex-end;
    align-self: end;
}

/* Nội dung popup */
.history-popup-global {
    padding: 10px 10px;
}

.history-popup-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-popup-content img {
    padding: 20px;
    width: 390px;
    height: 226px;
}

.history-popup-global h4 {
    font-size: 18px;
    color: var(--brand-green, #006940);
    font-weight: 600;
    margin-bottom: 8px;
}

.history-popup-global p {
    font-size: 15px;
    color: var(--text-color, #2d2d2d);
    line-height: 1.6;
    margin: 0;
    padding: 10px;
}

/* Popup animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header floating button */
.fixed-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 9999;
}

.fixed-buttons a img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s;
}

.fixed-buttons button:first-child img {
    width: 52px;
    height: 52px;
}

.fixed-buttons button {
    all: unset;
    cursor: pointer;
    display: inline-block;
}
.fixed-buttons button img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s;
}

.fixed-buttons a img:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Pluse Effect */
.fixed-buttons a.pulse {
    position: relative;
    display: inline-block;
}

.fixed-buttons a.pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: pulseAnim 2s infinite;
}

.fixed-buttons a.appointment::after {
    background: #319e95;
}

.fixed-buttons a.hotline::after {
    background: #ed1926;
}

.fixed-buttons a.chatbot::after {
    background: #ffc107;
}

.fixed-buttons a.scroll-top {
    padding: 0px;
}

.scroll-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s;
    animation: pulse 5s ease-in-out infinite;
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

@keyframes pulseAnim {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.m-fixed-buttons {
    display: none;
}

@media (max-width: 480px) {
    .fixed-buttons {
        display: none;
    }

    .m-fixed-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: stretch;
        z-index: 9999;
        width: 100%;
        height: 50px;
        background: #fff8f5;
    }

    .m-fixed-buttons > div {
        width: min(var(--container), 100%);
        height: 50px;
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        align-items: center;
    }

    .m-fixed-buttons > div > a {
        display: block;
        text-align: left;
        flex: 1;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 6px;

        /* height: 34px; */
        /* border-radius: 20px; */
        /* background: #ffffff; */
        /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
        /* cursor: pointer; */
    }

    .m-fixed-buttons > div > a:nth-child(2) {
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
    }

    .m-fixed-buttons span {
        font-size: 14px;
        line-height: 1.4;
    }

    .m-fixed-buttons img {
        width: 24px;
        height: 24px;
    }

    .m-fixed-buttons .call-hotline-text {
        color: #c1141f;
    }

    .m-fixed-buttons .find-doctor-text {
        color: #d6982f;
    }

    .m-fixed-buttons .booking-text {
        color: #28a745;
    }
}

/* News List */
.news-section {
    width: 85%;
    padding: 0px 0px 65px 0px;
    margin: 0 auto;
}

.news-header {
    display: flex;
    flex-direction: column;
    /* gap: 16px; */
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.news-header h2 {
    font-size: 48px;
    font-weight: 700;
    margin: 0px;
    padding-top: 20px;
    padding-bottom: 39px;
    color: var(--brand-green, #006940);
}

.news-header .line {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.news-filters-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.news-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.news-filters::-webkit-scrollbar {
    display: none;
}

.news-filters button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.news-filters button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.news-filters button {
    height: 45px;
    padding: 10px 20px;
    border: 1px solid var(--brand-green, #006940);
    background: var(--bg, #ffffff);
    color: var(--brand-green, #006940);
    border-radius: 20px;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
}

.news-filters button.active,
.news-filters button:hover {
    background: var(--brand-green, #006940);
    color: var(--bg, #ffffff);
    border-color: var(--brand-green, #006940);
}

.news-search input {
    height: 45px;
    width: 360px;
    padding: 8px 16px;
    border: 1px solid var(--brand-green, #006940);
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

.news-search {
    position: relative;
    width: 360px;
    display: inline-block;
}

.news-search img {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    pointer-events: none;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.news-card {
    height: 607px;
    border: 1px solid var(--border-card, #a5d6a7);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    background: var(--bg, #ffffff);
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.news-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.news-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.news-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

p img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #777;
}

.news-meta .category {
    color: var(--category-color, #28a745);
    font-weight: 400;
    font-size: 16px;
}

.news-meta {
    color: var(--text-color, #2d2d2d);
}

.news-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color, #2d2d2d);
    line-height: 1.4;
    margin: 0px;
}

.news-body p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Giới hạn 2 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: var(--detail-color, #676869);
    line-height: 1.6;
    margin: 1px 0;
}

.read-more {
    font-size: 16px;
    color: var(--read-more-color, #5c5c5c);
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
}

.read-more:hover {
    text-decoration: underline;
}

.news-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.news-footer img {
    width: 18px;
    height: 18px;
}

.news-red-more {
    display: flex;
    justify-content: flex-end;
}

.load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 auto;
    background: transparent;
    color: var(--brand-green, #006940);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 16px;
    width: fit-content;
}

/* News Details */
.news-detail-container {
    display: flex;
    gap: 30px;
    width: 85%;
    margin: 0 auto;
    padding: 0px;
}

/* News content */
.news-detail-content {
    flex: 3;
}

.news-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--brand-green, #006940);
}

.news-detail-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-top: 22px;
    min-height: 2.6em;
    font-size: 28px;
    color: var(--brand-green, #006940);
}

.news-detail-title-full {
    line-height: 1.3;
    margin-top: 22px;
    font-size: 28px;
    color: var(--brand-green, #006940);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.news-meta {
    display: flex;
    height: 42px;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: 16px;
    color: #777;
}

.news-details-meta {
    display: flex;
    height: 42px;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: 16px;
    color: #777;
}

.news-meta-date-author {
    display: flex;
    align-items: center;
    gap: 50px;
}

.news-meta-date-author .date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.news-meta-date-author .author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.news-meta-share {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    gap: 16px;
}

.news-meta-share .share {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.news-meta-share button {
    all: unset;
    cursor: pointer;
    display: inline-block;
}

.news-quickview {
    background: #f8fdf8;
    border-radius: 16px;
    padding: 30px;
}

.news-quickview h2 {
    font-size: 30px;
    margin-bottom: 10px;
}

.news-quickview ul {
    padding-left: 0px;
}

.news-quickview p {
    margin-bottom: 5px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--brand-green, #006940);
    cursor: pointer;
}

.news-body h3 {
    height: 50px;
    color: var(--text-color, #2d2d2d);
}

.news-body p {
    height: 50px;
    margin: 10px 0;
    line-height: 1.6;
}

.news-body-details {
    height: auto;
    padding-top: 39px;
    padding-bottom: 291px;
}

.news-body-details p {
    margin: 16px 0px;
    color: var(--text-color, #2d2d2d);
}

/* Sidebar */
.news-sidebar {
    width: 430px;
    flex: 1;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0px;
}

/* New relate */
.related-news h3 {
    margin: 0px;
    margin-bottom: 30px;
    font-size: 32px;
    color: var(--brand-green, #006940);
}

.related-news ul {
    list-style: none;
    padding: 0;
    gap: 31px;
}

.related-news li {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    padding: 15px 0px;
}

.related-news img {
    width: 99px;
    height: 99px;
    object-fit: cover;
    border-radius: 8px;
}

.related-news p {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-text, #0b1220);
}

/* Form register */
.register-form {
    background: var(--bg, #ffffff);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--brand-green, #006940);
}

.register-form h3 {
    color: var(--brand-green, #006940);
    margin-bottom: 15px;
    font-size: 34px;
    margin: 0px;
    text-align: center;
}

.register-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.register-form input,
.register-form select,
.register-form textarea {
    width: 100%;
    height: 56px;
    padding: 10px;
    border: 1px solid var(--place-holder, #e0e0e0);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    font-family: var(--font-body);
}

input::placeholder,
textarea::placeholder {
    color: var(--place-holder, #e0e0e0);
    opacity: 1;
}

input[type='date']:invalid {
    color: var(--place-holder, #e0e0e0);
    opacity: 0.5;
}

input[type='date']:valid {
    color: #5c5c5c;
}

.register-form .submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: red;
    color: var(--bg, #ffffff);
    opacity: 0.5;
    border: none;
    border-radius: 28px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.register-form .submit-btn img {
    width: 30px;
    height: 30px;
}

.register-form span {
    font-size: 16px;
}

.info {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.required-label::after {
    content: ' (*)';
    color: red;
    font-weight: normal;
}

.register-form textarea {
    min-height: 80px;
    resize: vertical;
}

.register-form .submit-btn {
    padding: 12px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 28px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.register-form .submit-btn:hover {
    background: red;
    opacity: 1;
}

.register-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background: url('/bw_image/ic_chevron-down.png') no-repeat right 15px center;
    background-color: #fff;
    padding-right: 50px;
    border: 1px solid var(--place-holder, #e0e0e0);
    border-radius: 12px;
}

.register-form select:invalid {
    color: var(--place-holder, #e0e0e0);
}

.news-details-more {
    display: none;
}

@media (max-width: 1024px) {
    .news-detail-container {
        flex-direction: column;
    }
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-detail-title {
        margin: 0 auto;
        width: 90%;
        margin-top: 22px;
    }

    .news-detail-title-full {
        margin: 0 auto;
        width: 90%;
        margin-top: 22px;
    }

    .news-meta {
        height: 30px !important;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        height: auto;
    }

    .news-meta-date-author {
        width: 100%;
        padding-top: 10px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .news-body-details {
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .news-body-details p {
        margin: 0px;
    }

    .news-meta-share {
        height: 20px;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .news-section {
        width: 95%;
    }

    .news-grid {
        padding-bottom: 0px;
    }

    .news-body {
        padding: 10px;
    }

    .news-detail-container {
        gap: 0px;
        width: 100%;
        margin: auto;
    }

    .news-details-meta {
        width: 100%;
        padding: 0 5%;
        display: flex;
        height: auto;
        align-items: flex-start;
        justify-content: space-between;
        font-size: 16px;
        gap: 16px;
        flex-direction: column;
        border-top: 1px solid #e6f4ee;
    }

    .news-filters button {
        height: 29px;
        font-size: 14px;
        padding: 5px 15px;
    }

    .news-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .news-search {
        width: 100%;
    }

    .news-search input {
        width: 100%;
    }

    .news-department-select {
        width: 100%;
    }

    .news-search-container {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .news-header h2 {
        font-size: 28px;
        padding-bottom: 20px;
        padding-top: 15px;
    }

    .news-filters {
        padding-bottom: 20px;
    }

    .news-grid {
        gap: 26px;
    }

    .news-card {
        height: 476px;
    }

    /* News title - giới hạn 3 dòng */
    .news-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        margin: 8px 0;
        min-height: 2.6em;
    }

    .news-image img {
        height: 263px;
    }

    .category {
        font-size: 14px !important;
    }

    .news-body h3 {
        height: 66px;
        font-size: 16px;
        flex-direction: column;
    }

    .news-description {
        height: 49px;
    }

    .news-header .line {
        flex-direction: column;
        gap: 0px;
    }
    .news-search input {
        width: 100%;
        border-radius: 4px;
        padding: 10px;
    }
    .news-filters-wrapper {
        width: 95vw;
    }

    /* Details */
    .news-title {
        font-size: 24px;
    }

    .news-sidebar-bar {
        width: 100%;
        height: 10px;
        /* background: var(--border-line-new-details, #f4f4f4); */
    }

    .news-meta-date-author .author img,
    .news-meta-date-author .date img {
        width: 20px;
        height: 20px;
    }
    .news-meta-share .share img {
        width: 20px;
        height: 20px;
    }
    .news-sidebar {
        width: 90%;
    }

    .related-news p {
        font-weight: 600;
        font-size: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .related-news h3 {
        margin-bottom: 20px;
    }

    .related-news ul {
        margin: 0px;
        display: flex;
        flex-direction: column;
        margin: 0px;
        gap: 10px;
    }

    .related-news img {
        border-radius: 8px;
    }

    .related-news li {
        height: 100px;
    }

    .news-detail-container {
        gap: 0px;
        width: 100%;
    }

    .register-form {
        display: none;
    }
    .news-details-more {
        height: 44px;
        width: 100%;
    }

    .news-details-more {
        display: flex;
        justify-content: flex-end; /* Canh phải */
        margin-top: 12px;
    }

    .news-details-more button {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        color: var(--brand-green, #006940);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        padding: 0;
        transition: color 0.2s ease;
    }

    .news-details-more button img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }
}

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

/* Popup Overlay */

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

/* Container */
.popup-container {
    position: relative;
    background: var(--bg, #ffffff);
    display: flex;
    flex-direction: row;
    border-radius: 16px;
    overflow: hidden;
    width: 85%;
    height: 525px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.popup-container > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.popup-text,
.popup-image {
    position: relative;
    z-index: 1;
}

.popup-content-desc {
    flex: 1;
}

/* Text side */
.popup-text {
    flex: 1.5;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    gap: 12px;
    min-height: 0px;
}

.popup-header {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.popup-icon {
    width: 90px;
    height: 90px;
}

.vision-title {
    margin: 0;
    font-size: 48px;
    color: var(--brand-green, #006940);
}

.mission-title {
    margin: 0px;
    font-size: 48px;
    color: var(--brand-green, #006940);
}

.popup-content p {
    margin: 8px 0;
    color: var(--text-color, #2d2d2d);
    line-height: 1.6;
    font-size: 20px;
    overflow-y: auto;
    display: block;
    max-height: 416px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px;
}

.thumb-item.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0) 87%);
    border-radius: inherit;
}

/* Image side */
.popup-image {
    position: relative;
    flex: 1;
    aspect-ratio: 1 / 1;
}

.popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-close img {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

/* Close button */
.popup-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: var(--facility-red, #c1141f);
    color: var(--brand-text, #ffffff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-bottom-left-radius: 100%;
    transition: background 0.3s ease;
    transform: translate(10px, -10px);
}

/* Responsive */
@media (max-width: 768px) {
    .popup-container {
        flex-direction: column;
        height: 85%;
        width: 85%;
    }

    .popup-header {
        overflow-y: scroll;
        min-height: 0;
        scrollbar-gutter: stable;
    }

    .popup-container > img {
        width: calc(100% - 32px);
        height: 50%;
        margin: 16px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        object-fit: cover;
        display: block;
    }

    .popup-content-desc {
        flex: 1;
    }

    .mission-title {
        font-size: 34px;
    }

    .popup-content p {
        font-size: 16px;
    }

    .popup-text {
        flex: 1;
        padding: 16px;
    }

    .popup-image {
        flex: 2;
        margin: 16px;
    }

    .popup-image {
        order: -1;
    }

    .popup-image {
        position: relative;
        flex: 1;
        aspect-ratio: 1 / 1;
    }

    .popup-close {
        position: absolute;
        top: 11px;
        right: 11px;
        width: 59px;
        height: 60px;
        background: var(--facility-red, #c1141f);
        color: var(--brand-text, #ffffff);
        border: none;
        cursor: pointer;
        display: flexs;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border-bottom-left-radius: 100%;
        transition: background 0.3s ease;
        border-top-right-radius: 8px;
    }

    .popup-close img {
        width: 20px;
        height: 20px;
        object-fit: cover;
        transform: translate(5px, -5px);
    }

    .popup-icon {
        width: 48px;
        height: 48px;
    }

    /* Scrollbar cho Chrome, Edge, Safari */
    .popup-header::-webkit-scrollbar {
        width: 8px;
    }

    .popup-header::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 16px;
    }

    .popup-header::-webkit-scrollbar-thumb {
        background-color: #006940;
        border-radius: 16px;
        border: 2px solid #f0f0f0;
    }

    .popup-header::-webkit-scrollbar-thumb:hover {
        background-color: #008c5c;
        border-radius: 16px;
    }

    /* Firefox */
    .popup-header {
        scrollbar-width: thin;
        scrollbar-color: var(--brand-green, #006940) #f0f0f0;
    }
}

/* Contact Us */
.contact-us {
    width: 85%;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.contact-us .space {
    width: 540px;
    height: auto;
}

.contact-us .company {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.company {
    width: 100%;
}

.company-info {
    background: var(--bg-color-contact-us, #fff5f5);
    border: 1.2px solid var(--border-color-contact-us, #ffc107);
    padding: 20px 50px;
    border-radius: 16px;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
}

.company-info-title {
    border-bottom: 1px solid var(--border, #dddddd);
    display: flex;
    flex-direction: column;
    padding: 30px 0;
    gap: 20px;
}

.company-info-title h2 {
    color: var(--brand-green, #006940);
    margin-bottom: 10px;
    margin: 0px;
    font-weight: 700;
    font-size: 30px;
}

.company-info ul {
    list-style: none;
    margin-top: 10px;
    padding-inline-start: 0px;
}
.company-info ul li {
    margin-bottom: 14px;
}

.company-info p,
.company-info li {
    display: flex;
    gap: 8px;
    font-size: 18px;
    color: #2d2d2d;
}

.company-info p img {
    width: 22px;
    height: 22px;
}

.company-info img {
    width: 34px;
    height: 34px;
}

.contact-us .hospital-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hospital-card-contact-us {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    padding: 20px;
    gap: 20px;
}

.hospital-contact-us-info {
    flex: 1;
    height: auto;
    min-height: 410px;
    background: var(--bg-color-card-contact-us, #daedd5);
    border-radius: 25px;
    padding-left: 100px;
    padding-bottom: 30px;
    padding-top: 30px;
    padding-right: 30px;
    margin-left: -100px;
    z-index: 0;
}

.hospital-contact-us-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hospital-contact-us-info p {
    color: var(--text-color, #2d2d2d);
    font-size: 18px;
}

.hospital-contact-us-info-cert {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hospital-img {
    border-radius: 8px;
    overflow: hidden;
}
.hospital-contact-us-img img {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    z-index: 1;
    object-fit: cover;
}

.hospital-contact-us-img {
    width: 321px;
    height: 321px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hospital-contact-us-info h3 {
    font-size: 30px;
    color: var(--brand-green, #006940);
    margin: 0px;
    font-weight: 600;
    margin-bottom: 10px;
}

.hospital-contact-us-info ul {
    list-style: none;
    padding: 26px 0;
    margin: 0px;
}

.hospital-contact-us-info ul li {
    display: flex;
    font-size: 18px;
    margin-bottom: 8px;
}

.hospital-contact-us-info .hospital-map {
    font-weight: normal;
    text-decoration: none;
}

.hospital-map {
    position: absolute;
    bottom: 35px;
    color: var(--read-more-color, #5c5c5c);
    cursor: pointer;
}

.hospital-number {
    position: absolute;
    bottom: 12px;
    right: 40px;
    font-size: 64px;
    font-weight: bold;
    opacity: 0.3;
    color: var(--facility-green, #28a745);
}

.contact-us-form {
    position: fixed;
    bottom: 50px;
    right: 90px;
    width: 360px;
    max-height: 90vh;
    padding: 20px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

.contact-us-form form {
    padding-top: 30px;
}

.contact-us-form h3 {
    margin-bottom: 20px;
    font-size: 30px;
    margin: 0px;
    padding-bottom: 20px;
    color: var(--brand-green, #006940);
}

.contact-us-form .info {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}
.contact-us-form > span {
    font-size: 18px;
}

.contact-us-form input {
    width: 100%;
    height: 56px;
    padding: 10px;
    border: 1px solid var(--place-holder, #e0e0e0);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
}
.contact-us-form textarea {
    width: 100%;
    height: 140px;
    padding: 10px;
    border: 1px solid var(--place-holder, #e0e0e0);
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--font-body);
    outline: none;
}

.upload-cv {
    position: relative;
    width: 100%;
}

.upload-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    padding: 0 12px;
    background-color: var(--bg-color-contact-mobile, #ffb74d);
    color: white;
    border: none;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
}

.contact-us-form .submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-color-button-red, #ed1926);
    color: var(--bg, #ffffff);
    border: none;
    border-radius: 28px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-us-form .submit-btn:hover {
    background: var(--brand-green, #006940);
    opacity: 1;
}

/* Responsive Contact Us */
.contact-tab {
    width: 43px;
    height: 209px;
    position: fixed;
    top: 280px;
    right: 0;
    background: var(--bg-color-contact-mobile, #ffb74d);
    color: var(--bg, #ffffff);
    font-weight: normal;
    padding: 20px 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 20px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    cursor: pointer;
    border: 2px solid var(--border-color-contact, #a5d6a7);
    font-size: 16px;
    text-align: center;
    z-index: 1000;
}

.close-btn-contact-us {
    position: absolute;
    top: 10px;
    right: 0px;
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
}

.close-btn-contact-us img {
    width: 48px;
    height: 48px;
}

.close-btn-contact-us img::hover {
    color: transparent;
}

.close-btn-contact-us::hover {
    color: transparent;
}

@media (min-width: 769px) {
    .contact-tab {
        display: none;
    }
}

@media (max-width: 768px) {
    .hospital-contact-us-img img {
        width: 215px;
        height: 215px;
    }

    .hospital-contact-us-img {
        width: unset;
        height: unset;
    }

    .space {
        display: none;
    }

    .contact-us {
        width: 100%;
        padding: 10px 0px;
    }

    .company-info {
        width: 85%;
        margin: 0 auto;
        padding: 10px 20px;
        height: 508px;
    }

    .hospital-contact-us-info {
        gap: 16px;
    }

    .hospital-contact-us-info ul {
        padding: 0px;
    }

    .company-info p,
    .company-info li {
        font-size: 16px;
    }

    .company-info-title {
        padding: 0px;
        padding-bottom: 13px;
        gap: 8px;
        background-color: #fff8f5;
    }

    .separate {
        width: calc(100% + 40px);
        height: 1px;
        background: var(--bg-border-color, #e0e0e0);
        margin-left: -20px;
    }

    .hospital-list {
        gap: 39px !important;
        padding-bottom: 67px !important;
    }

    .hospital-card-contact-us {
        flex-direction: column;
        padding: 0px;
        height: auto;
    }

    .hospital-contact-us-info {
        width: 100%;
        margin: 0 auto;
        min-height: unset;
        height: auto;
        margin-top: -40px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 70px;
    }

    .hospital-contact-us-info h3 {
        margin-bottom: 0px;
    }

    .company-info-title {
        border: none;
    }

    .company-info-title > :nth-child(2) {
        display: block;
    }

    .company-info ul li {
        align-items: center;
    }

    .company-info .cert {
        display: flex;
        gap: 10px;
        flex-direction: column;
    }

    .hospital-contact-us-info ul li {
        display: flex;
        gap: 6px;
        flex-direction: row;
    }

    .hospital-contact-us-info ul li img {
        width: 24px;
        height: 24px;
    }

    .hospital-number {
        font-size: 52px;
        bottom: 12px;
        right: 16px;
    }

    .hospital-map {
        font-size: 16px;
    }

    .contact-us-form {
        display: none;
    }

    .contact-us-form.show {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        height: fit-content;
        max-width: 400px;
        background: var(--bg, #ffffff);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        z-index: 2000;
    }

    .close-btn-contact-us {
        display: block;
        position: absolute;
        top: 10px;
        right: 0px;
        border: none;
        background: none;
        font-size: 20px;
        cursor: pointer;
    }

    .contact-us-form.show span {
        font-size: 14px;
    }

    .close-btn-contact-us img {
        width: 48px;
        height: 48px;
    }

    .close-btn-contact-us::hover {
        background: transparent;
        opacity: 1;
    }
}

/* Specialist Doctor */
.doctors-team {
    width: 85%;
    margin: 0 auto;
    padding: 40px 0;
}

.doctors-team h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: left;
    margin: 0px;
    color: var(--brand-green, #006940);
}

.filter-bars-header {
    padding: 40px;
    margin-top: 25px;
    border-radius: 16px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
}

.filter-bar {
    height: 74px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.filter-bar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('/bw_image/ic_chevron-down.png') no-repeat right 15px center;
    background-color: #fff;
    padding-right: 50px;
    border: 1px solid var(--place-holder, #e0e0e0);
    border-radius: 12px;
    color: #dddddd;
}

.filter-bar select:invalid {
    color: var(--brand-text, #0b1220);
}

.filter-bars {
    display: flex;
    gap: 24px;
    flex-direction: column;
    justify-content: flex-end;
}

.doctor-btn-search {
    width: 155px;
    padding: 10px 20px;
    background: var(--seach-color, #ffb74d);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    align-self: flex-end;
}

.filter-bar select,
.filter-bar input {
    width: 100%;
    height: 44px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #dfdfdf;
    min-width: 180px;
}

.filter-bar > div,
.filter-bar > input {
    flex: 1;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.filter-bar input {
    align-self: flex-end;
}

.filter-input {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    border-radius: 12px !important;
}

.filter-input .ant-input::placeholder {
    line-height: 1.5 !important;
    vertical-align: middle !important;
}

.doctors-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 80px 0px;
}

.doctor-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
    padding: 16px;
    transition: transform 0.2s ease;
}

.doctor-card:hover {
    transform: translateY(-4px);
}

.doctor-photo {
    width: 100%;
    max-width: 160px;
    margin: 0 auto 12px;
    border-radius: 12px;
}

.doctor-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text, #0b1220);
    margin-bottom: 4px;
}

.doctor-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-text, #0b1220);
    margin: 6px 0;
}

.doctor-position {
    font-size: 14px;
    color: var(--brand-text, #0b1220);
}

.doctor-specialty {
    font-size: 13px;
    color: var(--brand-text, #0b1220);
    margin: 6px 0 12px;
}

.btn-appointment {
    padding: 8px 16px;
    border-radius: 6px;
    background: #51be9d;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-appointment:hover {
    background: var(--brand-green, #006940);
}

.pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.pagination button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #e0e0e0;
    color: var(--brand-text, #0b1220);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.pagination button:hover {
    background: #cfcfcf;
}

.pagination button.active {
    background: var(--brand-green, #006940);
    color: var(--bg, #ffffff);
}

.pagination button:first-child,
.pagination button:last-child {
    background: transparent;
    color: var(--brand-text, #0b1220);
    font-size: 20px;
    width: auto;
    height: auto;
    border-radius: 0;
}

@media (max-width: 1333px) {
    .doctors-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .doctors-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .filter-bars {
        height: 351px !important;
        justify-content: center;
    }
    .filter-bar {
        height: auto;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .doctors-team {
        padding: 10px 0px;
    }

    .filter-bars-header {
        padding: 0px 16px;
        margin-top: 0px;
    }

    .filter-bar > div,
    .filter-bar > input {
        width: 100%;
    }

    .doctors-team h2 {
        font-size: 28px;
        margin-bottom: 21px;
    }
    .doctors-grid {
        grid-template-columns: 1fr;
        padding-top: 52px;
    }
    .filter-bars {
        height: 409px;
        justify-content: center;
    }
    .filter-bar {
        height: auto;
        flex-direction: column;
    }
    .doctor-btn-search {
        width: 92px;
        padding: 6px 16px;
        height: 33px;
        font-size: 14px;
    }
    .filter-item span {
        font-size: 14px;
        color: var(--text-color, #2d2d2d);
    }
}

/* Doctor details */
.doctor-details {
    width: 85%;
    margin: 0 auto;
    padding: 28px 0px;
    font-family: sans-serif;
}

/* Header */
.doctor-details__header {
    display: flex;
    height: 400px;
    align-items: center;
    gap: 20px;
    border-radius: 12px;
}

.doctor-details__avatar {
    width: 325px;
    aspect-ratio: 1 / 1;
    z-index: 2;
    object-fit: cover;
    border-radius: 30px;
    border: 1px solid var(--border-specialist-doctor, #e6f4ee);
}

.doctor-details__info {
    padding-left: 100px;
    padding-top: 28px;
    padding-right: 28px;
    padding-bottom: 28px;
    height: 400px;
    flex: 1;
    display: flex;
    gap: 28px;
    margin-left: -100px;
    background: var(--hospital-register-background, #e6f4ee);
    border-radius: 25px;
    border: 1px solid var(--facility-green, #28a745);
    flex-direction: column;
}
.doctor-details__info_title {
    height: 153px;
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.doctor-details__info_desc {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

.doctor-details__info_title h1 {
    font-size: 48px;
    margin: 0px;
}

.doctor-details__info p {
    font-size: 20px;
}

.doctor-details__intro {
    height: 87px;
    line-height: 1.6;
    color: var(--details-text-color, #5b5b5b);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    line-height: 1.5;
    height: calc(1.5em * 3);
}

.doctor-details__position,
.doctor-details__department,
.doctor-details__btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doctor-details__position img,
.doctor-details__department img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.doctor-details__name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #006940;
}

.doctor-details__position {
    font-size: 16px;
    font-weight: 500;
}

.doctor-details__department p {
    color: var(--text-color, #2d2d2d);
}

.doctor-details__position p {
    color: var(--text-color, #2d2d2d);
}

.doctor-details__department {
    font-size: 15px;
}

.doctor-details__btn {
    width: 220px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 28px;
    background: var(--cta, #ed1926);
    color: var(--bg, #ffffff);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
}
.doctor-details__btn-pr {
    background: white;
    display: flex;
    justify-content: center;
}

.doctor-details__btn img {
    width: 32px;
    height: 32px;
}

.doctor-details__btn:hover {
    background: var(--brand-green, #004428);
    border: 1px solid var(--bg, #ffffff);
}

/* Sections */
.doctor-details__section {
    margin-bottom: 16px;
    overflow: hidden;
}

/* Header bar */
.doctor-details__section-header {
    background: #f5f5f5;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.doctor-details__section-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    color: #006940;
}

.doctor-details__section-header img {
    width: 40px;
    height: 40px;
}

.doctor-details__icon {
    transition: transform 0.3s ease;
}
.doctor-details__icon.rotate {
    transform: rotate(180deg);
}

/* Content collapse/expand */
.doctor-details__content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    padding: 0 18px;
}

.doctor-details__content.open {
    max-height: 2000px;
    opacity: 1;
    font-size: 20px;
    padding: 18px;
    color: var(--details-text-collapse-color, #313131);
}

.doctor-details__content.open p {
    font-size: 20px;
    color: var(--details-text-collapse-color, #313131);
}

.doctor-details-collap {
    padding: 31px 0px;
}

/* List */
.doctor-details__list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    line-height: 1.6;
}

/* 404 page */
.not_found_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    text-align: center;
    gap: 68px;
}
.not_found_body_title {
    font-size: 20px;
    color: #2d2d2d;
}
.not_found_body_button {
    width: 313px;
    height: 50px;
    display: inline-block;
    padding: 12px;
    background: var(--brand-green);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
}

/* doctor-details__header */
@media (max-width: 768px) {
    .doctor-details {
        width: 100%;
        padding-bottom: 18px;
    }
    .doctor-details__info {
        width: 95%;
    }
    .doctor-details__avatar {
        width: 215px;
        height: 215px;
        border-radius: 16px;
    }
    .doctor-details__info_title h1 {
        font-size: 26px;
    }
    .doctor-details__position p {
        font-size: 14px;
    }
    .doctor-details__department p {
        font-size: 14px;
    }
    .doctor-details__content.open p {
        font-size: 14px;
    }
    .doctor-details__position img {
        width: 20px;
    }
    .doctor-details__department img {
        width: 20px;
    }
    .doctor-details__intro {
        font-size: 14px !important;
    }
    .doctor-details__content.open {
        width: 95%;
        margin: auto;
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .doctor-details__btn {
        width: 147px;
        padding: 5px 10px;
        font-size: 14px;
        gap: 5px;
    }
    .doctor-details__btn-pr .doctor-details__btn {
        width: 159px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .doctor-details__info_title {
        gap: 10px;
    }
    .doctor-details__section-title {
        font-size: 24px;
    }
    .doctor-details__section-header {
        height: 53px;
    }
    .doctor-details__info_desc {
        gap: 16px;
    }
    .doctor-details__header {
        flex-direction: column;
    }
    .doctor-details__header {
        height: auto;
    }
    .doctor-details__info {
        margin-top: -40px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        height: 439px;
        margin-left: 0px;
    }
    .doctor-details__info {
        gap: 26px;
    }
}

/* Specialty */
/* Specialty Section */
.specialty-section {
    width: 85%;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
    background-color: #fff;
}

.specialty-title {
    font-size: 48px;
    margin: 0px;
    margin-top: 30px;
    font-weight: 700;
    color: var(--brand-green, #006940);
    margin-bottom: 40px;
    text-align: left;
}

.specialty-details-title {
    font-size: 48px;
    margin: 0px;
    margin-top: 30px;
    font-weight: 700;
    color: var(--brand-green, #006940);
    margin-bottom: 40px;
    text-align: left;
}

/* Grid layout */
.specialty-grid {
    padding: 0 50px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 340px));
    gap: 60px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Card */
.specialty-card {
    position: relative;
    width: 100%;
    height: 388px;
    border-radius: 12px;
    box-shadow: unset;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.specialty-list-card {
    position: relative;
    width: 100%;
    height: 388px;
    background: var(--bg, #ffffff);
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.specialty-list-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.specialty-list-image {
    width: 100%;
    height: 295px;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.specialty-list-image img {
    width: 100%;
    height: 295px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.specialty-list-card:hover .specialty-image img {
    transform: scale(1.05);
}

.specialty-image {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    height: 250px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.specialty-image img {
    width: 100%;
    height: 295px;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Info */
.specialty-list-info h3 {
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 600;
}

.specialty-info {
    padding: 16px 20px 20px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
    flex-grow: 1;
}

.specialty-info h3 {
    align-self: flex-start;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
}

.specialty-info a {
    font-size: 16px;
    color: #444;
    text-decoration: none;
    transition: color 0.2s;
}

.specialty-info a:hover {
    color: var(--brand-green, #006940);
}

/* Button */
.specialty-more {
    margin-top: 40px;
}

.specialty-more button {
    width: 155px;
    height: 44px;
    background: var(--brand-green, #006940);
    color: white;
    padding: 10px 28px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.specialty-more button:hover {
    background: #51be9d;
}

.specialty-link span {
    color: #5c5c5c;
}

.specialty-link {
    position: absolute;
    bottom: 13px;
    right: 10px;
    text-align: right;
}

/* Service Product Overlay Styles */
.service-card-expandable {
    position: relative;
}

.service-card-expandable .specialty-list-image {
    position: relative;
    z-index: 1;
}

.service-card-expandable .specialty-list-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: #ffffff;
    padding: 16px 20px 20px 20px;
}

.service-card-expandable .service-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.service-overlay-content {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
    padding: 20px;
    animation: slideUp 0.3s ease-out;
}

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

.service-overlay-content h3 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #2d2d2d;
    padding: 0;
}

/* Service Product Description Styles */
.service-description {
    line-height: 1.8 !important;
    color: #4b5563 !important;
}

.service-description p {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #4b5563;
}

.service-description ul,
.service-description ol {
    margin: 8px 0;
    padding-left: 20px;
}

.service-description li {
    margin: 4px 0;
    line-height: 1.8;
}

.service-description h1,
.service-description h2,
.service-description h3,
.service-description h4,
.service-description h5,
.service-description h6 {
    color: #2d2d2d;
    margin: 16px 0 8px 0;
    font-weight: 600;
}

/* Service Product Booking Button Styles */
.service-booking-btn {
    margin-top: 12px;
}

.service-booking-btn a,
.service-booking-btn > * {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #006940 0%, #00a868 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 105, 64, 0.2);
}

.service-booking-btn a:hover,
.service-booking-btn > *:hover {
    background: linear-gradient(135deg, #005732 0%, #006940 100%);
    box-shadow: 0 6px 16px rgba(0, 105, 64, 0.3);
    transform: translateY(-2px);
}

.service-booking-btn a:active,
.service-booking-btn > *:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 105, 64, 0.25);
}

/* Responsive */
@media (max-width: 1024px) {
    .specialty-grid {
        padding: 0;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .specialty-section {
        width: 100%;
        padding: 30px 16px;
    }

    .specialty-card {
        height: 306px;
    }

    .specialty-title {
        margin-top: 8px;
        font-size: 32px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .specialty-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .specialty-title {
        font-size: 28px;
    }
}

/* Specialty details */
.specialty-detail {
    width: 85%;
    margin: 0 auto;
}

.specialty-details-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--brand-green, #006940);
    margin-bottom: 36px;
    text-align: left;
}

.specialty-details-description {
    flex: 1;
    height: 380px;
    background: var(--background-text-speciality-details, #f2f8f5);
    border-radius: 25px;
    margin-left: -87px;
    padding: 20px 20px 20px 87px;
    line-height: 1.6;
    font-size: 16px;
}

.specialty-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.specialty-image-details {
    flex-shrink: 0;
    width: 500px;
    height: 500px;
    z-index: 2;
}

.specialty-image-details img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.specialty-description {
    flex: 1;
    background: #f2f8f5;
    border-radius: 25px;
    margin-left: -87px;
    padding: 20px 20px 20px 87px;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

.specialty-description p,
.specialty-list li {
    font-size: 18px;
    margin: 0;
}

.specialty-list {
    list-style: none;
    padding: 26px 0 0 0;
    margin: 0;
}

.specialty-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    line-height: 1.3;
}

.specialty-list img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.specialty-details-content {
    margin-top: 33px;
    margin-bottom: 62px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .specialty-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .specialty-image {
        height: 233px;
        width: 100%;
        height: auto;
    }

    .specialty-description {
        margin-left: 0;
        padding: 20px;
    }

    .specialty-title {
        font-size: 28px;
        text-align: center;
    }

    /* Details */
    .specialty-details-title {
        margin: 0px;
        font-size: 28px;
        text-align: left;
    }
    .specialty-image-details {
        margin: 0 auto;
        width: 215px;
        height: 215px;
    }

    .specialty-details-content {
        margin: 0px;
        flex-direction: column;
        gap: 0px;
    }

    .specialty-details-description {
        height: auto;
        margin: auto 0;
        margin-top: -20px;
        padding: 30px 10px;
    }

    .specialty-detail {
        padding: 8px 0px;
    }
}

/* Popup appointment */
.appointment-popup__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.appointment-popup__container {
    width: 990px;
    height: 890px;
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 38px 45px;
    max-width: 95%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid #d4e6dc;
}

.appointment-popup__container_ {
    border-radius: 16px;
    padding: 30px 40px;
    border: 1px solid #a5d6a7;
}

.appointment-popup__close {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 24px;
    color: #555;
    cursor: pointer;
}

.appointment-popup__close img {
    width: 48px;
    height: auto;
}

.appointment-popup__title {
    font-size: 48px;
    font-weight: 700;
    margin: 0px;
    color: var(--brand-green, #006940);
    text-align: center;
    margin-bottom: 30px;
}

.appointment-popup__form {
    display: flex;
    flex-direction: column;
    /* gap: 30px; */
}

.appointment-popup__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 0px;
}

.appointment-popup__group {
    height: 94px;
}

.appointment-popup__group_ {
    display: flex;
    height: 143px;
    gap: 26px;
    flex-direction: column;
}

.appointment-popup__group__ {
    height: 118px;
}
.appointment-popup__group__ p {
    padding-bottom: 12px;
}

.appointment-popup__group__ textarea {
    height: 80px;
    padding-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

.appointment-popup__group p,
.appointment-popup__group span {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-color, #2d2d2d);
    font-weight: 400;
}

.appointment-popup__group input,
.appointment-popup__group select,
.appointment-popup__group textarea {
    width: 100%;
    height: 56px;
    padding: 10px;
    border: 1px solid var(--place-holder, #e0e0e0);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
}

.appointment-popup__group input:focus,
.appointment-popup__group select:focus,
.appointment-popup__group textarea:focus {
    border-color: var(--brand-green, #006940);
}

.appointment-popup__group textarea {
    resize: none;
    height: 80px;
}

.appointment-popup__time-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.appointment-popup__time-options button {
    border: 1px solid #ccc;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.appointment-popup__time-options button strong {
    display: block;
    font-weight: 600;
}

.appointment-popup__time-options button.active {
    background: #222;
    color: #fff;
    border-color: #222;
}

.appointment-popup__time-options button.other {
    background: #fff;
    border: 1px solid #ccc;
}

.appointment-popup__time-options button {
    width: 85px;
    height: 85px;
    gap: 10px;
}

.appointment-popup__submit {
    width: 100%;
    height: 46px;
    background: var(--bg-color-button-red, #ed1926);
    margin-top: 20px;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.appointment-popup__submit:hover {
    background: var(--brand-green, #006940);
}

select[name='hospital'] {
    font-size: 16px;
    padding: 10px 36px 10px 12px;
    border-radius: 8px;
    background-color: var(--bg, #ffffff);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/bw_image/ic_chevron-down.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    cursor: pointer;
}

select[name='department'] {
    font-size: 16px;
    padding: 10px 36px 10px 12px;
    border-radius: 8px;
    background-color: var(--bg, #ffffff);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/bw_image/ic_chevron-down.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    cursor: pointer;
}

select[name='doctor'] {
    font-size: 16px;
    padding: 10px 36px 10px 12px;
    border-radius: 8px;
    background-color: var(--bg, #ffffff);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/bw_image/ic_chevron-down.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .appointment-popup__container {
        padding-top: 44px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 12px;
    }

    .appointment-popup__group input,
    .appointment-popup__group select,
    .appointment-popup__group textarea {
        height: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .appointment-popup__group {
        height: auto;
    }

    .appointment-popup__grid {
        padding-top: 0px;
        padding-bottom: 10px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .appointment-popup__title {
        text-align: left;
        font-size: 28px;
        margin-bottom: 20px;
    }

    .appointment-popup__container_ {
        padding: 10px 10px;
    }
}

.doctor-btn-appointment {
    background: var(--brand-green, #006940);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.doctor-btn-appointment:hover {
    background: #038a58;
}

/* Job section */
.job-section {
    width: 85%;
    margin: 0 auto;
    padding: 26px 0px 73px 0px;
    background-color: var(--bg, #ffffff);
}

.job-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0px;
    padding-top: 26px;
    color: var(--brand-green, #006940);
    margin-bottom: 42px;
}

.job-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.job-tabs button {
    border: 1px solid #0b6530;
    background: transparent;
    border-radius: 60px;
    padding: 10px 24px;
    color: var(--brand-green, #006940);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.job-tabs button.active {
    background: var(--brand-green, #006940);
    color: var(--bg, #ffffff);
}

.job-list-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.job-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.job-category {
    margin: 0px;
    font-size: 32px;
    font-weight: 700;
    color: var(--brand-text, #0b1220);
    border-bottom: 1px solid var(--brand-green, #006940);
    padding-bottom: 8px;
}

.job-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.job-card {
    flex: 1;
}

.job-meta-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px;
    border: 1px solid var(--hospital-register-background, #e6f4ee);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

.job-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color, #2d2d2d);
    margin-bottom: 6px;
}

.job-dept {
    color: var(--text-details-job-color, #666666);
    font-size: 16px;
    margin-bottom: 21px;
}

.job-meta-details {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 205px;
    border: 1px solid var(--hospital-register-background, #e6f4ee);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    background: var(--bg, #ffffff);
    transition: transform 0.2s;
}

.job-meta {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.job-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color, #2d2d2d);
    font-size: 16px;
    margin-bottom: 6px;
}

.job-meta img {
    width: 20px;
    height: 20px;
}

.job-detail-btn {
    width: 112px;
    height: 32px;
    border-radius: 8px;
    background: var(--border-card, #a5d6a7);
    color: var(--bg, #ffffff);
    border: 1px solid var(--border-card, #a5d6a7);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.job-detail-btn:hover {
    background: var(--brand-green, #006940);
    color: var(--bg, #ffffff);
}

.job-view-more {
    text-align: center;
    color: #0b6530;
    cursor: pointer;
    font-weight: 500;
    margin-top: 10px;
}

.job-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    gap: 8px;
    color: var(--brand-green, #0b1220);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 0 auto;
}

.job-load-more img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .job-section {
        padding: 24px;
    }
    .job-list {
        grid-template-columns: 1fr;
    }
}

/* Job Detail */

.job-detail-page {
    width: 85%;
    margin: 0 auto;
    flex-direction: row;
    line-height: 1.6;
    padding-bottom: 112px;
}

.job-detail-page {
    width: 85%;
    margin: 0 auto;
    gap: 32px;
    line-height: 1.6;
}

.job-details-content {
    padding-right: 400px;
}

.pop-up-job-detail {
    flex: 1;
    padding: 24px;
    border-radius: 12px;
    height: auto;
}

.job-detail-title {
    font-size: 48px;
    color: var(--brand-green, #006940);
    margin-top: 95px;
    margin-bottom: 24px;
}

/* Summary card */
.job-summary-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    border-radius: 16px;
    padding: 30px 35px;
    margin: 0px 45px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    align-items: center;
}

.job-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.job-summary-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.job-summary-item .label {
    font-size: 14px;
    color: var(--text-details-job-color, #666666);
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.job-summary-item .value {
    font-size: 15px;
    color: var(--text-color-job, #111921);
    font-weight: 600;
    margin: 0;
}

.job-summary-item .highlight {
    color: #f0b800;
}

/* Cột chia sẻ (share) */
.job-summary-item.share {
    flex-direction: row;
    align-items: center;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.social-icons img {
    width: 30px;
    height: 30px;
    opacity: 0.9;
    cursor: pointer;
    transition: 0.2s;
}

.social-icons img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Content sections */
.job-section-content h2 {
    margin-top: 24px;
    font-size: 26px;
    color: var(--text-color, #2d2d2d);
}

.job-section-content ul {
    padding-left: 20px;
}

.job-section-content p {
    font-size: 16px;
    color: var(--text-color, #2d2d2d);
}

.job-section-content li {
    margin-bottom: 8px;
    list-style-type: disc;
}

.job-section-content li::marker {
    color: var(--border-card, #a5d6a7);
    font-size: 26px;
}

/* Deadline text */
.deadline {
    margin-top: 20px;
    font-weight: 500;
    color: var(--brand-green, #006940) !important;
}

/* Related jobs */
.related-jobs {
    margin-top: 60px;
}

.related-jobs h2 {
    font-size: 32px;
    border-bottom: 1px solid var(--brand-green, #006940);
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.related-card {
    background: #f9f9f9;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.related-info h3 {
    font-size: 15px;
    margin: 0;
    color: #1a1a1a;
}

.related-info p {
    font-size: 13px;
    color: #555;
    margin: 4px 0 8px;
}

.related-info ul {
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: #777;
}

.detail-btn {
    background: #e6f5ec;
    color: #006940;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.detail-btn:hover {
    background: #ccebd9;
}
/* Google Map Popup */
.gmap-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.gmap-container {
    position: relative;
    width: 800px;
    height: 800px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.gmap-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.gmap-close {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #fff;
    border: none;
    font-size: 20px;
    width: 48px;
    height: 48px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

@media (max-width: 678px) {
    .gmap-container {
        width: 95%;
        height: 650px;
        padding: 50px 10px;
    }
}

/* Error input */
.error-text {
    color: var(--cta, #ed1926);
    font-size: 16px;
    margin-top: 4px;
    display: block;
}

input.error,
textarea.error {
    border: 1px solid var(--cta, #ed1926) !important;
}

/* Doctor List - About Us */

.doctors_about_us {
    width: 85%;
    margin: auto;
    padding-top: 60px;
    padding-bottom: 47px;
}

.doctors__title_about {
    font-weight: bold;
    font-size: clamp(32px, 3.2vw, 48px);
    color: var(--text-color, #2d2d2d);
    margin: 0px;
}

.doctors__lead_about_us {
    font-size: 16px;
    padding-top: 30px;
    padding-bottom: 16px;
}

.doctors__title_about span {
    color: var(--brand-green, #006940);
}

.container_doctor_about_us {
    width: 100%;
}

.doctors__head_about_us {
    margin: 0px;
}

@media (max-width: 678px) {
    .doctors_about_us {
        padding-top: 17px;
        padding-bottom: 17px;
    }
}

.news-search-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Custom dropdown icon cho FilterSelect */
.filter-select .ant-select-arrow {
    color: #666;
}

.filter-select .ant-select-arrow svg {
    transition: transform 0.2s ease;
}

.filter-select.ant-select-open .ant-select-arrow svg {
    transform: rotate(180deg);
}

/* Custom search icon cho FilterInput */
.filter-input .ant-input-suffix {
    color: #666;
}

.filter-input .ant-input-suffix svg {
    display: block;
}

/* Select chuyên khoa */
.news-department-select {
    width: 360px;
}

.news-department-select .filter-select {
    width: 100%;
}

.news-department-select .ant-select-selector {
    height: 45px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    display: flex;
    align-items: center;
}

.news-department-select .ant-select-selection-placeholder,
.news-department-select .ant-select-selection-item {
    line-height: 25px !important;
}

/* Select hover state */
.news-department-select .ant-select-selector:hover {
    border-color: #006940 !important;
}

/* Select focus state */
.news-department-select .ant-select-focused .ant-select-selector,
.news-department-select .ant-select-selector:focus {
    border-color: #006940 !important;
    box-shadow: 0 0 0 2px rgba(0, 105, 64, 0.1) !important;
}

/* Input hover state */
.news-search .ant-input-affix-wrapper:hover {
    border-color: #006940 !important;
}

/* Input focus state */
.news-search .ant-input-affix-wrapper:focus,
.news-search .ant-input-affix-wrapper-focused {
    border-color: #006940 !important;
    box-shadow: 0 0 0 2px rgba(0, 105, 64, 0.1) !important;
}

/* Filter bar (Chuyen gia bac si) - Select hover state */
.filter-bar .ant-select-selector:hover {
    border-color: #006940 !important;
}

/* Filter bar (Chuyen gia bac si) - Select focus state */
.filter-bar .ant-select-focused .ant-select-selector,
.filter-bar .ant-select-selector:focus {
    border-color: #006940 !important;
    box-shadow: 0 0 0 2px rgba(0, 105, 64, 0.1) !important;
}

/* Filter bar (Chuyen gia bac si) - Input hover state */
.filter-bar .ant-input:hover {
    border-color: #006940 !important;
}

/* Filter bar (Chuyen gia bac si) - Input focus state */
.filter-bar .ant-input:focus,
.filter-bar .ant-input-focused {
    border-color: #006940 !important;
    box-shadow: 0 0 0 2px rgba(0, 105, 64, 0.1) !important;
}

/* Filter bar - Input wrapper hover state */
.filter-bar .filter-input:hover {
    border-color: #006940 !important;
}

/* Filter bar - Input wrapper focus state */
.filter-bar .filter-input:focus,
.filter-bar .filter-input:focus-within {
    border-color: #006940 !important;
    box-shadow: 0 0 0 2px rgba(0, 105, 64, 0.1) !important;
}

/* Filter button (Xóa bộ lọc) hover state */
.filter-item .filter-button:hover,
button.filter-button:hover {
    background-color: #005835 !important;
    border-color: #005835 !important;
    color: #ffffff !important;
}

/* Filter button (Xóa bộ lọc) active state */
.filter-item .filter-button:active,
button.filter-button:active {
    background-color: #004428 !important;
    border-color: #004428 !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .news-search-container {
        width: 100%;
        flex-direction: column;
    }
    .news-department-select {
        width: 100%;
    }
}

/* Share holder */
.shareholder-container {
    width: 85%;
    margin: 40px auto;
    padding: 0 20px;
}

.shareholder-contact {
    grid-column: span 2;
    height: 400px;
    border: 1px solid var(--seach-color, #ffb74d);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shareholder-contact h2 {
    color: var(--facility-green, #28a745);
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 12px;
}

.shareholder-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shareholder-contact li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    margin-bottom: 10px;
}

.shareholder-contact li img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* --- Grid layout --- */
.shareholder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- Item --- */
.shareholder-item {
    display: flex;
    background-color: var(--infastructure-bg, #f5f5f5);
    border: 1px solid var(--seach-color, #ffb74d);
    height: 400px;
    text-align: center;
    padding: 28px 10px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    transition: all 0.25s ease;
}

.shareholder-item:hover {
    box-shadow: 0 3px 10px rgba(0, 128, 0, 0.1);
    background-color: var(--bg, #ffffff);
}

.shareholder-icon {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    margin-bottom: 16px;
    object-fit: contain;
}

.shareholder-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, #2d2d2d);
    padding-left: 20px;
    padding-right: 20px;
    font-size: 28px;
}

/* Shareholder Details */

.dhcd-section {
    background: var(--bg);
    width: 85%;
    margin: 0 auto;
}

.dhcd-container {
    margin: 0 auto;
}

.dhcd-title {
    color: var(--brand-green, #006940);
    font-size: 48px;
    margin: 8px 0 18px;
    font-weight: 700;
    margin: 0px;
    margin-top: 33px;
    margin-bottom: 22px;
}

/* ================== Submenu ================== */
.dhcd-submenu {
    padding: 12px 0;
    min-height: 65px;
    background: var(--hospital-register-background, #e6f4ee);
}

.dhcd-submenu ul {
    display: flex;
    justify-content: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 45px;
    align-items: center;
    flex-wrap: wrap;
}

.dhcd-submenu li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    font-size: 18px;
    transition: all 0.2s ease;
}

.dhcd-submenu li:hover {
    background-color: #cde5da;
}

.dhcd-submenu li.active {
    background-color: var(--brand-green, #006940);
    color: #fff;
    font-weight: 600;
}

/* ================== CONTROLS ================== */
.dhcd-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0 18px;
}

.dhcd-controls label option {
    font-size: 16px;
}

.dhcd-info strong {
    font-size: 16px;
    color: var(--brand-green, #006940);
}

.dhcd-info {
    font-size: 16px;
}

.dhcd-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dhcd-select {
    font-size: 16px;
    color: var(--text-color, #2d2d2d);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.dhcd-select select {
    padding: 6px 8px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    font-size: 16px;
}

/* ================== LIST ================== */
.dhcd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.dhcd-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.item-left {
    display: flex;
    flex-direction: column;
}

.item-title {
    font-size: 20px;
    font-weight: 600;
}

.item-date {
    font-size: 16px;
    color: var(--read-more-color, #5c5c5c);
    margin-top: 11px;
}

.item-download {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--accent);
    font-weight: 600;
}

.item-download svg {
    display: block;
}

.download-text {
    font-size: 20px;
    color: var(--seach-color, #ffb74d);
}

.dhcd-item.empty {
    padding: 24px;
    color: var(--muted);
}

/* ================== PAGINATION ================== */
.dhcd-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 34px 0;
}

.page-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--muted);
}

.page-btn.disabled {
    opacity: 0.2;
    cursor: default;
}

.page-dot {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    background: var(--place-holder, #e0e0e0);
}

.page-dot.active {
    background: var(--brand-green, #006940);
    color: var(--bg, #ffffff);
}

/* ================== CONTACT ================== */
.dhcd-contact {
    height: 201px;
    width: 830px;
    margin-bottom: 100px;
}

.contact-title {
    font-size: 36px;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    font-weight: 800;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    color: var(--read-more-color, #5c5c5c);
}

.contact-item a {
    font-size: 20px;
    font-weight: 600;
}

.contact-icon {
    min-width: 28px;
    font-size: 20px;
    font-weight: 600;
}

.person-title {
    color: var(--text-color, #2d2d2d);
    font-size: 20px;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 720px) {
    .dhcd-title {
        font-size: 32px;
    }

    .dhcd-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .dhcd-filters {
        width: 100%;
        justify-content: flex-start;
    }

    .page-dot {
        width: 36px;
        height: 36px;
    }
}

/* Build 12-11-2025-4 all */