:root {  --bs-primary: #2c3790; --bs-primary-rgb: 44, 55, 144; --bs-primary-dark: #1f2766;  --color-white: #ffffff; --color-black: #000000; --color-blue-soft: #77c8e5; --color-gray: #595959; --color-red: #ed1b23; } @charset "UTF-8";   * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { padding: 0; margin: 0; padding-top: 140px !important;  margin-top: 0 !important; text-align: center; color: var(--color-gray); letter-spacing: 0.5px; overflow-x: clip; } @media (max-width: 991px) { body { padding-top: 70px !important;  } }  a { color: var(--bs-primary); text-decoration: none; font-weight: bold; } a:focus, a:hover { color: var(--bs-primary); text-decoration: none; font-weight: bold; } table { background-color: var(--color-white); } th { background-color: #d2d2d2; text-align: center; font-weight: normal; }  .cleaner, .cleaner_h5, .cleaner_h10, .cleaner_h20, .cleaner_h30, .cleaner_h40, .cleaner_h50, .cleaner_h60, .cleaner_h70 { display: block !important; clear: both !important; } .cleaner { clear: both; } .cleaner_h5 { height: 5px; } .cleaner_h10 { height: 10px; } .cleaner_h20 { height: 20px; } .cleaner_h30 { height: 30px; } .cleaner_h40 { height: 40px; } .cleaner_h50 { height: 50px; } .cleaner_h60 { height: 60px; } .cleaner_h70 { height: 70px; }  .FontBold { font-weight: bold; }  .FontWhite { color: var(--color-white); } .FontWhiteLg { font-size: 30px; color: var(--color-white); } .FontWhiteVeryBg { font-size: 24px; color: var(--color-white); } .FontWhiteBg { font-size: 22px; color: var(--color-white); } .FontWhiteMd { font-size: 20px; color: var(--color-white); } .FontWhiteSm { font-size: 18px; color: var(--color-white); } .FontWhiteVerySm { font-size: 16px; color: var(--color-white); }  .FontBlack { color: var(--color-black); } .FontBlackLg { font-size: 30px; color: var(--color-black); } .FontBlackVeryBg { font-size: 24px; color: var(--color-black); } .FontBlackBg { font-size: 22px; color: var(--color-black); } .FontBlackMd { font-size: 20px; color: var(--color-black); } .FontBlackSm { font-size: 18px; color: var(--color-black); } .FontBlackVerySm { font-size: 16px; color: var(--color-black); }  .FontBlue { color: var(--bs-primary); } .FontBlueLg { font-size: 30px; color: var(--bs-primary); } .FontBlueVeryBg { font-size: 24px; color: var(--bs-primary); } .FontBlueBg { font-size: 22px; color: var(--bs-primary); } .FontBlueMd { font-size: 20px; color: var(--bs-primary); } .FontBlueSm { font-size: 18px; color: var(--bs-primary); } .FontBlueVerySm { font-size: 16px; color: var(--bs-primary); }  .FontBlueSoft { color: var(--color-blue-soft); } .FontBlueSoftLg { font-size: 30px; color: var(--color-blue-soft); } .FontBlueSoftVeryBg { font-size: 24px; color: var(--color-blue-soft); } .FontBlueSoftBg { font-size: 22px; color: var(--color-blue-soft); } .FontBlueSoftMd { font-size: 20px; color: var(--color-blue-soft); } .FontBlueSoftSm { font-size: 18px; color: var(--color-blue-soft); } .FontBlueSoftVerySm { font-size: 16px; color: var(--color-blue-soft); }  .FontGray { color: var(--color-gray); } .FontGrayLg { font-size: 30px; color: var(--color-gray); } .FontGrayVeryBg { font-size: 24px; color: var(--color-gray); } .FontGrayBg { font-size: 22px; color: var(--color-gray); } .FontGrayMd { font-size: 20px; color: var(--color-gray); } .FontGraySm { font-size: 18px; color: var(--color-gray); } .FontGrayVerySm { font-size: 16px; color: var(--color-gray); }  .FontRed { color: var(--color-red); } .FontRedLg { font-size: 30px; color: var(--color-red); } .FontRedVeryBg { font-size: 24px; color: var(--color-red); } .FontRedBg { font-size: 22px; color: var(--color-red); } .FontRedMd { font-size: 20px; color: var(--color-red); } .FontRedSm { font-size: 18px; color: var(--color-red); } .FontRedVerySm { font-size: 16px; color: var(--color-red); }   h1.FontBlue, h2.FontBlue, .section-heading { position: relative; display: inline-block; padding-left: 15px !important; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; color: var(--bs-primary) !important; border-left: 4px solid var(--bs-primary) !important; animation: premiumHeadingReveal 1.2s cubic-bezier(0.19, 1, 0.22, 1) both; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-left-color 0.3s ease; } h1.FontBlue:hover, h2.FontBlue:hover, .section-heading:hover { transform: translateX(6px); border-left-color: var(--bs-primary-dark) !important; } h1.FontBlue::before, h2.FontBlue::before, .section-heading::before, h1.FontBlue::after, h2.FontBlue::after, .section-heading::after { display: none !important; content: none !important; }  h1.FontBlue.text-center, h2.FontBlue.text-center, .section-heading.text-center { display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; border-left: 4px solid var(--bs-primary) !important; text-align: center; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-left-color 0.3s ease; } h1.FontBlue.text-center:hover, h2.FontBlue.text-center:hover, .section-heading.text-center:hover { transform: translateX(6px); border-left-color: var(--bs-primary-dark) !important; }  h1.FontWhite, h2.FontWhite { position: relative; display: inline-block; padding-left: 15px !important; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; color: var(--color-white) !important; border-left: 4px solid var(--color-white) !important; animation: premiumHeadingRevealWhite 1.2s cubic-bezier(0.19, 1, 0.22, 1) both; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-left-color 0.3s ease; } h1.FontWhite:hover, h2.FontWhite:hover { transform: translateX(6px); } h1.FontWhite.text-center, h2.FontWhite.text-center { display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; border-left: 4px solid var(--color-white) !important; text-align: center; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-left-color 0.3s ease; } h1.FontWhite.text-center:hover, h2.FontWhite.text-center:hover { transform: translateX(6px); }  @keyframes premiumHeadingReveal { 0% { opacity: 0; transform: translateX(-30px); border-left-color: rgba(0, 106, 184, 0); } 40% { opacity: 0.2; border-left-color: rgba(0, 106, 184, 0.4); } 100% { opacity: 1; transform: translateX(0); border-left-color: var(--bs-primary); } } @keyframes premiumHeadingRevealWhite { 0% { opacity: 0; transform: translateX(-30px); border-left-color: rgba(255, 255, 255, 0); } 40% { opacity: 0.2; border-left-color: rgba(255, 255, 255, 0.4); } 100% { opacity: 1; transform: translateX(0); border-left-color: var(--color-white); } }  .blog_single { margin-top: 20px; } .blog_single a { text-decoration: none; } .blog_single a:hover { color: #006bb7; } .blog-content { position: relative; overflow: hidden; border-right: 1px solid transparent; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .blog-content img { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; overflow: hidden; width: 100%; } .blog-text { height: 240px; padding: 10px 10px 10px 10px; background: #f5f6fa; color: #7a8188; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .blog-content:hover .blog-text { background: #006bb7; } .blog-content:hover .blog-text p { color: #fff; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .blog-content .blog-text h3 .blog-text p, h3, .blog-content:hover .blog-text h3 { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .blog-content:hover .blog-text h3 { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; color: #fff; }  .ThColor { text-align: center; background-color: #006cb7; color: var(--color-white); font-size: 20px; } .btn-font { font-size: 25px; } .form-control { letter-spacing: 0.5px; font-size: 20px; color: var(--color-gray); }   .bi, .bootstrap-icons, [class*=" bi-"], [class^="bi-"] { font-family: "bootstrap-icons" !important; }  .top-header-bar, .mobile-header { margin: 0 !important; padding: 15px 0 !important; position: relative; z-index: 1000; } .navbar { margin: 0 !important; padding: 0 !important; position: relative; z-index: 999; overflow: visible; } .mobile-navbar { position: relative; z-index: 999; } .top-header-bar .row { align-items: center; } .top-header-bar+.navbar, .mobile-header+.mobile-navbar { margin-top: 0 !important; }  .header-logo, .mobile-logo, .offcanvas-logo { max-width: none !important; height: auto !important; }  .search-input:focus, .mobile-search-input:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1) !important; } .search-input::placeholder, .mobile-search-input::placeholder { color: #94A3B8; opacity: 1; } .btn-search:hover, .btn-mobile-search:hover { transform: none !important; box-shadow: 0 2px 8px rgba(30, 58, 138, 0.2) !important; }  .dropdown-menu { z-index: 2000 !important; } .offcanvas { z-index: 1050 !important; } .offcanvas-backdrop { z-index: 1040 !important; }  .btn-mobile-menu:focus, .btn-mobile-menu:active { box-shadow: none !important; }  .btn-language.dropdown-toggle { background: var(--color-white) !important; } .btn-language.dropdown-toggle:hover { background: #F8FAFC !important; }  .navbar-collapse { justify-content: center; width: 100%; flex-grow: 1; } .navbar-nav { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin: 0; padding: 0; flex-wrap: nowrap; overflow: visible; } .nav-item { flex: 0 0 auto; } .navbar .container-fluid { max-width: 100% !important; padding-left: 15px; padding-right: 15px; }   @media (max-width: 991px) {  .top-header-bar, .navbar:not(.navbar-mobile) { display: none !important; } .mobile-header, .mobile-navbar { display: block !important; } .mobile-navbar { position: sticky; top: 0; z-index: 999; } }  @media (min-width: 992px) { .mobile-header, .mobile-navbar, .offcanvas { display: none !important; } .top-header-bar, .navbar { display: block !important; } }  @media (min-width: 1400px) {  .navbar .container-fluid { max-width: 100% !important; } .navbar-nav { max-width: 100%; margin: 0 auto; } }  @media (min-width: 1600px) { .navbar .container-fluid { max-width: 100% !important; margin: 0 auto; } .navbar-nav { max-width: 100%; } .nav-link { padding: 0 24px !important; font-size: 1rem; } }  @media (min-width: 1920px) { .navbar .container-fluid { max-width: 1600px !important; margin: 0 auto; } .navbar-nav { max-width: 1400px; } .nav-link { padding: 0 26px !important; font-size: 1.05rem; } }  @media (max-width: 576px) { .mobile-logo { height: 35px !important; } .mobile-hospital-name { font-size: 0.75rem !important; } .mobile-search-input { font-size: 0.85rem !important; } .mobile-hotline-number { font-size: 1.3rem !important; } .mobile-nav-item { font-size: 0.8rem !important; padding: 8px 5px !important; } }   @media (max-width: 991px) { .container { padding-left: 16px; padding-right: 16px; } } @media (max-width: 576px) { .container { padding-left: 20px; padding-right: 20px; } }  .page-hero { position: relative; width: 100%; min-height: 320px; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; overflow: hidden; } .page-hero-overlay { position: relative; width: 100%; padding: 60px 0; background: linear-gradient(135deg, rgba(30, 58, 138, 0.78) 0%, rgba(37, 99, 235, 0.55) 100%); z-index: 1; } .page-hero-title { color: var(--color-white); font-size: 2.2rem; font-weight: 700; margin: 0 0 10px 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .page-hero-subtitle { color: rgba(255, 255, 255, 0.92); font-size: 1.05rem; margin: 0; max-width: 720px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } @media (max-width: 767px) { .page-hero { min-height: 220px; } .page-hero-overlay { padding: 36px 0; } .page-hero-title { font-size: 1.6rem; } .page-hero-subtitle { font-size: 0.95rem; } }  .doctor-card-search { background: var(--color-white); border-radius: 16px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid rgba(226, 232, 240, 0.8); overflow: hidden; width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; cursor: pointer; } .doctor-card-search:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 106, 184, 0.12); border-color: rgba(0, 106, 184, 0.3); } .doctor-image-container-search { width: 100%; aspect-ratio: 3 / 4; position: relative; background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%); overflow: hidden; }  .doctor-image-container-search::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: none;  background-size: cover; background-position: center; opacity: 0.1; z-index: 1; } .doctor-img-search { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); display: block; position: relative; z-index: 2; } .doctor-card-search:hover .doctor-img-search { transform: scale(1.05); } .doctor-image-container-search::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); z-index: 3; } .doctor-info-search { background: var(--color-white); padding: 15px 12px 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 4; } .doctor-name-search { font-size: 15px; font-weight: 700; margin: 0; padding: 0; line-height: 1.4; color: #1e293b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; } .doctor-card-search:hover .doctor-name-search { color: var(--bs-primary); } .doctor-sub-search { font-size: 13px; color: var(--bs-primary); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } @media (max-width: 767px) { .doctor-card-search { border-radius: 12px; } .doctor-name-search { font-size: 13px; } .doctor-sub-search { font-size: 11px; } .doctor-info-search { padding: 12px 8px 16px; } }  .doctor-swiper-pc { padding-bottom: 40px;  } .doctor-swiper-prev, .doctor-swiper-next { color: #a3a3a3; transition: color 0.3s; } .doctor-swiper-prev:hover, .doctor-swiper-next:hover { color: var(--bs-primary); } .doctor-swiper-prev::after, .doctor-swiper-next::after { font-size: 2rem; font-weight: bold; } .doctor-swiper-prev { left: -40px; } .doctor-swiper-next { right: -40px; } @media (max-width: 768px) { .doctor-swiper-prev { left: -10px; } .doctor-swiper-next { right: -10px; } } .doctor-swiper-pagination .swiper-pagination-bullet-active { background-color: var(--bs-primary); }  .service-icon-box:hover .serv-icon-circle { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(44, 55, 144, 0.2); } .service-icon-box:hover .serv-icon-circle i { color: #ED1C24; }  .news-card-horizontal { border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); background: var(--color-white); transition: all 0.3s ease; overflow: hidden; } .news-card-horizontal:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .news-horizontal-img-wrapper { height: 100%; min-height: 180px; overflow: hidden; } @media (max-width: 767px) { .news-horizontal-img-wrapper { min-height: 120px; } } .news-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .news-card-horizontal:hover .news-card-img { transform: scale(1.05); } .news-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 767px) { .news-card-title { font-size: 1rem; -webkit-line-clamp: 2; } }  .promo-card-new { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); background: var(--color-white); transition: transform 0.3s ease; } .promo-card-new:hover { transform: translateY(-8px); } .promo-img-wrapper-new { width: 100%; height: 220px; overflow: hidden; } .promo-card-img-new { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .promo-card-new:hover .promo-card-img-new { transform: scale(1.05); } .promo-card-title-new { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; line-height: 1.4; } .promo-card-subtitle-new { font-size: 0.95rem; color: #6b7280; margin-bottom: 20px; line-height: 1.5; } .promo-view-btn-new { border: 1.5px solid #557bf2; color: #557bf2; background: transparent; font-weight: 600; padding: 6px 16px; border-radius: 6px; width: fit-content; } .promo-view-btn-new:hover { background: #f0f4ff; color: var(--bs-primary); border-color: var(--bs-primary); }  .article-card-new { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); background: var(--color-white); transition: transform 0.3s ease, box-shadow 0.3s ease; } .article-card-new:hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .article-img-wrapper-new { width: 100%; height: 220px; overflow: hidden; } .article-card-img-new { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .article-card-new:hover .article-card-img-new { transform: scale(1.05); } .article-card-title-new { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-card-subtitle-new { font-size: 0.95rem; color: #6b7280; margin-bottom: 20px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-view-btn-new { border: 1.5px solid #8ba4f5; color: #557bf2; background: var(--color-white); font-weight: 600; padding: 6px 16px; border-radius: 6px; width: fit-content; } .article-view-btn-new:hover { background: #f0f4ff; color: var(--bs-primary); border-color: var(--bs-primary); }  .content-body, .page-content {  font-size: 0.9rem; line-height: 1.8; color: #000; word-wrap: break-word; overflow-wrap: break-word; text-align: left; }   .content-body .bi, .content-body .bootstrap-icons { font-family: 'bootstrap-icons' !important; } .content-body img, .page-content img { max-width: 100%; height: auto;  margin: 20px auto; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; } .content-body img:hover, .page-content img:hover { transform: scale(1.02); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2); } .content-body p, .page-content p { margin: 0 0 1.2em 0; line-height: 1.8; }  .content-body h6, .page-content h6 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.75em; color: var(--bs-primary); line-height: 1.4; position: relative; } .content-body h1, .page-content h1 { font-size: 2em; padding-bottom: 0.5em; border-bottom: 3px solid var(--bs-primary); } .content-body h2, .page-content h2 { font-size: 1.6em; padding-left: 1rem; border-left: 4px solid #0078d4; } .content-body h3, .page-content h3 { font-size: 1.4em; } .content-body h4 { font-size: 1.2em; } .content-body h5 { font-size: 1.1em; } .content-body h6, .page-content h6 { font-size: 1em; }  .content-body h1[style*="color"], .content-body h2[style*="color"], .content-body h3[style*="color"], .content-body h4[style*="color"], .content-body h5[style*="color"], .content-body h6[style*="color"] { color: unset; } .content-body ul, .page-content ul, .content-body ol, .page-content ol { margin-left: 2em; margin-bottom: 1em; padding-left: 0; } .content-body li, .page-content li { margin-bottom: 0.5em; } .content-body a, .page-content a { color: var(--bs-primary); text-decoration: none; transition: color 0.2s; } .content-body a:hover, .page-content a:hover { color: #0056a3; text-decoration: underline; } .content-body blockquote, .page-content blockquote { border-left: 4px solid var(--bs-primary); padding-left: 20px; margin: 20px 0; font-style: italic; color: #555; }  .content-body strong, .content-body b { font-weight: 700;  }  .content-body em, .content-body i:not([class]) { font-style: italic;  } .content-body u { text-decoration: underline; text-decoration-thickness: 2px;  } .content-body s, .content-body strike, .content-body del { text-decoration: line-through;  } .content-body sup { font-size: 0.75em; vertical-align: super; } .content-body sub { font-size: 0.75em; vertical-align: sub; }  .content-body span[style*="font-size"], .content-body div[style*="font-size"] { line-height: 1.6; }  .content-body p[style*="text-align:center"], .content-body div[style*="text-align:center"], .content-body p[style*="text-align: center"], .content-body div[style*="text-align: center"] { text-align: center; } .content-body p[style*="text-align:right"], .content-body div[style*="text-align:right"], .content-body p[style*="text-align: right"], .content-body div[style*="text-align: right"] { text-align: right; } .content-body p[style*="text-align:justify"], .content-body div[style*="text-align:justify"], .content-body p[style*="text-align: justify"], .content-body div[style*="text-align: justify"] { text-align: justify; }  .content-body br { display: inline; line-height: 1.8; } .content-body br+br { display: block; margin-top: 0.5em; content: ""; }  .content-body div { margin-bottom: 1em; line-height: 1.8; }  .content-body span { line-height: 1.8; }  .content-body pre { white-space: pre-wrap; word-wrap: break-word; background: #f5f5f5; padding: 15px; border-radius: 5px; margin: 1em 0; } .content-body table { width: 100%; border-collapse: collapse; margin: 20px 0; } .content-body table th, .content-body table td { border: 1px solid #ddd; padding: 12px; text-align: left; } .content-body table th { background-color: var(--bs-primary); color: white; } .content-body table tr:nth-child(even) { background-color: #f9f9f9; }   :root { --primary-blue: var(--bs-primary); --primary-blue-dark: #00508c; --neutral-gray: #f8fafc; --border-color: #e2e8f0; --text-main: #2d3748; }  .breadcrumb { font-size: 12px !important; font-weight: 400 !important; line-height: 1.4; } .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item.active { font-size: 12px !important; font-weight: 400 !important; } .breadcrumb .breadcrumb-item a { font-size: 12px !important; font-weight: 400 !important; text-decoration: none; } .breadcrumb .breadcrumb-item+.breadcrumb-item::before { font-size: 12px !important; font-weight: 400 !important; } .custom-breadcrumb-bar { background-color: var(--neutral-gray); border-bottom: 1px solid var(--border-color); padding: 14px 0; margin-top: 0; } .custom-breadcrumb-bar .breadcrumb-item a { color: var(--primary-blue); font-weight: 500; text-decoration: none; transition: color 0.2s ease; } .custom-breadcrumb-bar .breadcrumb-item a:hover { color: var(--primary-blue-dark); }  .hospital-gradient-banner { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%); color: var(--color-white); padding: 45px 30px; border-radius: 24px; box-shadow: 0 15px 40px rgba(0, 106, 184, 0.2); border: 1px solid rgba(255, 255, 255, 0.05); } .hospital-gradient-banner h2 { font-size: 2.2rem; font-weight: 800; letter-spacing: 0.5px; }  .premium-contact-card { background: var(--color-white); border: 1px solid var(--border-color); border-radius: 24px; padding: 50px 45px; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04); height: 100%; transition: all 0.3s ease; } .premium-contact-card:hover { box-shadow: 0 20px 55px rgba(0, 0, 0, 0.07); }  .contact-section-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 35px; line-height: 1.2; text-align: center; position: relative; display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; border-left: 4px solid var(--bs-primary) !important;  animation: premiumHeadingReveal 1.2s cubic-bezier(0.19, 1, 0.22, 1) both; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-left-color 0.3s ease; } .contact-section-title:hover { transform: translateX(6px); border-left-color: var(--bs-primary-dark) !important; }  .contact-section-title::after { display: none !important; }  .info-item-box { margin-bottom: 24px; } .info-item-title-large { font-size: 1.5rem; font-weight: 700; color: var(--primary-blue); display: flex; align-items: center; } .contact-text-highlight { font-size: 1.25rem; color: #2d3748; line-height: 1.8; font-weight: 500; } .contact-text { font-size: 1.15rem; color: #4a5568; line-height: 1.7; } .phone-link { font-size: 1.35rem; color: var(--primary-blue); font-weight: 700; transition: all 0.2s ease; } .phone-link:hover { color: var(--primary-blue-dark); text-decoration: underline !important; } .phone-link-large { font-size: 1.75rem; font-weight: 800; letter-spacing: 0.5px; transition: all 0.2s ease; } .phone-link-large:hover { transform: scale(1.02); } @keyframes pulse-subtle { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } .animate-pulse { animation: pulse-subtle 1.8s infinite ease-in-out; display: inline-block; }  .send-message-btn { background-color: var(--primary-blue); color: var(--color-white); border-radius: 12px; padding: 12px 30px; font-size: 15px; font-weight: 600; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 15px rgba(0, 106, 184, 0.22); transition: all 0.3s ease; border: none; cursor: pointer; } .send-message-btn:hover { background-color: var(--primary-blue-dark); box-shadow: 0 8px 22px rgba(0, 106, 184, 0.32); transform: translateY(-1px); }  .contact-form .form-control { border-radius: 12px; border: 1px solid var(--border-color); padding: 12px 18px; font-size: 0.95rem; color: var(--text-main); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01); transition: all 0.25s ease; } .contact-form .form-control:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 4px rgba(0, 106, 184, 0.12); } .contact-form label { font-weight: 600; color: #4a5568; margin-bottom: 8px; font-size: 0.95rem; }  .social-circle-btn { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; color: var(--color-white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; text-decoration: none; } .social-circle-btn:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); color: var(--color-white); }  @media (min-width: 768px) { .border-end-md { border-right: 1px solid var(--border-color); } } @media (max-width: 768px) { .premium-contact-card { padding: 28px 20px; border-radius: 16px; } .contact-section-title { font-size: 1.6rem; margin-bottom: 25px; } .info-item-title-large { font-size: 1.3rem; } .contact-text-highlight { font-size: 1.1rem; } .contact-text { font-size: 1.05rem; } .phone-link { font-size: 1.15rem; } .phone-link-large { font-size: 1.45rem; } .hospital-gradient-banner { padding: 30px 20px; border-radius: 16px; } .hospital-gradient-banner h2 { font-size: 1.75rem; } }   .col-5-items { flex: 0 0 20%; max-width: 20%; } @media (max-width: 991px) { .col-5-items { flex: 0 0 50%; max-width: 50%; } }  .clinic-grid-item { display: block; text-align: center; padding: 20px 10px; border-radius: 12px; transition: all 0.3s ease; text-decoration: none; height: 100%; background-color: transparent; } .clinic-grid-item:hover, .clinic-grid-item:active { background-color: #f0f3fa;  text-decoration: none; } .clinic-grid-icon { width: 80px; height: 80px; margin: 0 auto 15px auto; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .clinic-grid-item:hover .clinic-grid-icon { transform: scale(1.05); } .clinic-grid-icon img { max-width: 100%; max-height: 100%; object-fit: contain; } .clinic-grid-title { font-size: 15px; font-weight: 600; color: var(--bs-primary); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px;  }   .serv-circle-wrapper { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; display: inline-block; position: relative; box-shadow: 0 8px 25px rgba(0, 106, 184, 0.15); border: 4px solid rgba(255, 255, 255, 0.9); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: #e8f0fa; }  .serv-circle-wrapper.serv-circle-sm { width: 130px; height: 130px; }  .serv-circle-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .service-item:hover .serv-circle-wrapper { transform: scale(1.08) translateY(-5px); box-shadow: 0 15px 40px rgba(0, 106, 184, 0.30); border-color: rgba(0, 106, 184, 0.3); } .service-item:hover .serv-circle-img { transform: scale(1.08); }  .serv-title { font-size: 15px; font-weight: 600; margin-top: 14px; line-height: 1.4; min-height: 42px;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 180px; margin-left: auto; margin-right: auto; }    .promo-img-wrapper { width: 100%; height: 220px;  overflow: hidden; position: relative; background: #e8f0fa;  }  .promo-card-img { width: 100%; height: 100%; object-fit: cover;  object-position: center top;  display: block; transition: transform 0.5s ease; } .promotion-card:hover .promo-card-img { transform: scale(1.06); }  .promo-card-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; min-height: 44px;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }  .promo-card-subtitle { font-size: 14px; color: #666; text-align: left; margin-bottom: 16px; line-height: 1.6; min-height: 67px;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }  .promo-view-btn { border: none; border-radius: 10px; font-weight: 600; padding: 12px 20px; background: linear-gradient(135deg, var(--bs-primary) 0%, #0056a3 100%); box-shadow: 0 4px 12px rgba(0, 106, 184, 0.30); transition: all 0.3s ease; color: #fff; text-decoration: none; } .promo-view-btn:hover, .promotion-card:hover .promo-view-btn { background: linear-gradient(135deg, #0078d4 0%, #0066b8 100%); box-shadow: 0 6px 18px rgba(0, 106, 184, 0.40); transform: translateY(-2px); color: #fff; }  .promotion-card:hover { transform: translateY(-8px); box-shadow: 0 12px 35px rgba(0, 106, 184, 0.25) !important; }   .news-card { background: var(--color-white); border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.02); border: 1.5px solid #e2e8f0 !important; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .news-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(0, 106, 184, 0.16), 0 10px 25px rgba(0, 106, 184, 0.06); border-color: var(--bs-primary) !important; }  .news-img-wrapper { position: relative; overflow: hidden; aspect-ratio: 16 / 10; width: 100%; margin: 0; background-color: #f8f9fa; } .news-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .news-card:hover .news-img { transform: scale(1.06); }  .news-badge { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--bs-primary); padding: 6px 14px; border-radius: 30px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); z-index: 2; display: inline-flex; align-items: center; }  .news-card-body { padding: 24px !important; } @media (max-width: 767.98px) { .news-card-body { padding: 16px !important; } .news-badge { top: 8px; left: 8px; padding: 4px 10px; font-size: 10px; } }  .news-category { font-size: 11px; font-weight: 700; color: var(--bs-primary); background-color: rgba(0, 106, 184, 0.06); padding: 4px 12px; border-radius: 20px; display: inline-block; align-self: start; letter-spacing: 0.5px; }  .news-title { font-size: 18px; line-height: 1.45; margin-bottom: 12px; font-weight: 700; } .news-title-link { color: #1a202c; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; height: 4.35em; transition: color 0.25s ease; } .news-title-link:hover { color: var(--bs-primary); } @media (max-width: 767.98px) { .news-title { font-size: 14px; line-height: 1.35; margin-bottom: 8px; } .news-title-link { -webkit-line-clamp: 3; height: 4.05em; } }  .news-excerpt { font-size: 15px;  color: #4a5568;  line-height: 1.8;  margin-bottom: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;  overflow: hidden; text-overflow: ellipsis; height: 5.4em;  text-align: justify;  text-justify: inter-word;  padding-right: 10px;  }  .news-excerpt strong { color: var(--bs-primary);  font-weight: 700; }  .read-more-link { color: var(--bs-primary); background-color: rgba(0, 106, 184, 0.05); font-weight: 700; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 30px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .transition-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .news-card:hover .read-more-link { background-color: var(--bs-primary); color: var(--color-white) !important; box-shadow: 0 4px 12px rgba(0, 106, 184, 0.25); } .news-card:hover .transition-icon { transform: translateX(4px); } @media (max-width: 767.98px) { .read-more-link { font-size: 11px; padding: 6px 12px; } }   .content-body, .news-full-content { font-size: 16px; line-height: 1.9;  color: #2d3748; max-width: 800px;  margin: 0 auto;  padding: 0 20px;  }  .content-body p, .news-full-content p { margin-bottom: 1.8rem;  text-align: justify;  text-justify: inter-word;  }  .news-full-content h1, .news-full-content h2, .news-full-content h3, .news-full-content h4, .news-full-content h5, .news-full-content h6 { margin-top: 2.5rem;  margin-bottom: 1.2rem;  font-weight: 700;  line-height: 1.4; color: #1a202c;  }  .news-full-content h1 { font-size: 2rem;  color: var(--bs-primary);  padding-bottom: 0.5rem; border-bottom: 3px solid var(--bs-primary);  } .news-full-content h2 { font-size: 1.6rem;  color: var(--bs-primary); padding-left: 1rem; border-left: 4px solid var(--bs-primary);  } .news-full-content h3 { font-size: 1.4rem;  color: #0056a3; font-weight: 600; } .news-full-content h4 { font-size: 1.2rem; color: #0056a3; font-weight: 600; }  .content-body ul, .page-content ul, .content-body ol, .news-full-content ul, .news-full-content ol { margin: 1.5rem 0; padding-left: 2rem; } .content-body ul li, .news-full-content ul li { margin-bottom: 0.8rem; padding-left: 0.5rem; list-style-type: disc;  list-style-position: outside; } .content-body ul li::marker, .news-full-content ul li::marker { color: var(--bs-primary);  font-size: 1.2rem; } .content-body ol, .news-full-content ol { list-style-type: decimal;  counter-reset: item; padding-left: 2rem; } .content-body ol li, .news-full-content ol li { margin-bottom: 0.8rem; padding-left: 0.5rem; list-style-position: outside; }  .content-body strong, .content-body b, .news-full-content strong, .news-full-content b { color: var(--bs-primary);  font-weight: 700; } .content-body em, .content-body i, .news-full-content em, .news-full-content i { color: #0056a3;  font-style: italic; }  .content-body img, .news-full-content img { max-width: 100% !important; height: auto !important; border-radius: 16px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06); margin: 2rem auto;  border: 1px solid rgba(0, 0, 0, 0.04); display: block; }  .content-body a, .news-full-content a { color: var(--bs-primary); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.3s ease; } .content-body a:hover, .news-full-content a:hover { color: #004d8a; border-bottom-color: #004d8a; }  .content-body blockquote, .news-full-content blockquote { margin: 2rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--bs-primary); background-color: rgba(0, 106, 184, 0.05); border-radius: 0 8px 8px 0; font-style: italic; color: #4a5568; }  .content-body table, .news-full-content table { width: 100%; margin: 2rem 0; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .content-body table th, .news-full-content table th { background: linear-gradient(135deg, var(--bs-primary) 0%, #004d8a 100%); color: white; padding: 12px 16px; font-weight: 600; text-align: left; } .content-body table td, .news-full-content table td { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; } .content-body table tr:nth-child(even), .news-full-content table tr:nth-child(even) { background-color: #f8fafc; }  @media (max-width: 767.98px) { .news-excerpt { font-size: 12px; line-height: 1.5; -webkit-line-clamp: 2; height: 3.0em; } }  .news-footer { border-top: 1px solid #f1f3f5; display: flex; justify-content: flex-start; }  .pagination { display: flex; gap: 8px;  } .pagination .page-item { margin: 0; } .pagination .page-item .page-link { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 1px solid #e2e8f0; color: var(--bs-primary); background-color: var(--color-white); border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .pagination .page-item.active .page-link { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--color-white) !important; box-shadow: 0 8px 20px rgba(0, 106, 184, 0.28) !important; } .pagination .page-item:not(.active):not(.disabled):hover .page-link { background-color: rgba(0, 106, 184, 0.04); border-color: var(--bs-primary); color: var(--bs-primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 106, 184, 0.12); } .pagination .page-item.disabled .page-link { color: #cbd5e0; background-color: #f7fafc; border-color: #e2e8f0; box-shadow: none; pointer-events: none; }   * { font-family: 'Noto Sans Thai', sans-serif !important; }  .detail-page-title { font-size: 2.5rem !important; text-align: left !important; padding-left: 0 !important; margin-left: 0 !important; } @media (max-width: 767px) { .detail-page-title, .promo-detail-title, .doctor-profile-title { font-size: 1.5rem !important;  } }  .bi, .bootstrap-icons { font-family: 'bootstrap-icons' !important; }  html { font-size: 18px; } body { font-size: 18px; line-height: 1.7; color: #000; background-color: #f3f4f6; }  h1, .h1 { font-size: 3rem; font-weight: 700; line-height: 1.3; } h2, .h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.3; } h3, .h3 { font-size: 2rem; font-weight: 600; line-height: 1.4; } h4, .h4 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; } h5, .h5 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; } h6, .h6 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; }  p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; }  a { font-size: 1.05rem; text-decoration: none; transition: color 0.2s; }  .btn { font-size: 1.05rem; font-weight: 600; padding: 0.6rem 1.75rem; } .btn-lg { font-size: 1.25rem; font-weight: 700; padding: 0.8rem 2.25rem; } .btn-sm { font-size: 0.95rem; font-weight: 600; padding: 0.4rem 1.2rem; }  .form-control, .form-select { font-size: 1.05rem; line-height: 1.6; } .form-label { font-size: 1rem; font-weight: 600; }  .card { font-size: 1.05rem; } .card-title { font-size: 1.5rem; font-weight: 700; }  .navbar { font-size: 1.05rem; } .nav-link { font-size: 1.05rem; font-weight: 600; }   .table { font-size: 1.05rem; }  .small, small { font-size: 0.95rem; }  .fs-6 { font-size: 0.95rem !important; } .fs-7 { font-size: 0.85rem !important; }  html, body { overflow-y: auto !important; overflow-x: clip !important; height: auto !important; min-height: 100vh; }  body:not(.offcanvas-open) { overflow-y: auto !important; }  .fw-light { font-weight: 300 !important; } .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; }  .FontBlue { color: var(--bs-primary); } .FontDefaultMd { font-size: 1.1rem; line-height: 1.7; color: #000; } .FontDefaultSm { font-size: 0.95rem; line-height: 1.6; color: #000; } .FontDefaultVeryBg { font-size: 0.95rem; color: #000; }  @media (max-width: 768px) { html { font-size: 16px; } h1, .h1 { font-size: 2.25rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.75rem; } h4, .h4 { font-size: 1.35rem; } h5, .h5 { font-size: 1.15rem; } body { font-size: 1rem; } p { font-size: 1rem; } .btn { font-size: 1rem; } }  .sidebar-contact-box { background-color: #f0f4fb; border-radius: 12px; padding: 30px; } .contact-item { background-color: var(--color-white); border-radius: 12px; padding: 15px 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); } .contact-item .icon-wrap { width: 50px; height: 50px; border-radius: 50%; background-color: #e0e7ff; display: flex; align-items: center; justify-content: center; } .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .btn-appointment { background-color: var(--bs-primary); border-color: var(--bs-primary); border-radius: 8px; padding: 12px; font-weight: 700; font-size: 1.1rem; } .btn-appointment:hover { background-color: var(--bs-primary-dark); border-color: var(--bs-primary-dark); } .article-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease; }  .text-primary { color: var(--bs-primary) !important; } .bg-primary { background-color: var(--bs-primary) !important; } .btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } .btn-primary:hover { background-color: var(--bs-primary-dark) !important; border-color: var(--bs-primary-dark) !important; } .btn-outline-primary { color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } .btn-outline-primary:hover { background-color: var(--bs-primary) !important; color: #fff !important; } .border-primary { border-color: var(--bs-primary) !important; }   .doctor-profile-image { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(44, 55, 144, 0.15); } .doctor-profile-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }  .doctor-profile-info h1 { font-size: 26px; font-weight: 700; color: var(--bs-primary); margin-bottom: 12px; } .doctor-profile-info .badge { padding: 8px 14px; font-size: 14px; font-weight: 500; border-radius: 8px; margin-right: 6px; margin-bottom: 6px; }  .doctor-info-card { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 24px; background: #fff; } .doctor-info-card .card-header { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 14px 20px; font-weight: 600; color: var(--bs-primary); border-radius: 12px 12px 0 0; } .doctor-info-card .card-body { padding: 24px; font-size: 15px; line-height: 1.8; }  .doctor-info-card .table thead th { background: #f8f9fa; border: none; color: var(--bs-primary); font-weight: 600; text-align: center; padding: 12px; } .doctor-info-card .table td { padding: 12px; border-color: #f1f5f9; }  .doctor-sidebar { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; } .doctor-sidebar .card-header { background: var(--bs-primary); color: #fff; padding: 14px 18px; font-weight: 600; border: none; } .doctor-sidebar .sidebar-body { max-height: 600px; overflow-y: auto; padding: 0; } .doctor-sidebar-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid #f1f5f9; color: #1e293b; font-size: 14px; font-weight: 500; transition: background 0.15s; } .doctor-sidebar-item:hover { background: #f0f9ff; color: var(--bs-primary); } .doctor-sidebar-item.active { background: #eff6ff; color: var(--bs-primary); font-weight: 700; } .doctor-sidebar-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }  @media (max-width: 767px) { .doctor-profile-info h1 { font-size: 22px; } }  .doc-attr-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; } .doc-attr-item { display: flex; align-items: center; gap: 20px; } .doc-attr-icon { width: 65px; height: 65px; border-radius: 50%; border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; color: #31429b; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); } .doc-attr-icon svg { width: 32px; height: 32px; } .doc-attr-text { display: flex; flex-direction: column; text-align: left; } .doc-attr-label { font-size: 0.95rem; color: #6c757d; margin-bottom: 4px; } .doc-attr-value { font-size: 1.15rem; font-weight: bold; color: #212529; } .doctor-profile-title { font-size: 2.2rem; font-weight: 700; color: #212529; margin-bottom: 0.5rem; }  .schedule-section-custom { background-color: #637BFE; color: white; padding: 30px; border-radius: 12px; margin-bottom: 2rem; } .schedule-title-custom { font-size: 1.25rem; font-weight: bold; margin-bottom: 20px; } .schedule-row-custom { display: flex; margin-bottom: 8px; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .schedule-day-custom { background-color: #A1B4FE; color: white; padding: 10px 15px; width: 35%; text-align: center; font-weight: 500; display: flex; align-items: center; justify-content: center; } .schedule-time-custom { background-color: white; color: #333; padding: 10px 15px; width: 65%; text-align: center; font-weight: 500; display: flex; align-items: center; justify-content: center; } .appointment-right-custom { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; padding: 20px; } .appointment-title-custom { font-size: 2.2rem; font-weight: bold; margin-bottom: 10px; letter-spacing: 1px; } .appointment-desc-custom { font-size: 0.95rem; margin-bottom: 25px; font-weight: 300; } .btn-appointment-custom { background-color: #2C3E8A; color: white; padding: 12px 40px; border-radius: 6px; font-weight: bold; text-decoration: none; border: none; transition: background-color 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .btn-appointment-custom:hover { background-color: #1c2b66; color: white; } @media (max-width: 768px) { .appointment-right-custom { margin-top: 30px; padding: 0; } }  .btn-read-more { background-color: var(--color-white) !important; border: 1.5px solid var(--bs-primary) !important; color: var(--bs-primary) !important; font-weight: 500; transition: all 0.3s ease; border-radius: 50rem; padding: 0.375rem 1.25rem; display: inline-flex; align-items: center; justify-content: center; width: fit-content; text-decoration: none !important; } .btn-read-more:hover, .btn-read-more:focus, .btn-read-more:active { background-color: var(--bs-primary) !important; color: var(--color-white) !important; border-color: var(--bs-primary) !important; } .btn-read-more i { font-size: 0.85em; margin-left: 0.4rem; }  .promo-detail-title { font-size: 2.5rem; text-align: left !important; padding-left: 0 !important; margin-left: 0 !important; } .promo-detail-subtitle { text-align: left !important; padding-left: 0 !important; margin-left: 0 !important; line-height: 1.6; } .promo-detail-content { padding: 0 !important; margin: 0 !important; text-align: left !important; }  .hero-banner-section { position: relative; width: 100%; min-height: 250px; overflow: hidden; display: flex; align-items: center; } .hero-banner-section.hero-banner-light { background-color: var(--color-white); } .hero-banner-section.hero-banner-dark { background-color: #5779D6; background: linear-gradient(135deg, #7493e8 0%, #5779d6 100%); } .hero-banner-bg { position: absolute; top: 0; right: 0; width: 60%; height: 100%; background-size: cover; background-position: center right; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%); mask-image: linear-gradient(to right, transparent 0%, black 50%); } .hero-banner-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--color-white) 0%, transparent 60%); } .hero-banner-content { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 40px; } .hero-banner-content .breadcrumb { background: transparent; padding: 0; margin-bottom: 15px; } .hero-banner-content .breadcrumb-item a, .hero-banner-content .breadcrumb-item.active { text-decoration: none; } .hero-banner-title { font-weight: 700; font-size: 2.5rem; margin-bottom: 10px; } .hero-banner-subtitle { font-size: 1.2rem; }  .hero-banner-light .hero-banner-content .breadcrumb-item a, .hero-banner-light .hero-banner-content .breadcrumb-item.active, .hero-banner-light .hero-banner-content .breadcrumb-item+.breadcrumb-item::before, .hero-banner-light .hero-banner-title, .hero-banner-light .hero-banner-subtitle { color: #2C3690; }  .hero-banner-dark .hero-banner-content .breadcrumb-item a, .hero-banner-dark .hero-banner-content .breadcrumb-item.active, .hero-banner-dark .hero-banner-content .breadcrumb-item+.breadcrumb-item::before, .hero-banner-dark .hero-banner-title, .hero-banner-dark .hero-banner-subtitle { color: var(--color-white); } @media (max-width: 768px) { .hero-banner-bg { width: 80%; right: 0; opacity: 0.6; background-position: right center; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%); mask-image: linear-gradient(to right, transparent 0%, black 60%); } .hero-banner-title { font-size: 2rem; } }  .contact-section-wrapper { padding-top: 60px; padding-bottom: 60px; width: 100%; background-color: var(--bs-primary); position: relative; } .contact-section-title { font-size: 2rem; font-weight: 600; } .contact-section-title-mobile { font-size: 1.5rem; font-weight: 600; } .contact-section-subtitle { font-size: 1.1rem; margin-top: 10px; } .contact-section-subtitle-mobile { font-size: 0.95rem; margin-top: 8px; } .contact-card { transition: all 0.3s ease; height: 100%; padding: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; backdrop-filter: blur(10px); } .contact-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.15); } .contact-card.min-h-250 { min-height: 250px; } .contact-card-icon-img { filter: brightness(0) invert(1); margin-bottom: 1rem; } .contact-card-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; } .contact-card-phone { font-size: 2rem; font-weight: 700; margin: 10px 0; } .contact-card-text { font-size: 1rem; } .contact-card-icon-font { font-size: 3rem; margin-bottom: 10px; } .contact-card-title-sm { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; } .contact-card-address { font-size: 0.95rem; line-height: 1.6; } .contact-btn-outline { padding: 12px 35px; font-weight: 600; }   .top-header-bar { background: var(--color-white); padding: 15px 0; border-top: 6px solid #374151; border-bottom: 1px solid #f3f4f6; } .header-logo { max-height: 55px; width: auto; max-width: 220px; object-fit: contain; } .search-box { position: relative; width: 280px; overflow: hidden; border-radius: 6px; } .search-input { border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 40px 6px 12px; background: #f8f9ff; width: 100%; font-size: 13px; color: #111827; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .search-input:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); } .btn-search { position: absolute; right: 0; top: 0; bottom: 0; width: 36px; background: #f0f2ff; border: none; border-radius: 0 6px 6px 0; color: var(--bs-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s, color 0.2s; flex-shrink: 0; font-size: 13px; } .btn-search:hover { background: var(--bs-primary); color: var(--color-white); } .hotline-img { height: 35px; } .btn-language { background: transparent; border: none; color: #111827; font-weight: 500; display: flex; align-items: center; gap: 5px; } .navbar-custom { background-color: var(--bs-primary); padding: 0; } .navbar-custom .navbar-nav { width: 100%; justify-content: flex-start; } .navbar-custom .nav-link { color: var(--color-white) !important; font-weight: 500; padding: 16px 24px !important; font-size: 16px; transition: color 0.3s; } .navbar-custom .nav-link:hover, .navbar-custom .nav-link.active { color: #5BC4BF !important; } .btn-promo { background-color: #ED1C24; color: var(--color-white); border: none; border-radius: 4px; padding: 8px 20px; font-weight: 500; text-decoration: none; transition: background-color 0.3s; margin-left: auto; white-space: nowrap; } .btn-promo:hover { background-color: #c8151c; color: var(--color-white); }  .m-nav { position: fixed; width: 100%; top: 0; left: 0; z-index: 1040; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .m-utility { background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; font-size: 13px; } .m-utility a { color: #475569; text-decoration: none; } .m-utility .m-util-left { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--bs-primary); } .m-utility .m-util-right { display: flex; align-items: center; gap: 12px; } .m-utility .m-social { display: flex; gap: 8px; } .m-utility .m-social a { font-size: 16px; color: var(--bs-primary); } .m-lang-toggle { background: var(--bs-primary); color: #fff !important; border: none; border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; } .m-lang-toggle::after { display: none; } .m-lang-menu { min-width: auto; font-size: 13px; } .m-logo-bar { background: var(--color-white); display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .10); } .m-logo-bar .m-logo img { height: 45px; width: auto; } .m-logo-bar .m-actions { display: flex; align-items: center; gap: 16px; } .m-search-btn { background: none; border: none; color: var(--bs-primary); font-size: 22px; cursor: pointer; padding: 0; display: flex; align-items: center; } .m-hamburger { background: none; border: none; color: var(--bs-primary); font-size: 28px; cursor: pointer; display: flex; align-items: center; line-height: 1; padding: 0; } .m-overlay { position: fixed; inset: 0; z-index: 9999; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; } .m-overlay.open { transform: translateX(0); } .m-overlay-header { background: var(--bs-primary); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; } .m-overlay-header h5 { margin: 0; font-weight: 600; font-size: 1.1rem; } .m-overlay-close { background: rgba(255, 255, 255, .2); border: none; color: #fff; border-radius: 8px; width: 38px; height: 38px; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .m-overlay-close:hover { background: rgba(255, 255, 255, .35); } .m-overlay-body { flex: 1; padding: 16px; } .m-search { position: relative; margin-bottom: 16px; } .m-search input { padding-right: 44px; border-radius: 12px; border: 1px solid #e2e8f0; font-size: 15px; } .m-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--bs-primary); font-size: 18px; } .m-nav-list { list-style: none; padding: 0; margin: 0; } .m-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-bottom: 1px solid #f1f5f9; color: #1e293b; text-decoration: none; font-size: 16px; font-weight: 500; transition: background .15s; } .m-nav-item:active, .m-nav-item:hover { background: #f0f9ff; color: var(--bs-primary); } .m-nav-item i { color: var(--bs-primary); font-size: 18px; width: 20px; text-align: center; } .m-nav-item.active { background: #eff6ff; color: var(--bs-primary); border-left: 4px solid var(--bs-primary); padding-left: 8px; } .m-overlay-footer { padding: 16px; border-top: 1px solid #e2e8f0; } .m-overlay-footer .m-foot-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .m-overlay-footer .m-social a { font-size: 22px; color: var(--bs-primary); margin-right: 12px; } body.m-no-scroll { overflow: hidden; }  .dropdown-item.active, .dropdown-item:active { background-color: transparent !important; color: var(--bs-primary) !important; font-weight: 700; } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(0, 0, 0, 0.05) !important; color: var(--bs-primary) !important; }  .footer-section { background-color: #f4f7fb; padding-top: 50px; padding-bottom: 20px; color: #4a5568; position: relative; } .footer-col { margin-bottom: 30px; } .footer-logo { max-width: 200px; height: auto; } .footer-hospital-name { color: #2c3e90; font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; } .footer-hospital-address { font-size: 0.9rem; color: #4a5568; line-height: 1.6; } .footer-heading { color: #2c3e90; font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 10px; font-weight: normal !important; } .footer-links a, .footer-contact-info a { color: #4a5568; text-decoration: none; transition: color 0.3s ease; font-weight: normal !important; } .footer-links a:hover, .footer-contact-info a:hover { color: #e53e3e; text-decoration: none; } .footer-contact-info { list-style: none; padding: 0; margin: 0; } .footer-contact-info li { margin-bottom: 10px; color: #4a5568; font-weight: normal !important; } .footer-divider { border-top: 1px solid #cbd5e0; margin: 30px 0 20px 0; opacity: 1; } .footer-copyright { font-size: 0.9rem; color: #718096; } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: #2c3e90; color: #fff; border-radius: 50%; margin-left: 10px; font-size: 1.2rem; transition: all 0.3s ease; } .footer-socials a:hover { background-color: #e53e3e; transform: translateY(-2px); color: #fff; } .footer-stripe { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(to right, #2c3e90 70%, #e53e3e 30%); } .btn-back-to-top { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; background-color: #e53e3e; color: #fff; border: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .btn-back-to-top.show { opacity: 1; visibility: visible; } .btn-back-to-top:hover { background-color: #c53030; color: #fff; } @media (max-width: 767px) { .btn-back-to-top { bottom: 20px; right: 20px; } .footer-socials { margin-top: 15px; } }    .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffffff; border-top: 1px solid #e0e0e0; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05); z-index: 9999; padding: 1.5rem 0; font-family: 'Noto Sans Thai', sans-serif; } .cookie-title { font-size: 1.1rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; } .cookie-text { font-size: 0.95rem; color: #555; line-height: 1.5; } .cookie-policy-link { color: #555; text-decoration: underline; font-weight: 500; } .cookie-policy-link:hover { color: #1a73e8; } .cookie-actions { display: flex; justify-content: flex-end; align-items: center; gap: 15px; } @media (max-width: 768px) { .cookie-actions { justify-content: flex-start; margin-top: 1rem; } } .cookie-btn-settings { color: #1a73e8; text-decoration: underline; font-weight: 500; padding: 0; } .cookie-btn-settings:hover { color: #0d47a1; } .cookie-btn-accept { background-color: #637aff; border-color: #637aff; border-radius: 6px; padding: 0.5rem 1.5rem; font-weight: 500; } .cookie-btn-accept:hover { background-color: #4b61d4; border-color: #4b61d4; }  .cookie-modal-content { border-radius: 12px; font-family: 'Noto Sans Thai', sans-serif; } .cookie-modal-header { align-items: center; } .cookie-btn-accept-modal { background-color: #637aff; border-color: #637aff; border-radius: 6px; padding: 0.4rem 1.2rem; font-size: 0.95rem; } .cookie-btn-accept-modal:hover { background-color: #4b61d4; border-color: #4b61d4; } .cookie-option-item { padding: 1.2rem 0; border-bottom: 1px solid #eee; } .cookie-option-title { font-weight: 600; color: #1d3557; font-size: 1.05rem; } .cookie-option-desc { font-size: 0.9rem; color: #666; line-height: 1.6; margin-bottom: 0; } .cookie-always-active { color: #999; font-size: 0.9rem; } .cookie-switch .form-check-input { width: 2.5em; height: 1.3em; cursor: pointer; } .cookie-switch .form-check-input:checked { background-color: #637aff; border-color: #637aff; } .cookie-btn-save { background-color: #637aff; border-color: #637aff; border-radius: 6px; padding: 0.6rem 2rem; } .cookie-btn-save:hover { background-color: #4b61d4; border-color: #4b61d4; }