    /*
    Theme Name: Dalieuhanoi2024
    Theme URI: https://drkimanh.com
    Author: Phòng khám Da Liễu Hà Nội
    Author URI: https://drkimanh.com
    Description: Giao diện chính thức của Phòng khám Da Liễu Hà Nội
    Version: 1.0
    Text Domain: Dalieuhanoi2024
    */
    
            * { box-sizing: border-box; margin: 0; padding: 0; }
            body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; }
            p {margin:0 0 10px;}
            a { text-decoration: none; color: inherit; }
			
            header {color: #333; padding: 15px 0;text-align:center;}
            .top-bar { padding: 8px 0; text-align: center; background: none; }
            .top-bar-content {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                gap: 15px;
            }
    
            .top-bar .container {
                width: 90%;
                max-width: 1200px;
                margin: 0 auto;
                padding:0;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                gap: 15px;
                text-align: right; /* căn nội dung sang phải trong khung */
                flex-wrap: wrap;
            }
            .menu { display: flex; justify-content: space-between; align-items: center; }
            nav a { margin-left: 15px; color: white; font-weight: bold; }
            
            
            .slider-container {
                position: relative;
                overflow: hidden;
                max-width: 1200px;
                margin: 0 auto 40px;
            }
            .slider-wrapper {
                display: flex;
                transition: transform 0.5s ease-in-out;
                will-change: transform;
                
            }
            .slide {
                min-width: 100%;
            }
            .slide img {
                width: 100%;
                object-fit: cover;
                border-radius: 10px;
            }
            .prev-slide, .next-slide {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: rgba(0,0,0,0.4);
                border: none;
                color: #fff;
                padding: 10px 15px;
                cursor: pointer;
                z-index: 10;
                 border-radius: 50%;
                width: 40px;
                height: 40px;
                font-size: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
          
    
            .prev-slide { left: 10px; }
            .next-slide { right: 10px; }
            
            .intro, .services, .before-after, .news { padding: 40px 0; }
            .intro { display: flex; align-items: center; }
            .intro img { width: 50%; border-radius: 10px; }
            .intro-text { width: 50%; padding-left: 20px; }
            .intro-text ul {
                list-style: none;
                padding-left: 0;
                margin-top: 10px;
            }
            .news-list {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
                gap: 15px;
            }
            .news-item img {
                width: 100%;
                height: auto;
                border-radius: 5px;
            }
            .news-item p {
                text-align: center;
                margin-top: 8px;
                font-size: 14px;
            }

            .intro-text ul li::before { content: '✅'; margin-right: 8px; }
            .btn-call { background: #0072bc; color: white; padding: 10px 20px; margin-top: 15px; border-radius: 5px; display: inline-block; }
            .services.container h2, 
            .before-after.container h2, 
            .news.container h2 {text-align:center;text-transform: uppercase;letter-spacing: 1px;font-size: 2rem;}
            .service-list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .service-item {
                background: #f3faff;
                padding: 15px;
                border-radius: 10px;
                text-align: center;
                transition: background 0.3s;
                cursor: pointer;
            }
            
            .service-item img {
                width: 100%;
                height: auto;
                border-radius: 8px;
                margin-bottom: 10px;
            }
            .before-after-images {
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }
            .before-after-item img {
                width: 100%;
                max-width: 350px;
                border-radius: 8px;
            }
            .page-layout {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .content-sidebar-wrapper {
                display: flex;
                gap: 30px;
                
                
            }
            .main-content {
                flex: 0 0 66.66%;
                max-width: 66.66%;
                background: #fff;
                border-radius: 10px;
            }
            .main-content h1.page-title {
                text-transform: uppercase;
                text-align: center;
                margin-bottom: 20px;
            }
            .page-content img {
                max-width: 100%;
                height: auto;
                margin-left: auto;
                margin-right:auto;
                display:block;
            }
            .page-content img,
            .page-content iframe {
                max-width: 100% !important;
                height: auto !important;
                width: auto !important;
                display: block;
                margin: 10px auto;
            }
            
            .page-content div {
                max-width: 100% !important;
                width: auto !important;
                height: auto !important;
                overflow-wrap: break-word;
            }
            .page-content p {
                margin:0 0 10px !important;
            }
            .related-posts {
                margin-top: 40px;
            }
            .related-posts h3 {
                text-transform: uppercase;
                border-bottom: 2px solid #0072bc;
                padding-bottom: 8px;
                margin-bottom: 15px;
            }
            .related-posts ul {
                list-style: none;
                padding-left: 0;
            }
            .related-posts ul li {
                margin-bottom: 8px;
            }
            .related-posts ul li a {
                color: #0072bc;
            }
            .related-posts ul li a:hover {
                text-decoration: underline;
            }
            .sidebar {
                flex: 0 0 33.33%;
                max-width: 33.33%;
            }
            .sidebar-widget {
                background: #0072bc;
                color: #fff;
                padding: 20px;
                border-radius: 10px;
                margin-bottom: 20px;
            }
            
            .sidebar-widget h3 {
                font-size: 16px;
                text-transform: uppercase;
                border-bottom: 2px solid #fff;
                margin-bottom: 10px;
                padding-bottom: 5px;
            }
            
            .sidebar-widget a {
                color: #ffff;
                font-weight: bold;
            }
            
            .sidebar-widget ul {
                list-style: none;
                padding-left: 0;
            }
            
            .sidebar-widget ul li {
                margin-bottom: 8px;
                line-height: 1.6;
            }
            .breadcrumb {
                width: 100%;
                padding: 0 0;
                background-color: #f9f9f9;
                text-align: left;
                font-size: 14px;
            }
            .breadcrumb a {
                color: #0072bc;
                text-decoration: none;
            }
            .breadcrumb a:hover {
                text-decoration: underline;
            }
                .post-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
                margin-top: 30px;
            }
            
            .post-grid-item {
                background: #fff;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
                transition: all 0.3s ease;
                text-align: center;
                padding: 15px;
            }
            
            .post-grid-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }
            
            .post-grid-item img {
                width: 100%;
                height: auto;
                border-radius: 8px;
                margin-bottom: 15px;
                transition: transform 0.3s;
            }
            
            .post-grid-item img:hover {
                transform: scale(1.05);
            }
            
            .post-title {
                font-size: 18px;
                font-weight: bold;
                color: #0072bc;
                margin-bottom: 10px;
            }
            
            .post-excerpt {
                font-size: 14px;
                color: #555;
                margin-bottom: 10px;
            }
            
            .btn-view-more {
                display: inline-block;
                margin-top: 10px;
                padding: 8px 12px;
                background: #0072bc;
                color: #fff;
                border-radius: 5px;
                font-size: 14px;
                transition: background 0.3s;
            }
            
            .btn-view-more:hover {
                background: #005b93;
            }
            .category-list {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 25px;
                margin-top: 30px;
            }
            
            .category-item {
                border: 1px solid #e5e5e5;
                border-radius: 10px;
                overflow: hidden;
                background: #fff;
                transition: transform 0.3s, box-shadow 0.3s;
            }
            
            .category-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            }
            
            .category-item img {
                width: 100%;
                height: 236px;
                object-fit: cover;
                display: block;
            }
            
            .category-item-content {
                padding: 15px;
            }
            
            .category-item-content h3 {
                font-size: 18px;
                margin-bottom: 10px;
                color: #0072bc;
                transition: color 0.3s;
            }
            
            .category-item-content h3:hover {
                color: #005b93;
            }
            
            .category-item-content p {
                font-size: 14px;
                color: #555;
                line-height: 1.6;
                margin-bottom: 15px;
            }
            
            .btn-more {
                display: inline-block;
                background: #0072bc;
                color: #fff;
                padding: 8px 15px;
                border-radius: 4px;
                font-size: 13px;
                text-transform: uppercase;
                transition: background 0.3s;
            }
            
            .btn-more:hover {
                background: #005b93;
            }
            
            .pagination {
                margin-top: 30px;
                text-align: center;
            }
            
            .pagination a,
            .pagination span {
                display: inline-block;
                margin: 0 4px;
                padding: 8px 12px;
                background: #f0f0f0;
                border-radius: 4px;
                color: #333;
                text-decoration: none;
            }
            
            .pagination a:hover,
            .pagination .current {
                background: #0072bc;
                color: #fff;
            }
            .intro-text h2 {text-transform:uppercase;font-size:30px;}
            .subcategory-list {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 25px;
                margin-top: 30px;
            }
            
            .subcategory-item {
                border: 1px solid #e5e5e5;
                border-radius: 10px;
                overflow: hidden;
                background: #fff;
                transition: transform 0.3s, box-shadow 0.3s;
                text-align: center;
                padding-bottom: 10px;
            }
            
            .subcategory-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            }
            
            .subcategory-item img {
                width: 100%;
                height: 236px;
                object-fit: cover;
            }
            
            .subcategory-item h3 {
                font-size: 18px;
                color: #0072bc;
                padding: 10px 5px;
                transition: color 0.3s;
            }
            
            .subcategory-item h3:hover {
                color: #005b93;
            }
            .hotline-phone-ring-wrap {
              position: fixed;
              bottom: 110px;
              right: 0px;
              z-index: 999999;
            }
            .hotline-phone-ring {
              position: relative;
              visibility: visible;
              background-color: transparent;
              width: 110px;
              height: 110px;
              cursor: pointer;
              z-index: 11;
              -webkit-backface-visibility: hidden;
              -webkit-transform: translateZ(0);
              transition: visibility .5s;
              left: 0;
              bottom: 0;
              display: block;
            }
            .hotline-phone-ring-circle {
                width: 85px;
              height: 85px;
              top: 10px;
              left: 10px;
              position: absolute;
              background-color: transparent;
              border-radius: 100%;
              border: 2px solid #e60808;
              -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
              animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
              transition: all .5s;
              -webkit-transform-origin: 50% 50%;
              -ms-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
              opacity: 0.5;
            }
            .hotline-phone-ring-circle-fill {
                width: 55px;
              height: 55px;
              top: 25px;
              left: 25px;
              position: absolute;
              background-color: rgba(230, 8, 8, 0.7);
              border-radius: 100%;
              border: 2px solid transparent;
              -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
              animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
              transition: all .5s;
              -webkit-transform-origin: 50% 50%;
              -ms-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
            }
            .hotline-phone-ring-img-circle {
                background-color: #e60808;
                
              height: 33px;
              top: 35px;
              left: 25px;
              position: absolute;
              background-size: 20px;
              border-radius: 100%;
              border: 2px solid transparent;
              -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
              animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
              -webkit-transform-origin: 50% 50%;
              -ms-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .hotline-phone-ring-img-circle .pps-btn-img {
                display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
            }
            .hotline-phone-ring-img-circle .pps-btn-img img {
                width: 50px;
                height: 50px;
            }
            
            
            .hotline-bar {
              position: absolute;
              background: rgba(230, 8, 8, 0.75);
              height: 40px;
              width: 180px;
              line-height: 40px;
              border-radius: 3px;
              padding: 0 10px;
              background-size: 100%;
              cursor: pointer;
              transition: all 0.8s;
              -webkit-transition: all 0.8s;
              z-index: 9;
              box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
              border-radius: 50px !important;
              /* width: 175px !important; */
              left: -104px;
              bottom: 37px;
            }
            .hotline-bar > a {
              color: #fff;
              text-decoration: none;
              font-size: 15px;
              font-weight: bold;
              text-indent: 11px;
              display: block;
              letter-spacing: 1px;
              line-height: 40px;
              font-family: Arial;
            }
            .hotline-bar > a:hover,
            .hotline-bar > a:active {
              color: #fff;
            }
			#chat-widget {
				position: fixed;
				bottom: 100px;
				right: 50px;
				z-index: 9999;
			  }

			  /* Nút icon chat tròn có nền trắng, viền xanh và glow */
			  .chat-button {
				position: relative;
				width: 50px;
				height: 50px;
				background-color: #fff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				box-shadow: 0 0 0 5px #00bcd4; /* viền xanh */
				transition: box-shadow 0.3s ease;
				z-index: 10;
			  }

			  .chat-button::before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				border-radius: 50%;
				animation: pulse-glow 2s infinite;
				box-shadow: 0 0 0 0 rgba(0, 114, 188, 0.4);
				z-index: -1;
			  }

			  .chat-button img {
				width: 30px;
				height: 30px;
				z-index: 2;
			  }

			  @keyframes pulse-glow {
				  0% {
					box-shadow: 0 0 0 0 rgba(0, 114, 188, 0.6);
				  }
				  50% {
					box-shadow: 0 0 0 20px rgba(0, 114, 188, 0.15);
				  }
				  100% {
					box-shadow: 0 0 0 0 rgba(0, 114, 188, 0);
				  }
				}


			  /* Popup chứa các tuỳ chọn chat */
			  .chat-popup {
				display: none;
				flex-direction: column;
				background-color: white;
				padding: 10px;
				border-radius: 10px;
				box-shadow: 0 4px 12px rgba(0,0,0,0.15);
				margin-bottom: 10px;
				width: 220px;
			  }

			  .chat-popup.active {
				display: flex;
				animation: fadeInUp 0.3s ease;
			  }

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

			  /* Từng tuỳ chọn chat */
			  .chat-option {
				display: flex;
				align-items: center;
				padding: 8px 10px;
				border-radius: 6px;
				text-decoration: none;
				color: #0072bc;
				font-size: 14px;
				transition: background 0.2s;
			  }

			  .chat-option img {
				width: 24px;
				height: 24px;
				margin-right: 10px;
			  }

			  .chat-option:hover {
				background-color: #f0f8ff;
			  }
            .footer {
                background: #2f5a8e;
                color: #ffffff;
                padding: 20px 0;
                font-size: 14px;
            }
            
            .footer-container {
                max-width: 1200px;
                margin: auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
    
            .footer-column {
                flex: 1;
                min-width: 200px;
                margin-bottom: 20px;
            }
    
            .footer-column h3 {
                margin-bottom: 20px;
                font-size: 16px;
                text-transform: uppercase;
                border-bottom: 2px solid #888;
                display: inline-block;
            }
    
            .footer-column ul {
                list-style: none;
                padding: 0;
            }
    
            .footer-column ul li {
                margin-bottom: 10px;
                line-height: 1.5;
            }
    
            .footer-column ul li a {
                color: #fff;
                text-decoration: none;
                transition: color 0.3s;
            }
    
            .footer-column ul li a:hover {
                color: #aaa;
            }
    
            .footer-bottom {
                text-align: center;
                padding: 10px 0;
                border-top: 1px solid #444;
                font-size: 14px;
                color: #bbb;
                margin-top: 20px;
            }
            @keyframes phonering-alo-circle-anim {
            0% {
                transform: rotate(0) scale(0.5) skew(1deg);
                opacity: 0.1;
            }
            30% {
                transform: rotate(0) scale(0.7) skew(1deg);
                opacity: 0.5;
            }
            100% {
                transform: rotate(0) scale(1) skew(1deg);
                opacity: 0.1;
            }
        }
        
        @keyframes phonering-alo-circle-fill-anim {
            0% {
                transform: rotate(0) scale(0.7) skew(1deg);
                opacity: 0.6;
            }
            50% {
                transform: rotate(0) scale(1) skew(1deg);
                opacity: 0.6;
            }
            100% {
                transform: rotate(0) scale(0.7) skew(1deg);
                opacity: 0.6;
            }
        }
        
        @keyframes phonering-alo-circle-img-anim {
            0% {
                transform: rotate(0) scale(1) skew(1deg);
            }
            10% {
                transform: rotate(-25deg) scale(1) skew(1deg);
            }
            20% {
                transform: rotate(25deg) scale(1) skew(1deg);
            }
            30% {
                transform: rotate(-25deg) scale(1) skew(1deg);
            }
            40% {
                transform: rotate(25deg) scale(1) skew(1deg);
            }
            50% {
                transform: rotate(0) scale(1) skew(1deg);
            }
            100% {
                transform: rotate(0) scale(1) skew(1deg);
            }
        }

            
            
@media(max-width:768px){
    .intro, .menu, .news-item { flex-direction: column; }
    .intro img, .intro-text, .service-item, .news-item img { width: 100%; }
    nav a { margin: 5px 0; }
}

.container { width: 90%; max-width: 1200px; margin: auto; padding: 20px; }
footer { background: #0072bc; color: white; padding: 15px 0; text-align: center; }
.post-title { margin-bottom: 20px; }
.post-content img { width: 100%; height: auto; margin-bottom: 15px; border-radius: 5px; }
.post-content { margin-bottom: 30px; }

.site-logo img {
    max-width: 180px;
    height: auto;
    
}
.main-navigation {
    background-color: #005b93; /* Màu xanh đậm hơn để nổi bật */
}

.main-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap; /* Không cho xuống hàng */
    justify-content: center;
    padding-right:10px;
    padding-left: 0;
    margin: 0;
}
.main-navigation ul li {
    display: inline-block;
}
.main-navigation ul li a {
    color: white;
    font-weight: bold;
    padding: 20px 3px;
    display: block;
    transition: background 0.3s;
    line-height: 1.4;
}
.main-navigation ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}



