:root {
            --color-gold: #d4af37;
            --color-gold-light: #e6c866;
            --color-gold-dark: #b8941f;
            --color-neutral-50: #fafafa;
            --color-neutral-100: #f5f5f5;
            --color-neutral-200: #e5e5e5;
            --color-neutral-300: #d4d4d4;
            --color-neutral-400: #a3a3a3;
            --color-neutral-700: #404040;
            --color-neutral-800: #262626;
            --color-neutral-900: #171717;
            --color-white: #ffffff;
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            --font-serif: Georgia, "Times New Roman", serif;
            --container-max-width: 1200px;
            --section-padding: 3rem 0;
            --transition-duration: 300ms;
            --transition-timing: ease-in-out;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
 * { margin: 0; padding: 0; box-sizing: border-box; }
     html { scroll-behavior: smooth; }
    body {
        font-family: var(--font-family);
         line-height: 1.6;
         background-color: var(--color-neutral-100);
         color: var(--color-neutral-900);
    }
.container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 1rem; }
        h1, h2, h3 { font-family: var(--font-serif); font-weight: bold; line-height: 1.25; }
        header.header {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background-color: rgba(245, 245, 245, 0.85);
            backdrop-filter: blur(8px);
            transition: all var(--transition-duration) var(--transition-timing);
            padding: 1rem 0;
 }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.logo-section { display: flex; align-items: center; }
.logo { height: 3rem; width: auto; margin-right: 0.75rem; }
.hospital-name { font-size: 1.5rem; font-family: var(--font-serif); font-weight: bold; color: var(--color-neutral-900); }
.hospital-english { font-size: 0.75rem; color: var(--color-neutral-700); letter-spacing: 0.1em; }
.header-contact { display: flex; gap: 1.5rem; }
.contact-item { display: flex; align-items: center; gap: 0.5rem; color: var(--color-neutral-700); font-size: 0.875rem; }
.contact-item i { color: var(--color-gold); }
 nav.navigation { display: flex; justify-content: space-between; align-items: center; }
.nav-list { display: flex; list-style: none; gap: 2rem; }
.nav-link {
            text-decoration: none;
            color: var(--color-neutral-700);
            font-weight: 500;
            padding: 0.5rem 0;
            position: relative;
            transition: color var(--transition-duration) var(--transition-timing);
    }
.nav-link:hover, .nav-link.active { color: var(--color-gold); }
.nav-link::after {
            content: '';
            position: absolute; bottom: 0; left: 0;
            width: 0; height: 2px; background-color: var(--color-gold);
            transition: width var(--transition-duration) var(--transition-timing);
        }
 .nav-link:hover::after, .nav-link.active::after { width: 100%; }
        main { padding-top: 6rem; }
        section { padding: var(--section-padding); }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--color-neutral-700); margin-bottom: 1rem; }
.breadcrumb a { color: var(--color-gold); text-decoration: none; transition: color var(--transition-duration) var(--transition-timing); }
.breadcrumb a:hover { color: var(--color-gold-dark); }
.article-wrapper {
            background-color: var(--color-white);
            border: 1px solid var(--color-neutral-200);
            border-radius: 10px;
            box-shadow: var(--shadow-sm);
            padding: 2rem;
        }
.article-title { font-size: 2rem; margin-bottom: 0.75rem; letter-spacing: -0.02em; }
        .article-meta {
            display: flex; flex-wrap: wrap; gap: 1rem;
            color: var(--color-neutral-700); font-size: 0.95rem;
            border-top: 1px solid var(--color-neutral-200);
            border-bottom: 1px solid var(--color-neutral-200);
            padding: 0.75rem 0; margin-bottom: 1rem;
        }
.article-summary {
            background-color: var(--color-neutral-50);
            border: 1px solid var(--color-neutral-200);
            border-radius: 8px;
            padding: 1rem;
            color: var(--color-neutral-800);
            margin-bottom: 1.25rem;
            font-size: 1rem;
        }
.article-cover {
            width: 100%;
            height: 360px;
            object-fit: cover;
            border-radius: 8px;
            margin: 1rem 0 1.5rem;
        }
.article-content {
            color: var(--color-neutral-800);
            font-size: 1rem;
        }
.article-content h2 { font-size: 1.5rem; margin: 1.25rem 0 0.5rem; }
.article-content p { margin-bottom: 0.85rem; line-height: 1.8; }
.article-tags {
            margin-top: 1.25rem;
            display: flex; flex-wrap: wrap; gap: 0.5rem;
        }
.tag {
            background-color: var(--color-neutral-100);
            color: var(--color-neutral-700);
            padding: 0.35rem 0.65rem;
            border-radius: 4px;
            font-size: 0.85rem;
            transition: background-color var(--transition-duration) var(--transition-timing);
        }
.tag:hover { background-color: var(--color-gold-light); color: var(--color-white); }
.article-nav {
            display: flex; justify-content: space-between; align-items: center;
            gap: 1rem; margin-top: 2rem; padding-top: 1rem;
            border-top: 1px solid var(--color-neutral-200);
        }
.nav-link-article {
            display: inline-flex; align-items: center; gap: 0.5rem;
            color: var(--color-neutral-800); text-decoration: none; font-size: 0.95rem;
            transition: color var(--transition-duration) var(--transition-timing);
        }
.nav-link-article:hover { color: var(--color-gold); }
.related-section { margin-top: 2.5rem; }
.section-title { font-size: 1.5rem; text-align: left; margin-bottom: 0.75rem; }
.divider { width: 4rem; height: 0.125rem; background-color: var(--color-gold); margin-bottom: 1rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.related-card {
            background-color: var(--color-white);
            border: 1px solid var(--color-neutral-200);
            border-radius: 8px;
            overflow: hidden;
            transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);
        }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.related-image { width: 100%; height: 140px; object-fit: cover; }
.related-content { padding: 0.85rem; }
.related-title { font-size: 1rem; color: var(--color-neutral-900); margin-bottom: 0.35rem; }
.related-meta { font-size: 0.85rem; color: var(--color-neutral-700); display: flex; justify-content: space-between; }
        @media (max-width: 992px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 768px) {
            .nav-list { gap: 1rem; }
            main { padding-top: 7rem; }
            section { padding: 2rem 0; }
            .article-cover { height: 220px; }
            .related-grid { grid-template-columns: 1fr; }
        }