.service-item:hover {
    background: #cceaff;
    cursor: pointer;
    transition: background 0.3s;
}
.news-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}


.news-item p {
    margin: 0 0 5px 0;
}

.sidebar {
background: #f3faff;
padding: 20px;
border-radius: 10px;
}
@media(max-width:768px){
    .menu, .intro, .service-list, .news-item { flex-direction: column; align-items: center; }
    .intro img, .intro-text, .service-item, .news-item img { width: 100%; }
    nav a { margin: 8px 0; display: block; }
}
img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}
ul {
    margin: 0;
    padding-left: 20px;
}
.news-item img:hover {
    opacity: 0.9;
    transition: opacity 0.3s;
}
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_item a {
    border-bottom: 2px solid #fff;
}
.btn-call:hover {
    background-color: #005b93;
    transition: all 0.3s;
}
html {
    scroll-behavior: smooth;
}
/* Menu đa cấp */
.main-navigation ul li {
    position: relative;
}

.main-navigation ul li ul {
    display: none;
    position: absolute;
    background: #0072bc;
    top: 100%;
    left: 0;
    min-width: 200px;
    z-index: 9999;
    flex-direction: column;
    background: #004a77; /* Màu xanh đậm hơn để phân biệt */
}

.main-navigation ul li:hover > ul {
    display: flex;
}

.main-navigation ul li ul li a {
    
    color: #fff;
    display: block;
    text-align:left;
    
}

.main-navigation ul li ul li a:hover {
    background: #003a5c; /* Màu hover tối hơn một chút */
}
.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons img {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s;
}

.social-icons img:hover {
    opacity: 0.7;
}
.menu-toggle {
    display: none;
    background: #005b93;
    color: white;
    font-size: 24px;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
}
    
@media (max-width: 768px) {
    header {
        padding: 0 0;
    }
    .site-logo img {
        max-width: 90px;
        height: auto;
    }
    .menu-toggle {
        display: block;
        position: absolute;
        left: 20px;
        top: 50px;
        z-index: 1000;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        background: #005b93;
        position: absolute;
        top: 48px;
        right: 0;
        width: 100%;
        padding: 0;
    }
    .main-navigation ul.show {
        display: flex;
        z-index:999;
    }
    
    .main-navigation ul li a {
        padding: 0px 12px;
        text-align: center;
        display: block;
    }
    .slider-container {
      margin-bottom: 20px;
    }
      .prev-slide, .next-slide {
          width: 32px;
          height: 32px;
          font-size: 16px;
    }
    .service-list {
        grid-template-columns: repeat(2, 1fr);
        }
        .sidebar {
        margin-top: 30px;
    }
    .sidebar {
        display: none;
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        text-align: center;
    }
    

}
    
@media(max-width:1024px){
    .main-navigation ul {
        flex-wrap: wrap;
    }
    
  .main-navigation ul li ul {
    display: none;
    flex-direction: column;
    background: #004a77;
  }
  .main-navigation ul li.submenu-open > ul {
    display: flex;
  }
  .main-content, .sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .sidebar {
        margin-top: 20px;
    }
    .page-layout {
        flex-wrap: wrap;
    }
    .content-sidebar-wrapper {
        flex-wrap: wrap; /* Trên tablet/mobile cho xuống hàng */
    }
   
}
@media (max-width: 480px) {
.service-list {
    grid-template-columns: 1fr;
}
}

            
